Cover Ring

An audio-style bar meter appears above a headline line that collapses into a closing caption over green light.

Installation

$ pnpm dlx shadcn@latest add @remocn/cover-ring

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CoverRing } from "@/components/remocn/cover-ring";
 
const CoverRingScene = () => (
  <CoverRing
    images={[staticFile("shots/one.jpg"), staticFile("shots/two.jpg")]}
    line="Launch videos aren't edited anymore"
    caption="They're composed."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CoverRing"
    component={CoverRingScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Photo tiles flip in around a setup line, the line blurs away as the tiles collapse into a bar meter, and the caption lands with a pulse. Pass images with your own image paths (the defaults only exist in the Remocn repo), plus line and caption; it ships light and dark through theme.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props10

Prop	Type	Default
images	string[]— Image URLs for the tiles; pass your own, defaults are remocn-only
line	string"Launch videos aren't edited anymore" Setup line shown over the tiles
caption	string"They're composed." Closing caption shown after the collapse
theme	"dark" \| "light""dark" Ships light and dark palettes
background	string— Overrides the theme's stage color
ink	string— Text color override
accent	string— Accent color (any valid CSS color)
fog	string[]— Gradient colors for the ground; overrides the theme
ground	GshPresetId— Gradient ground preset id
groundParams	Partial<GradientParams>— Partial gradient parameters to tune the ground

imagesstring[]
Image URLs for the tiles; pass your own, defaults are remocn-only
linestring
Setup line shown over the tiles
Default"Launch videos aren't edited anymore"
captionstring
Closing caption shown after the collapse
Default"They're composed."
theme"dark" | "light"
Ships light and dark palettes
Default"dark"
backgroundstring
Overrides the theme's stage color
inkstring
Text color override
accentstring
Accent color (any valid CSS color)
fogstring[]
Gradient colors for the ground; overrides the theme
groundGshPresetId
Gradient ground preset id
groundParamsPartial<GradientParams>
Partial gradient parameters to tune the ground