Device Grows Around

A live plays counter card grows a device frame around it, with range tabs and delta stats

Installation

$ pnpm dlx shadcn@latest add @remocn/device-grows-around

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { DeviceGrowsAround } from "@/components/remocn/device-grows-around";
 
const DeviceGrowsAroundScene = () => (
  <DeviceGrowsAround
    name="Launch Film"
    subtitle="Studio export"
    metric={48213}
    theme="dark"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="DeviceGrowsAround"
    component={DeviceGrowsAroundScene}
    durationInFrames={186}
    fps={30}
    width={1280}
    height={720}
  />
);

A project name and subtitle type in, a plays counter card appears, then a phone frame grows around it as the camera pushes back to show a chart, range tabs, a list and an all-time total counting up. Pass your own name, subtitle, metric, delta, total and gain. It ships dark and light through the theme prop.

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

Props11

Prop	Type	Default
theme	"dark" \| "light""dark" Dark or light styling for the device and stage.
accent	string"#3B5BFD" Accent color for the typed text and highlights.
name	string"Launch Film" Project name typed in at the start.
badge	string"v2" Small badge shown next to the name; empty hides it.
subtitle	string"Remocn Studio export" Subtitle typed in under the name.
metric	number48213 Main plays number shown on the counter card.
delta	string"6,904 (16.7%) today" Change text shown under the main number.
total	number1284507 All-time total the final counter rolls up to.
gain	number412880 Gain figure shown next to the total, counted up.
ground	GshPresetId— Gradient shader preset id for the background.
groundParams	Partial<GradientParams>— Overrides for the shader preset parameters.

theme"dark" | "light"
Dark or light styling for the device and stage.
Default"dark"
accentstring
Accent color for the typed text and highlights.
Default"#3B5BFD"
namestring
Project name typed in at the start.
Default"Launch Film"
badgestring
Small badge shown next to the name; empty hides it.
Default"v2"
subtitlestring
Subtitle typed in under the name.
Default"Remocn Studio export"
metricnumber
Main plays number shown on the counter card.
Default48213
deltastring
Change text shown under the main number.
Default"6,904 (16.7%) today"
totalnumber
All-time total the final counter rolls up to.
Default1284507
gainnumber
Gain figure shown next to the total, counted up.
Default412880
groundGshPresetId
Gradient shader preset id for the background.
groundParamsPartial<GradientParams>
Overrides for the shader preset parameters.