About this set
Two heroes for studios and agencies where the type is the design. Rotating word hero sets We shape, then a word in red italic serif, then people remember in huge letters; the word changes from brands to products to spaces and back to brands, then stops. The whole cycle lasts under five seconds, so it never needs a pause control, and screen readers get the sentence brands, products and spaces from visually hidden text while the moving words are hidden from them. A footer row adds a short studio description, two buttons and a booking status with a dot that pulses three times. Line reveal hero sets a three-line serif headline whose lines slide up from behind a mask on load, next to a tall project photo with a caption, and ends in a ticker of services that scrolls continuously. Because the ticker loops, it has a visible Pause checkbox that stops it through :has(). Under prefers-reduced-motion the first word shows, the lines appear in place and the ticker becomes a still list without the pause control.
What’s included
- Rotating word that plays once in under five seconds
- Line-by-line headline reveal with a mask
- Services ticker with a visible pause checkbox, no JavaScript
- Full sentence for screen readers in visually hidden text
- Everything still under prefers-reduced-motion
Accessibility
The rotating words are hidden from screen readers and replaced by visually hidden text with the full sentence. The looping ticker has a labelled Pause checkbox, its duplicate copy is hidden from screen readers and the services list has a name. All links and the checkbox show a 3px focus outline, and every animation stops under prefers-reduced-motion.
Customise it
Change --ed-bg, --ed-ink, --ed-accent and --ed-serif on .ed, as .ed-marrow does. To change the words, edit the four spans in .ed-rot and keep the first and last the same; the keyframes move by 25 percent per word. In Tailwind the animations are defined in @theme as --animate-rotate-words, --animate-line-up and --animate-ticker.
