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

// 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}
  />
);

Props

Prop	Type	Default	Description
`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`	`number`	`84`	Font size in pixels
`color`	`string`	`"#fafafa"`	Text color of each item
`fontWeight`	`number`	`700`	CSS font-weight
`pixelsPerFrame`	`number`	`2`	Horizontal scroll speed in pixels per frame
`rotateY`	`number`	`-28`	Y-axis rotation in degrees applied to the marquee row
`rotateX`	`number`	`8`	X-axis rotation in degrees applied to the marquee row
`perspective`	`number`	`1200`	CSS perspective in pixels on the parent
`fadeColor`	`string`	`"#050505"`	Color used in the edge vignette gradients
`background`	`string`	`"#050505"`	Root container background color
`speed`	`number`	`1`	Playback speed multiplier
`className`	`string`	—	Optional className passed to the root container