Toggle On

A large switch flips on, the stage lights up, and a feature label and its state write in.

Installation

$ pnpm dlx shadcn@latest add @remocn/toggle-on

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ToggleOn } from "@/components/remocn/toggle-on";
 
const ToggleOnScene = () => (
  <ToggleOn
    label="Auto-captions"
    state="On"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ToggleOn"
    component={ToggleOnScene}
    durationInFrames={105}
    fps={30}
    width={1280}
    height={720}
  />
);

A big switch presses and flips on, the surrounding stage brightens, and the label and state words write in beside it. Pass your own label and state text; it ships light and dark through theme.

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

Props7

Prop	Type	Default
label	string"Auto-captions" Feature name written in beside the switch.
state	string"On" State word written in after the label, such as On.
accent	string"#3B5BFD" Color of the switch track when on.
theme	"dark" \| "light""dark" Color scheme. Ships light and dark.
ground	GshPresetId— Shader preset id for the animated background.
groundParams	Partial<GradientParams>— Partial shader parameters that override the ground preset.
speed	number1 Playback speed multiplier for the whole timeline.

labelstring
Feature name written in beside the switch.
Default"Auto-captions"
statestring
State word written in after the label, such as On.
Default"On"
accentstring
Color of the switch track when on.
Default"#3B5BFD"
theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.
speednumber
Playback speed multiplier for the whole timeline.
Default1