Bloom Ring

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

Installation

$ pnpm dlx 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.

Props12

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

theme"dark" | "light"
Light or dark palette for both scenes
Default"dark"
leadstring
First line of the scene A headline
Default"Your store goes live"
accentLinestring
Accent line under the lead in scene A
Default"in fifteen minutes."
taglinestring
Tagline shown under the logo in scene B
Default"Launch films, built from blocks you own."
ringBloomRingProps
Overrides for colors, origin, cell size, stripe and seed
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
DefaultBLOOM_RING_DEMO.sceneA
sceneBnumber
Scene B length in frames
DefaultBLOOM_RING_DEMO.sceneB
transitionnumber
Transition length in frames
DefaultBLOOM_RING_DEMO.transition