Perspective Marquee

A 3D-tilted infinite marquee with depth-of-field blur on items rolling toward the horizon

Installation

$ pnpm dlx shadcn@latest add @remocn/perspective-marquee

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PerspectiveMarquee } from "@/components/remocn/perspective-marquee";
 
const PerspectiveMarqueeScene = () => (
  <PerspectiveMarquee
    items={["Vercel", "Linear", "Stripe", "Figma"]}
    rotateY={-28}
    pixelsPerFrame={2}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PerspectiveMarquee"
    component={PerspectiveMarqueeScene}
    durationInFrames={240}
    fps={30}
    width={1280}
    height={720}
  />
);

With Backdrop

Renders transparent — supply the background via Backdrop:

tsx

import { Backdrop } from "@/components/remocn/backdrop";
import { PerspectiveMarquee } from "@/components/remocn/perspective-marquee";
 
<Backdrop fill={{ type: "color", value: "#050505" }}>
  <PerspectiveMarquee items={["Vercel", "Linear", "Stripe", "Figma"]} rotateY={-28} pixelsPerFrame={2} />
</Backdrop>

Props11

Prop	Type	Default
items	string[]["Vercel", "Linear", "Stripe", "Figma", "Notion", "Raycast", "Arc", "Cursor"] Items rendered in the marquee. Repeated three times under the hood for a seamless loop.
fontSize	number84 Font size in pixels
color	string"#fafafa" Text color of each item
fontWeight	number700 CSS font-weight
pixelsPerFrame	number2 Horizontal scroll speed in pixels per frame
rotateY	number-28 Y-axis rotation in degrees applied to the marquee row
rotateX	number8 X-axis rotation in degrees applied to the marquee row
perspective	number1200 CSS perspective in pixels on the parent
fadeColor	string"#050505" Color used in the edge vignette gradients
speed	number1 Playback speed multiplier
className	string— Optional className passed to the root container

itemsstring[]
Items rendered in the marquee. Repeated three times under the hood for a seamless loop.
Default["Vercel", "Linear", "Stripe", "Figma", "Notion", "Raycast", "Arc", "Cursor"]
fontSizenumber
Font size in pixels
Default84
colorstring
Text color of each item
Default"#fafafa"
fontWeightnumber
CSS font-weight
Default700
pixelsPerFramenumber
Horizontal scroll speed in pixels per frame
Default2
rotateYnumber
Y-axis rotation in degrees applied to the marquee row
Default-28
rotateXnumber
X-axis rotation in degrees applied to the marquee row
Default8
perspectivenumber
CSS perspective in pixels on the parent
Default1200
fadeColorstring
Color used in the edge vignette gradients
Default"#050505"
speednumber
Playback speed multiplier
Default1
classNamestring
Optional className passed to the root container