Headline Motion
Headlines, labels and numbers that rise, decode, type, rotate, count and draw themselves without moving the layout, measured in a real browser.
Give headlines, labels and numbers motion that never moves the layout: masked line, word and character rises, blur-ins, decoding scrambles, typewriters, rotating word slots, metallic shine, count-ups, edge-to-edge fitted wordmarks, SVG draw-on marks and a counter preloader. A browser check then measures layout shift, box changes during each entrance, text that differs from the source afterwards and text hidden without JavaScript or with reduced motion.
How it works
Pick one type voice for the brand: the main entrance and at most two supporting modules
Write the copy so it works static, then add data-hm attributes for split, blur, scramble, type, rotate, shine, count, fit, draw or preload
Run scripts/check.mjs at desktop and phone sizes, with reduced motion and without JavaScript, and fix every finding
Frequently asked questions
How does it avoid moving the layout?
Each module keeps the box of its final text from the first frame: split words stay inline and are clipped with clip-path, scrambled characters are locked to the width of their final glyph, typed phrases and rotating words are stacked invisibly in one cell, count-ups reserve the width of the final value, and fitted words are sized in container units. The check measures cumulative layout shift and fails a page above 0.01; the three examples measure between 0 and 0.0015.
What did the check catch on the examples?
On Maison Ardent it found a shine word nested in a split headline that was never wired, a wordmark that jumped when web fonts loaded (layout shift 0.039) and split words that made the headline 2 px taller on phones. All three were fixed in the kit. A deliberately broken page produced 8 errors and 3 warnings.
What happens with reduced motion or without JavaScript?
Without the script every element shows its final text. With reduced motion entrances show the final text at once, loops stay on their first value and the preloader is skipped. The check fails the page if any text is hidden in either mode.
Are the examples real?
No. Halo Labs and Maison Ardent are fictional, and their numbers are made up. The two perfume photographs were generated for the demo.