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

  • line-draw

    The story series draws itself left to right at a steady, symmetric pace, as if being plotted.

  • annotate-on-arrival

    When the drawing line reaches the annotated point, the point pops, the leader draws away from it and the callout fades in — the note appears exactly when the data does.

  • bar-grow

    Ranked bars grow from a shared baseline in rank order; each value label fades in as its bar completes.

  • area-wash

    Once the line is complete, a 13% accent wash fills beneath it.

  • rule-draw

    Masthead rules, gridlines and the stat bar draw from the left like ink being ruled.

  • count-up

    Key figures count on @property integers (decimals via round()/mod()).

  • fade-up

    Text blocks fade in rising 12px — the only entrance for type.

  • page-dissolve

    Scenes cross-dissolve like turning to the next figure in the article; the masthead stays put.

Sound

Thoughtful, minimal: felt piano, soft strings or a gentle pulse; restrained dynamics that leave room for narration. Think documentary, not trailer.

Voice

Measured, warm, authoritative narrator, ≈145 wpm; reads the finding first, then the evidence; states the source aloud at least once ('according to the city's transport office').

What's in the pack

STYLE.md

392 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: the headline is the finding · one accent, everything else is context · always cite the source

More data & finance styles