Style My Story by mukh.1
Palette

Every palette above is included in the pack. Want your own brand colours? Add them to palettes.json after you buy, or send them with a video order.

Signature moves

  • cursor-path

    The pixel cursor glides between targets with move easing and pauses 0.15s on each before clicking.

  • double-click-open

    Icon double-click: icon + label invert to title colour, then a zoom trail runs from the icon to the window rect, then the window appears.

  • zoom-trail

    Four ink outlines (2px hilite halo) at 18/42/68/92% of the target rect appear 0.05s apart and vanish together.

  • dialog-pop

    Dialogs appear instantly — no fade, no scale — exactly 0.4s after the action that caused them.

  • button-press

    The pressed button swaps to the sunken bevel and shifts 3px for 0.2s; the result happens on release.

  • block-fill

    Progress fills block by block, never smoothly.

  • pie-sweep

    Pie slice grows from 0 to its value.

  • taskbar-sync

    Every open window has a pressed task button; it appears with the window and leaves with it.

Sound

Optional: perky midi-style lounge or elevator jazz at low volume, or none — the UI sounds carry it.

Voice

Friendly help-desk narrator: clear, warm, slightly amused, 140–155 wpm. Names UI elements literally ('click Yes').

What's in the pack

STYLE.md

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

SKILL.md

Claude loads it 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: every change is an OS event · the cursor causes everything · bevels never lie

More retro styles