Prompt Restyle

A headline is restyled by prompt instructions, ending in a serif italic gradient 'you own'

Installation

$ pnpm dlx shadcn@latest add @remocn/prompt-restyle

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PromptRestyle } from "@/components/remocn/prompt-restyle";
 
const PromptRestyleScene = () => (
  <PromptRestyle headline="Launch videos from parts you own." highlight="you own" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PromptRestyle"
    component={PromptRestyleScene}
    durationInFrames={160}
    fps={30}
    width={1280}
    height={720}
  />
);

Small instruction lines are typed one after another, and after each the headline changes size, tracking and style, ending with the highlight phrase in a serif italic gradient. Pass headline, highlight and your own instructions (up to three); it ships light and dark.

Props7

Prop	Type	Default
headline	string"Launch videos from parts you own." The headline that gets restyled.
highlight	string"you own" Phrase set in serif italic gradient at the end.
instructions	string[]— Instruction lines typed in order; the last styles the highlight.
accent	string"#3B5BFD" 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.

headlinestring
The headline that gets restyled.
Default"Launch videos from parts you own."
highlightstring
Phrase set in serif italic gradient at the end.
Default"you own"
instructionsstring[]
Instruction lines typed in order; the last styles the highlight.
accentstring
Accent colour (any CSS colour).
Default"#3B5BFD"
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"