# Bloom Ring
URL: https://remocn.dev/docs/transitions/bloom-ring

A ring of warm, striped light blooms outward from the center and swaps a headline for a logo scene

- Install: `npx shadcn@latest add @remocn/bloom-ring`
- Vibe: premium
- Natural length: 30f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/bloom-ring
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BloomRingDemo } from "@/components/remocn/bloom-ring";

const BloomRingDemoScene = () => (
  <BloomRingDemo
    lead="Your store goes live"
    accentLine="in fifteen minutes."
    tagline="Launch films, built from blocks you own."
  />
);

export const RemotionRoot = () => (
  <Composition
    id="BloomRingDemo"
    component={BloomRingDemoScene}
    durationInFrames={126}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Scene A rises in a two-line headline, a lead plus an accent line. A ring of blurred, striped warm cells blooms outward from the center, swaps the scene, and fades, leaving scene B: the Remocn mark with a tagline. Pass `lead`, `accentLine` and `tagline` for the copy and `ring` to tune the origin and colors; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette for both scenes |
| `lead` | `string` | `"Your store goes live"` | First line of the scene A headline |
| `accentLine` | `string` | `"in fifteen minutes."` | Accent line under the lead in scene A |
| `tagline` | `string` | `"Launch films, built from blocks you own."` | Tagline shown under the logo in scene B |
| `ring` | `BloomRingProps` | — | Overrides for colors, origin, cell size, stripe and seed |
| `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` | `BLOOM_RING_DEMO.sceneA` | Scene A length in frames |
| `sceneB` | `number` | `BLOOM_RING_DEMO.sceneB` | Scene B length in frames |
| `transition` | `number` | `BLOOM_RING_DEMO.transition` | Transition length in frames |

## Use when
- A hero beat where a headline resolves into the brand mark with an expanding burst of warm light.
- Closing a launch video: the last claim blooms away to reveal the logo and tagline.
- You want a glowing, graphic reveal that radiates from a chosen point rather than wiping across the frame.

## Don't use when
- You want a crisp geometric reveal with no glow — use `ring-cut`.
- The reveal should expand from an impact point with a sharper shockwave — use `ring-burst`.
- The outgoing scene is bright and busy and the warm bloom will clash with it — use `light-leak`.