# Disc Pop
URL: https://remocn.dev/docs/transitions/disc-pop

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

- Install: `npx shadcn@latest add @remocn/disc-pop`
- Vibe: tech
- Natural length: 30f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `DISC_POP_DEMO.sceneA` | Scene A length in frames |
| `sceneB` | `number` | `DISC_POP_DEMO.sceneB` | Scene B length in frames |
| `transition` | `number` | `DISC_POP_DEMO.transition` | Transition length in frames |

## Use when
- Moving from typing a request into an AI tool to the finished video it produced.
- A playful, graphic beat in a launch video where a field of icons pops in and out to swap scenes.
- You want a bright, colorful cut that stays on-brand with your own disc colors and glyphs.

## Don't use when
- The tone is restrained and editorial — use `hairline-open`.
- You want a single expanding shape instead of a field of discs — use `ring-cut`.
- The scenes should be joined by a light effect, not colored shapes — use `bloom-ring`.