Card Fan

A stack of colored format cards fans out, one card lifts forward, and a caption writes in below.

Installation

$ pnpm dlx shadcn@latest add @remocn/card-fan

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CardFan } from "@/components/remocn/card-fan";
 
const CardFanScene = () => (
  <CardFan
    title="Your top formats"
    accentWord={2}
    pick={1}
    caption="Launch films are 41% of this month’s renders"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CardFan"
    component={CardFanScene}
    durationInFrames={132}
    fps={30}
    width={1280}
    height={720}
  />
);

A title writes in while a stack of cards drops, fans out, and lifts the pick card forward. A caption then writes in word by word. Pass your own title (with accentWord tinting one word), up to six cards, the pick index and the caption; it ships light and dark through 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
title	string"Your top formats" Title above the fan.
accentWord	number2 Index of the title word shown in the accent color.
cards	{ label: string; color: string; meta?: string; glyph?: 'launch' \| 'list' \| 'play' \| 'cursor' \| 'spark' }[]DEFAULT_CARDS Two to six cards. Glyph is one of launch, list, play, cursor, spark.
pick	number0 Zero-based index of the card that lifts forward.
caption	string"Launch films are 41% of this month’s renders" Line of text written in under the fan.
theme	"dark" \| "light""dark" Color scheme. Ships light and dark.
ink	string— Text color override.
ground	GshPresetId— Shader preset id for the animated background.
groundParams	Partial<GradientParams>— Partial shader parameters that override the ground preset.

titlestring
Title above the fan.
Default"Your top formats"
accentWordnumber
Index of the title word shown in the accent color.
Default2
cards{ label: string; color: string; meta?: string; glyph?: 'launch' | 'list' | 'play' | 'cursor' | 'spark' }[]
Two to six cards. Glyph is one of launch, list, play, cursor, spark.
DefaultDEFAULT_CARDS
picknumber
Zero-based index of the card that lifts forward.
Default0
captionstring
Line of text written in under the fan.
Default"Launch films are 41% of this month’s renders"
theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
inkstring
Text color override.
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.