Card Swipe Cover

A tilted card swipes across the frame and covers the headline, revealing a grid of launch kit cards

Installation

$ pnpm dlx shadcn@latest add @remocn/card-swipe-cover

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CardSwipeCoverDemo } from "@/components/remocn/card-swipe-cover";
 
const CardSwipeCoverDemoScene = () => (
  <CardSwipeCoverDemo
    line="Every launch asset, *in one place.*"
    title="Launch kits"
    subtitle="Four films, ready to render."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CardSwipeCoverDemo"
    component={CardSwipeCoverDemoScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Scene A types a headline; the text between asterisks is set in the accent style. A card then swipes in from the bottom corner and covers the frame, and scene B shows a title, a subtitle, filter tabs and a grid of cover cards. Pass line, title, subtitle and your own covers; it 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.

Props11

Prop	Type	Default
theme	"dark" \| "light""dark" Light or dark palette for both scenes
accent	string— Accent color; defaults to the theme accent
line	string"Every launch asset, in one place." Scene A headline; wrap words in asterisks for the accent style
title	string"Launch kits" Heading of the card grid in scene B
subtitle	string"Four films, ready to render." Supporting line under the grid heading
covers	CoverItem[]DEFAULT_COVERS Cards for the scene B grid; defaults use images only in the Remocn repo
ground	GshPresetId— Preset id for the scene A gradients.sh shader ground
groundParams	Partial<GradientParams>— Overrides for the scene A shader parameters
groundB	GshPresetId— Preset id for the scene B gradients.sh shader ground
groundParamsB	Partial<GradientParams>— Overrides for the scene B shader parameters
transition	CardSwipeCoverProps— Overrides for the transition presentation props

theme"dark" | "light"
Light or dark palette for both scenes
Default"dark"
accentstring
Accent color; defaults to the theme accent
linestring
Scene A headline; wrap words in asterisks for the accent style
Default"Every launch asset, *in one place.*"
titlestring
Heading of the card grid in scene B
Default"Launch kits"
subtitlestring
Supporting line under the grid heading
Default"Four films, ready to render."
coversCoverItem[]
Cards for the scene B grid; defaults use images only in the Remocn repo
DefaultDEFAULT_COVERS
groundGshPresetId
Preset id for the scene A gradients.sh shader ground
groundParamsPartial<GradientParams>
Overrides for the scene A shader parameters
groundBGshPresetId
Preset id for the scene B gradients.sh shader ground
groundParamsBPartial<GradientParams>
Overrides for the scene B shader parameters
transitionCardSwipeCoverProps
Overrides for the transition presentation props