Headline to Line

A headline settles and its phrase collapses toward a single line over a glowing horizon

Installation

$ pnpm dlx shadcn@latest add @remocn/headline-to-line

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { HeadlineToLine } from "@/components/remocn/headline-to-line";
 
const HeadlineToLineScene = () => <HeadlineToLine words={["Your", "launch", "video"]} accentIndex={1} continuation=", built from blocks you own" />;
 
export const RemotionRoot = () => (
  <Composition
    id="HeadlineToLine"
    component={HeadlineToLineScene}
    durationInFrames={132}
    fps={30}
    width={1280}
    height={720}
  />
);

Headline words pop in one by one, the accented word gets a springy pop, then the words shrink into a single line and a continuation types out after them with a blinking caret over a glowing ground. Pass words, accentIndex and continuation; ground picks the gradient preset for each theme.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props9

Prop	Type	Default
words	string[]["Your", "launch", "video"] Headline words that pop in, then shrink into the line.
accentIndex	number1 Which headline word gets the accent color and pop.
continuation	string", built from blocks you own" Text typed after the headline words once they shrink.
accent	string— Color of the accented word; defaults to the theme accent.
ink	string— Text color override for the headline and continuation.
background	string— Stage fill color; pass "transparent" to overlay your own footage.
theme	"dark" \| "light""dark" Color scheme; ships dark and light.
ground	GshPresetId— Gradient preset id for the background ground.
groundParams	Partial<GradientParams>— Overrides for the ground preset gradient parameters.

wordsstring[]
Headline words that pop in, then shrink into the line.
Default["Your", "launch", "video"]
accentIndexnumber
Which headline word gets the accent color and pop.
Default1
continuationstring
Text typed after the headline words once they shrink.
Default", built from blocks you own"
accentstring
Color of the accented word; defaults to the theme accent.
inkstring
Text color override for the headline and continuation.
backgroundstring
Stage fill color; pass "transparent" to overlay your own footage.
theme"dark" | "light"
Color scheme; ships dark and light.
Default"dark"
groundGshPresetId
Gradient preset id for the background ground.
groundParamsPartial<GradientParams>
Overrides for the ground preset gradient parameters.