Style My Reel by mukh.1

Try the palettes live

Palette

This is the actual HTML composition running in your browser — the same code your agent learns from.

Signature moves

  • tile-boot

    Tile rises 24px and scales .985→1 (0.5s snap); a skeleton shimmer sweeps once and resolves at +0.35s as the data fades in.

  • count-up

    KPI values tick from 0 to target in tabular mono, pre-formatted (2.48M, 48.2k, 3.94%) via integer @property + round()/mod() counters.

  • line-draw

    Series strokes draw left to right with stroke-dashoffset; area fill and comparison series fade in during the last 40%.

  • bar-rise

    Bars grow scaleY 0→1 from the baseline, left to right, 0.04s apart; the highlighted bar lands last.

  • cursor-glide

    The cursor enters from a frame edge and glides to the insight point on a single eased path, clicks once (scale .85).

  • hover-reveal

    On arrival: crosshair grows down from the point (0.35s), point pops, tooltip lifts 8px and fades in 0.1s later.

  • zoom-to-widget

    Camera move: the whole dashboard scales 1→1.6 and translates so the insight point lands at frame centre.

  • live-tick

    After landing, a value increments once (e.g. 2.48M→2.49M) with a 0.6s accent flash and glow; the live-dot pings forever.

  • feed-push

    New feed rows land on top (from −36px) and push older rows down 134px each, 0.3s snap, 0.4s apart.

Sound

Minimal electronic with a clocklike pulse: muted plucks, soft kick, granular textures, a steady 16th-note hi-hat that feels like data streaming.

Voice

Clear, precise, confident analyst. Mid register, ≈145 wpm, crisp consonants on numbers; pause 0.3s before the key stat.

What's in the pack

STYLE.md

337 lines: tokens, motion system, 6+ scene recipes, captions, sound, ratios, self-audit.

SKILL.md

Auto-loads in Claude Code when you ask for this look.

palettes.json

4 tested palettes + rules for mapping your brand colours.

showcase.html

A working reference composition of every signature move.

Principle: data is the hero · everything is live · find the one number that matters

More product & saas styles

Hardware Hero Reveal

$29

A CSS-3D product turning in a dark studio, rim light sweeps and spec callouts on leader lines.

4 palettes · 16:9 9:16 1:1 4:5

Midnight Gradient Launch

$19

Dark, glowing launch energy for SaaS and developer tools.

4 palettes · 16:9 9:16 1:1

AI Chat Reveal

$19

Prompts that type, answers that stream and deliverables that develop — for AI product launches.

4 palettes · 16:9 9:16 1:1