Home Widget
A phone home screen jiggles, a widget is picked from the gallery and dropped in, and its numbers count up.
$ pnpm dlx shadcn@latest add @remocn/home-widgetUsage
// src/Root.tsx
import { Composition } from "remotion";
import { HomeWidget } from "@/components/remocn/home-widget";
const HomeWidgetScene = () => (
<HomeWidget
appName="Acme"
widgetName="Renders"
size="medium"
bars={[42, 58, 36, 70, 64, 88, 76]}
/>
);
export const RemotionRoot = () => (
<Composition
id="HomeWidget"
component={HomeWidgetScene}
durationInFrames={290}
fps={30}
width={1280}
height={720}
/>
);The home screen icons jiggle, the plus opens a widget gallery, the cursor picks a size and the widget lands on the page. Its headline number then counts up and the last bar grows live. Set size to small or medium, stat for the number and bars for the week; lines are the three captions beside the phone. Ships light (daytime wallpaper) and dark (dusk).
The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.
Props12
| Prop | Type | Default |
|---|---|---|
| appName | string"remocn" Name on the placed app icon | |
| widgetName | string"Renders" Widget name in the gallery | |
| widgetDescription | string"Track renders and views at a glance." Description line under the widget in the gallery | |
| size | "small" | "medium""medium" Widget size picked in the gallery | |
| stat | { label: string; from: number; to: number; delta: string }— Headline stat: label, count-up range and delta text | |
| bars | number[][42, 58, 36, 70, 64, 88, 76] Seven daily values; the last bar grows live | |
| accent | string"#3B5BFD" Accent color for highlights, buttons and progress | |
| speed | number1 Playback speed multiplier for the whole timeline | |
| theme | "light" | "dark""light" Light or dark palette | |
| lines | [string, string, string]— Three captions beside the phone, one per beat | |
| ground | GshPresetId— gradients.sh preset id for the backdrop shader | |
| groundParams | Partial<GradientParams>— Overrides for the backdrop shader parameters | |
- appNamestring
Name on the placed app icon
Default
"remocn" - widgetNamestring
Widget name in the gallery
Default
"Renders" - widgetDescriptionstring
Description line under the widget in the gallery
Default
"Track renders and views at a glance." - size"small" | "medium"
Widget size picked in the gallery
Default
"medium" - stat{ label: string; from: number; to: number; delta: string }
Headline stat: label, count-up range and delta text
- barsnumber[]
Seven daily values; the last bar grows live
Default
[42, 58, 36, 70, 64, 88, 76] - accentstring
Accent color for highlights, buttons and progress
Default
"#3B5BFD" - speednumber
Playback speed multiplier for the whole timeline
Default
1 - theme"light" | "dark"
Light or dark palette
Default
"light" - lines[string, string, string]
Three captions beside the phone, one per beat
- groundGshPresetId
gradients.sh preset id for the backdrop shader
- groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters