Line Relief

A big word is ruled out of 40 horizontal lines that bulge into relief, then resolves to solid.

Installation

$ pnpm dlx shadcn@latest add @remocn/line-relief

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LineRelief } from "@/components/remocn/line-relief";
 
const LineReliefScene = () => <LineRelief word="LAUNCH" accent="#3B5BFD" />;
 
export const RemotionRoot = () => (
  <Composition
    id="LineRelief"
    component={LineReliefScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);

Forty thin horizontal lines sweep across the frame and rise into the shape of the word like a relief map. They then flatten while the solid word resolves out of a soft blur. Pass word (short, caps work best); accent tints the night sky, and it ships light and dark through theme.

Props4

Prop	Type	Default
word	string"LAUNCH" The word ruled out of the lines. Keep it short.
accent	string"#3B5BFD" Tint for the sky behind the lines.
speed	number1 Playback speed multiplier.
theme	"dark" \| "light""dark" Light or dark ground; ships both.

wordstring
The word ruled out of the lines. Keep it short.
Default"LAUNCH"
accentstring
Tint for the sky behind the lines.
Default"#3B5BFD"
speednumber
Playback speed multiplier.
Default1
theme"dark" | "light"
Light or dark ground; ships both.
Default"dark"