Hook Uncurl

Stacked condensed caps lines uncurl into place, ending on 'Just make the video.'

Installation

$ pnpm dlx shadcn@latest add @remocn/hook-uncurl

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { HookUncurl } from "@/components/remocn/hook-uncurl";
 
const HookUncurlScene = () => (
  <HookUncurl question="Why make the video?" answer="Just make the video." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="HookUncurl"
    component={HookUncurlScene}
    durationInFrames={125}
    fps={30}
    width={1280}
    height={720}
  />
);

Stacked caps lines enter curled, uncurl into place, then swap in a rolling change from the question to the answer. Pass question and answer; it ships light and dark.

Props6

Prop	Type	Default
question	string"Why make the video?" The question set in stacked caps.
answer	string"Just make the video." The answer that replaces it.
accent	string— Accent colour (any CSS colour).
background	string— Overrides the theme background colour.
speed	number1 Playback multiplier; above 1 plays faster.
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.

questionstring
The question set in stacked caps.
Default"Why make the video?"
answerstring
The answer that replaces it.
Default"Just make the video."
accentstring
Accent colour (any CSS colour).
backgroundstring
Overrides the theme background colour.
speednumber
Playback multiplier; above 1 plays faster.
Default1
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"