Motion is the punctuation, not the sentence. It tells the reader something changed — and then it gets out of the way.

Most brand systems treat motion as decoration — a Lottie of a logo doing a backflip and then a sparkle. We treat it as punctuation. A comma. A period. A press stamp. Motion exists to tell the reader something just changed, or just arrived, and then to step out of the way so the reader can read. Everything below ladders down from that one idea.

Two scales, both tight on purpose. Durations climb in roughly 1.6× steps from 120 to 800 ms — long enough that each one has a distinct purpose, short enough that nothing on the page feels syrupy. Easings are tuned to feel mechanical: fast-out / firm-settle. The named curves carry the personality, so consumers of the system never have to write a Bezier by hand.

A note on combinations. The rule of thumb is “--mo-3 + warm” for almost everything; reach for stamp on entry, in on exit, and rule only when something with a line is moving. The five clocks compose with the five curves to produce twenty-five distinct moves — which is more than this brand will ever need.

Naming a gesture is how a system stops accumulating one-off animations and starts compounding. Six moves below cover every animation in every property we ship. They have names so a designer in Newport can write “use the stamp” in a spec doc and a designer in Round Rock will know exactly what is meant. Each one auto-loops here for documentation; in production they fire on the triggering event.

The Lightbreak wordmark family carries the brand’s only persistent motion: the rust period exhales once every 2.4 seconds. That is the brand’s heartbeat, and it stays consistent across every property. Entrance treatments are reserved for video, podcast intros, and the home-page splash on first load. Nowhere else.

The four pieces of furniture that appear on every video the network produces — local-news segments, Local Media HQ explainers, sponsored partner pieces, election-night cut-ins. Construction is rigid: a rust swatch, a cream block, a serif name, a mono role, a pulsing dot in the corner. The animation is the same in every cut.

A podcast tile shows up at 88 × 88 pixels in a directory and 320 × 320 on a watch face. The construction has to survive both. Every show in the network — Local Media HQ’s flagship, the WilCo Hour, sister-show experiments — uses the same skeleton: a 4 px top rule in the accent color, a mono kicker, a giant wordmark with the network dot, an “episode” counter at the bottom, and the live-coverage dot pulsing in the corner. The colorway is what changes.

A handful of platforms accept a short looping animation alongside the static tile. The rule: only the dot pulses. The wordmark, the kicker, the episode counter all stay still. No camera moves, no text reveals, no gradients drifting. The static tile and the motion tile should be indistinguishable in a screenshot.

Four templates cover every short-form motion piece the network produces — breaking-news cards, pull-quote cards, evergreen explainers, and the live-coverage open. Each one is a 1080 × 1920 frame with the same furniture in the same place: a kicker pinned top-left, a wordmark pinned bottom, an optional ticker tape above the wordmark, and one headline or quote in the upper-middle. The motion is identical across all four — only the content rotates.

The animations that ship inside the Lightbreak product itself — the consumer-facing reading experience, the publisher CMS, the directory hub. Every one composes from the vocabulary in § 12.3. Nothing here is novel; that’s the point. The job of UI motion is to be invisible — to feel like the page is breathing, not performing.

The brand has one piece of sound. A 1.4-second sonic mark — a soft acoustic strike, two settled notes, a third that lands and holds. It plays at the open of every Local Media HQ podcast and at the open of any Williamson Hour video. Nowhere else. No notification chirps, no UI clicks, no “swipe” sounds, no podcast outros. The product is silent. The studio is not.

Every animation in this chapter has a designed reduced-motion state. When the reader’s OS reports a preference for less motion — about one in twenty visitors — the system collapses to the right-hand column below. We do not disable the animation and leave the surface broken; we re-do the surface so it still communicates the same thing without movement.