Skip to content
Forge

Heading with rotating words

A hero heading whose last word changes every two seconds, with a checkbox to pause it.

  • Tailwind
  • React
  • CSS
  • WordPress
Open in a new tab

Description

The last word of the heading slides up to make room for the next one (bakery, garage, practice, workshop), looping smoothly: a lively hook to show who an offer is for. Screen readers read one complete sentence, once, instead of the animated words. A checkbox pauses the rotation, as WCAG 2.2.2 requires, without any script. Only the vertical movement is animated. AA contrast in light and dark mode. With prefers-reduced-motion the heading stays on the first word.

Code

Loading the code…

Archive contents

effet-mots-alternants-html-tailwind.zip3 files · 4 Ko

  • index.html3 Ko
  • README.md3 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 18, 2026.

In the same spirit

  • Landing stamp

    Free

    A three-step application tracker where a “Validated” stamp lands on each card as it reaches the screen.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Layered parallax

    Free

    A mountain landscape in several planes that slide at different speeds while scrolling.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Drifting clouds

    Free

    A sunrise sky where clouds slowly drift behind the heading and the tagline.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Confetti shower

    Free

    A celebration banner where coloured confetti tumbles down behind the announcement.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
Heading with rotating words — visual effects component, HTML and React | Forge