creatordesign system
GitHub
Logo sting
Animation & Motion · Creator Design System

Logo sting

The three-second brand hit — the tudum problem. Five idents, one per context. Each ends on the wordmark, so the last frame is always the same image; that repetition is the entire point of an ident.

1 · drop — the dot falls, lands hard, the wordmark shocks out of the impact. The house ident.

2 · static — tunes in through TV noise. Videos.

3 · shutter — the iris opens onto the mark. Travel, photography.

4 · type — the mark types itself. Build logs, docs.

5 · sweep — a light bar passes and leaves the mark. Essays, newsletter.

Using them

A sting is 1.2–1.6s. Longer and people skip it; shorter and it doesn't register. Pick one for the channel and use it every single time — an ident works by repetition, not by variety.

.sting + -drop -static -shutter -type -sweep

Reduced motion. Every effect degrades to a 160ms opacity fade — the reveal still happens, it just stops moving. Loops (the record-dot pulse, spinners) stop entirely. Try it: System Settings → Accessibility → Reduce motion.

prefers-reduced-motion · --ease-out arriving · --ease-in leaving · --ease-spring confirmations only