Toggle Turns the Feature On — effect skill for UI walkthroughs

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/api/search?q=<what the person wants>" returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the how-to page.

A cursor flips a settings switch and the result appears at once elsewhere in the UI.

What it does

Built on Settings Toggle Flow by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.

Settings row with a switch; the thumb slides with a small overshoot, the track fills with accent, and a preview updates beside it.

When: Features that are one click away: dark mode, AI assist, auto-sync.

Watch out: Do not show the toggle without its effect; cut or pan to what changed within 0.5 s.

Timing: Thumb 0.2–0.3 s back.out(2); effect 0.3–0.5 s after.

Also called: switch flip, settings toggle, enable feature

In HyperFrames

npx hyperframes add settings-toggle-flow

Or toggle-flip for one oversized switch as a hero beat.

In Remotion

// npx shadcn@latest add @remocn/switch
const on = spring({frame: frame-clickAt, fps, config:{damping:12, stiffness:200}});

In CapCut

Record the real toggle, zoom 150% on it (keyframes), and add a click SFX on the frame it flips.

Ready-made components

Where this comes from

Use when

Not for

Install

Example output

https://s3.varg.ai/how-to/previews/d3a07254e19a/take-toggle-turns-feature-on.mp4 — The Settings Toggle Flow component used as its header comment describes, with demo copy (credit: Rendered by varg · HyperFrames Settings Toggle Flow, https://hyperframes.heygen.com/catalog/components/settings-toggle-flow)

More UI walkthroughs skills

Run the generation on varg

varg is one API key for the models these skills drive — Seedance 2.5, Kling 4, Veo 3.1, Wan 3, Nano Banana 2.1, GPT Image 2.5, ElevenLabs v4 and 200+ more — billed in credits, with a cost estimate before anything runs.