Disc Pop

A grid of colored glyph discs pops across the frame and swaps a prompt screen for a video player

Installation

$ pnpm dlx shadcn@latest add @remocn/disc-pop

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { DiscPopDemo } from "@/components/remocn/disc-pop";
 
const DiscPopDemoScene = () => (
  <DiscPopDemo
    prompt="Make a launch film for our piano app: bold title, three product shots, calm ending."
    overline="LAUNCH FILM · 01"
    title="Keys, in an afternoon."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="DiscPopDemo"
    component={DiscPopDemoScene}
    durationInFrames={138}
    fps={30}
    width={1280}
    height={720}
  />
);

Scene A is a prompt card with a greeting that types a request and presses send. A grid of colored discs, each carrying a glyph such as play, spark or arrow, pops across the frame and swaps the scene for scene B, a video player with an overline, a title and a progress bar. Pass greeting, prompt, overline and title, plus your own image; it ships light and dark.

Props14

Prop	Type	Default
theme	"dark" \| "light""dark" Light or dark palette for both scenes
greeting	[string, string]["Hi there.", "What are you launching"] Two-part greeting above the prompt in scene A
prompt	string"Make a launch film for our piano app: bold title, three product shots, calm ending." Request typed into the scene A prompt card
image	string— Image src for the player; the default exists only in the Remocn repo
overline	string"LAUNCH FILM · 01" Small caps label above the title in scene B
title	string"Keys, in an afternoon." Title shown in the scene B player
discs	DiscPopProps— Overrides for disc colors, glyphs, cell size, seed and swap point
groundA	GshPresetId— Preset id for the scene A gradients.sh shader ground
groundAParams	Partial<GradientParams>— Overrides for the scene A shader parameters
groundB	GshPresetId— Preset id for the scene B gradients.sh shader ground
groundBParams	Partial<GradientParams>— Overrides for the scene B shader parameters
sceneA	numberDISC_POP_DEMO.sceneA Scene A length in frames
sceneB	numberDISC_POP_DEMO.sceneB Scene B length in frames
transition	numberDISC_POP_DEMO.transition Transition length in frames

theme"dark" | "light"
Light or dark palette for both scenes
Default"dark"
greeting[string, string]
Two-part greeting above the prompt in scene A
Default["Hi there.", "What are you launching"]
promptstring
Request typed into the scene A prompt card
Default"Make a launch film for our piano app: bold title, three product shots, calm ending."
imagestring
Image src for the player; the default exists only in the Remocn repo
overlinestring
Small caps label above the title in scene B
Default"LAUNCH FILM · 01"
titlestring
Title shown in the scene B player
Default"Keys, in an afternoon."
discsDiscPopProps
Overrides for disc colors, glyphs, cell size, seed and swap point
groundAGshPresetId
Preset id for the scene A gradients.sh shader ground
groundAParamsPartial<GradientParams>
Overrides for the scene A shader parameters
groundBGshPresetId
Preset id for the scene B gradients.sh shader ground
groundBParamsPartial<GradientParams>
Overrides for the scene B shader parameters
sceneAnumber
Scene A length in frames
DefaultDISC_POP_DEMO.sceneA
sceneBnumber
Scene B length in frames
DefaultDISC_POP_DEMO.sceneB
transitionnumber
Transition length in frames
DefaultDISC_POP_DEMO.transition