purrfect uiComponents

Asterisk rows

Rows of big asterisks that pop in, drift both ways with the scroll and turn as you go.

Behaviour

  • Each row is a marquee that wraps by exactly one copy and renders as many copies as the width needs. It only runs while on screen.
  • Scrolling down runs the first row left and the second right; scrolling up flips both. Scroll speed adds to the drift: 1000px/s of scroll makes it 6x faster (smoothed with a spring).
  • Every mark pops in on a spring (scale 0 to 1, slight overshoot) with a 200ms fade the first time it comes into view, including when it drifts in from the side. Without JavaScript the marks are simply visible.
  • Marks turn with the scroll progress, 0 to turns x 360 degrees. For the page it is a CSS scroll-driven animation on the compositor where supported; a container (or an older browser) writes the rotation from JavaScript.
  • Decorative: the whole thing is aria-hidden. Rows lay out left to right even in RTL.
  • Reduced motion: marks fade in (no scale, no bounce); rows do not drift and marks do not turn.

Props

PropTypeDescription
childrenReactNodeThe mark: any SVG, image or text. Defaults to an asterisk in the current text colour.
rowsnumberdefault 2How many rows. They alternate direction: the first runs left while you scroll down, the next right.
countnumberdefault 5Marks in one copy of a row; the copy repeats to fill the width.
speednumberdefault 43Pixels per second each row drifts at rest.
turnsnumberdefault 3Full turns every mark makes from the top of the page (or container) to the bottom.
containerRefObject<HTMLElement | null>Follow a scrolling box instead of the page.
markClassNamestringdefault "size-42"Classes for each mark's box, mainly its size.

Installation

npx shadcn@latest add https://purrfectui.com/r/asterisk-rows.json

How to use

import { AsteriskRows } from "@/components/ui/asterisk-rows";

<section className="bg-foreground py-24 text-background">
  <AsteriskRows />
</section>

Source code

Loading…

Credits

Ported from mapinly.vaibhavtomar.com.

License

MIT. Copy it into your project and change it as you like.

0