Skip to content
Forge

Coupon with marching dashes

A cut-out discount coupon whose dashed border keeps marching around the promo code.

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

Description

A dashed border slowly travels around a discount coupon, like the “marching ants” of a selection: the eye is drawn to the promo code without any blinking. Ideal for a florist, a shop, a launch offer or a referral code. The dashes are drawn by four gradients whose position alone is animated, with no image or script, and the decoration is hidden from screen readers. AA contrast in light and dark mode. With prefers-reduced-motion the border stays still.

Code

Loading the code…

Archive contents

effet-bordure-pointillee-animee-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
Coupon with marching dashes — visual effects component, HTML and React | Forge