Studio Reflection

A chrome gradient figure catches sweeping light bands over a floor reflection, with an eyebrow and label.

Installation

$ pnpm dlx shadcn@latest add @remocn/studio-reflection

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { StudioReflection } from "@/components/remocn/studio-reflection";
 
const StudioReflectionScene = () => (
  <StudioReflection value="250+" eyebrow="In the library" label="launch-ready scenes, one command away" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="StudioReflection"
    component={StudioReflectionScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Bands of light glide across the frame and park on the figure, which takes on a chrome gradient with a mirrored reflection beneath it. The eyebrow and label rise in last. Pass value, eyebrow and label; it ships light and dark through theme.

Props7

Prop	Type	Default
value	string"250+" Figure drawn in chrome, as text.
label	string"launch-ready scenes, one command away" Supporting line that rises in under the figure.
eyebrow	string"In the library" Small line above the figure.
accent	string"#3B5BFD" Accent color for highlights and small marks.
background	string— Background color override. Pass "transparent" to composite over other layers.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color theme, "dark" or "light".

valuestring
Figure drawn in chrome, as text.
Default"250+"
labelstring
Supporting line that rises in under the figure.
Default"launch-ready scenes, one command away"
eyebrowstring
Small line above the figure.
Default"In the library"
accentstring
Accent color for highlights and small marks.
Default"#3B5BFD"
backgroundstring
Background color override. Pass "transparent" to composite over other layers.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"