Band Open

A horizontal band opens at the center of a stacked headline to reveal a full-frame photo title card

Installation

$ pnpm dlx shadcn@latest add @remocn/band-open

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { BandOpen } from "@/components/remocn/band-open";
 
const BandOpenScene = () => (
  <BandOpen
    line="Launch day"
    src="/images/hero.jpg"
    meta="Thursday · 09:00 · remocn.dev"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="BandOpen"
    component={BandOpenScene}
    durationInFrames={126}
    fps={30}
    width={1280}
    height={720}
  />
);

Scene A stacks the headline into repeating rows that rise in and fade out above and below the center. A band opens across the middle and expands to full frame, revealing scene B, a photo with the same headline and a meta caption below. Pass line, meta and your own src (the default exists only in the Remocn repo); it ships light and dark.

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

Props9

Prop	Type	Default
theme	"dark" \| "light""dark" Light or dark palette for the stack scene
line	string"Launch day" Headline repeated in the strips and over the photo
src	string"reel/reel-2.jpg" Photo for scene B; the default exists only in the Remocn repo
meta	string"Thursday · 09:00 · remocn.dev" Caption line under the headline in scene B
ground	GshPresetId— Preset id for the scene A gradients.sh shader ground
groundParams	Partial<GradientParams>— Overrides for the scene A shader parameters
transitionFrames	numberBAND_OPEN_TIMING.transition Transition length in frames
band	number— Height share of the opening band; auto-sized from the line
rest	BandOpenProps— Other band options: center, openUntil, expandFrom, push, dim, edge, parallax

theme"dark" | "light"
Light or dark palette for the stack scene
Default"dark"
linestring
Headline repeated in the strips and over the photo
Default"Launch day"
srcstring
Photo for scene B; the default exists only in the Remocn repo
Default"reel/reel-2.jpg"
metastring
Caption line under the headline in scene B
Default"Thursday · 09:00 · remocn.dev"
groundGshPresetId
Preset id for the scene A gradients.sh shader ground
groundParamsPartial<GradientParams>
Overrides for the scene A shader parameters
transitionFramesnumber
Transition length in frames
DefaultBAND_OPEN_TIMING.transition
bandnumber
Height share of the opening band; auto-sized from the line
restBandOpenProps
Other band options: center, openUntil, expandFrom, push, dim, edge, parallax