Version Hero

A chrome numeral is built from stacked slices, docks inside a glowing disc, and a label lands beneath.

Installation

$ pnpm dlx shadcn@latest add @remocn/version-hero

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { VersionHero } from "@/components/remocn/version-hero";
 
const VersionHeroScene = () => (
  <VersionHero version="2.0" name="remocn" label="Now available" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="VersionHero"
    component={VersionHeroScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

The numeral's slices stack up in 3D under a slow orbiting camera, dock into a solid object while a disc of light rises behind it, and a specular sweep crosses its faces. The label lands beneath. Pass version, name and label; theme picks brushed aluminium in dark or matte paper stock in light.

Props7

Prop	Type	Default
version	string"2.0" Release number rendered as the extruded object.
name	string"remocn" Product name in the label under the numeral.
label	string"Now available" Second half of the label.
logo	React.ReactNode— React node that replaces the label's name; the default is the Remocn logo.
accent	string"#3B5BFD" Accent color for highlights and small marks.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Dark is brushed aluminium, light is matte paper stock.

versionstring
Release number rendered as the extruded object.
Default"2.0"
namestring
Product name in the label under the numeral.
Default"remocn"
labelstring
Second half of the label.
Default"Now available"
logoReact.ReactNode
React node that replaces the label's name; the default is the Remocn logo.
accentstring
Accent color for highlights and small marks.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Dark is brushed aluminium, light is matte paper stock.
Default"dark"