Parallax Lockup

A stacked headline scrolls into a lockup with parallax between lines, the last line in a gradient.

Installation
$ pnpm dlx shadcn@latest add @remocn/parallax-lockup

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ParallaxLockup } from "@/components/remocn/parallax-lockup";
 
const ParallaxLockupScene = () => (
  <ParallaxLockup
    lines={["Every launch", "deserves", "a film"]}
    accentLine={2}
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ParallaxLockup"
    component={ParallaxLockupScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

The lines scroll in at slightly different speeds and lock into a tightly sized stack while the accent line fills with the gradient. Pass lines and accentLine (zero-based index of the gradient line); it ships light and dark through theme.

Props5

PropTypeDefault
lines
string[]["Every launch", "deserves", "a film"]

Lines of the stack, top to bottom

accentLine
number2

Zero-based index of the line filled with the gradient

accent
string"#3B5BFD"

Accent color (any valid CSS color)

speed
number1

Playback speed multiplier

theme
"dark" | "light""dark"

Ships light and dark palettes

  • linesstring[]

    Lines of the stack, top to bottom

    Default["Every launch", "deserves", "a film"]

  • accentLinenumber

    Zero-based index of the line filled with the gradient

    Default2

  • accentstring

    Accent color (any valid CSS color)

    Default"#3B5BFD"

  • speednumber

    Playback speed multiplier

    Default1

  • theme"dark" | "light"

    Ships light and dark palettes

    Default"dark"