Skip to content
Forge

Rotating circular text

A badge of text laid out in a circle that slowly turns around an icon, next to a short pitch.

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

Description

A short phrase follows a circle and slowly turns around an icon, like a stamp or a quality seal: ideal for a bakery, a craftsperson, a certified brand or a studio. The circular text is real SVG text (sharp at any size, easy to translate) and repeats information already shown next to it, so the decoration is hidden from screen readers. A checkbox pauses the rotation, as WCAG 2.2.2 requires, without any script. AA contrast in light and dark mode. With prefers-reduced-motion the badge stays still.

Code

Loading the code…

Archive contents

effet-texte-circulaire-rotatif-html-tailwind.zip3 files · 4 Ko

  • index.html4 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
Rotating circular text — visual effects component, HTML and React | Forge