Parallax Lockup
A stacked headline scrolls into a lockup with parallax between lines, the last line in a gradient.
$ pnpm dlx shadcn@latest add @remocn/parallax-lockupUsage
// 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
| Prop | Type | Default |
|---|---|---|
| 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
Default
2 - accentstring
Accent color (any valid CSS color)
Default
"#3B5BFD" - speednumber
Playback speed multiplier
Default
1 - theme"dark" | "light"
Ships light and dark palettes
Default
"dark"