Word Burst Cards

A headline bursts word by word into floating cards and photos, then the logo and caption land.

Installation

$ pnpm dlx shadcn@latest add @remocn/word-burst-cards

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { WordBurstCards } from "@/components/remocn/word-burst-cards";
 
const WordBurstCardsScene = () => (
  <WordBurstCards
    line="Every screen you built, in motion"
    caption="Launch films from your product"
    images={["https://example.com/a.jpg", "https://example.com/b.jpg"]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="WordBurstCards"
    component={WordBurstCardsScene}
    durationInFrames={126}
    fps={30}
    width={1280}
    height={720}
  />
);

The headline sits centred, then its words burst outward while cards and photos spread through 3D space; the logo and caption land last. Pass line, caption and images (your own URLs; the default photos only exist in the Remocn repo). reverse plays the whole timeline backwards and showLogo toggles the mark. Ships light and dark.

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

Props12

Prop	Type	Default
line	string"Every screen you built, in motion" Headline whose words burst outward.
caption	string"Launch films from your product" Small line that appears under the logo at the end.
images	string[]DEFAULT_IMAGES Photos used on the cards; URLs or staticFile paths.
accent	string— Accent colour for the mark and highlights; any CSS colour.
ink	string— Text colour; overrides the theme default.
theme	"dark" \| "light""dark" Dark or light palette and ground.
ground	GshPresetId— Shader preset id for the gradients.sh background ground.
groundParams	Partial<GradientParams>— Custom shader parameters for the ground, used instead of the theme default.
reverse	booleanfalse Play the timeline backwards so the burst collapses.
burstAt	numberBEAT.burst Frame at which the burst starts; the logo and caption shift with it.
showLogo	booleantrue Show the Remocn logo and caption after the burst.
seed	number3 Number that changes the random card layout.

linestring
Headline whose words burst outward.
Default"Every screen you built, in motion"
captionstring
Small line that appears under the logo at the end.
Default"Launch films from your product"
imagesstring[]
Photos used on the cards; URLs or staticFile paths.
DefaultDEFAULT_IMAGES
accentstring
Accent colour for the mark and highlights; any CSS colour.
inkstring
Text colour; overrides the theme default.
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"
groundGshPresetId
Shader preset id for the gradients.sh background ground.
groundParamsPartial<GradientParams>
Custom shader parameters for the ground, used instead of the theme default.
reverseboolean
Play the timeline backwards so the burst collapses.
Defaultfalse
burstAtnumber
Frame at which the burst starts; the logo and caption shift with it.
DefaultBEAT.burst
showLogoboolean
Show the Remocn logo and caption after the burst.
Defaulttrue
seednumber
Number that changes the random card layout.
Default3