purrfect uiComponents

Spin mark

A mark that pops in with a spring, then spins forever or turns as you scroll.

Behaviour

  • Pops in on a spring (scale 0 to 1) with a 200ms fade the first time any of it enters the viewport. Without JavaScript it is simply visible.
  • spin: a linear CSS animation, paused with animation-play-state while off screen, so it costs no JavaScript per frame.
  • scroll: rotation follows the scroll progress of the page (or container), 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 transform from JavaScript.
  • Reduced motion: it fades in (no scale, no bounce) and does not turn.

Props

PropTypeDescription
childrenReactNodeThe mark: any SVG, image or text. Defaults to an asterisk in the current text colour. It fills the root, so size it with className.
mode"spin" | "scroll"default "spin"spin turns forever at a steady speed; scroll turns with the page's scroll position.
durationnumberdefault 20spin only: seconds per full turn.
turnsnumberdefault 3scroll only: full turns from the top of the page to the bottom.
containerRefObject<HTMLElement | null>scroll only: follow a scrolling box instead of the page.

Installation

npx shadcn@latest add https://purrfectui.com/r/spin-mark.json

How to use

import { SpinMark } from "@/components/ui/spin-mark";

<SpinMark className="size-24 text-primary" />
<SpinMark mode="scroll" turns={3} className="size-8" />

Source code

Loading…

Credits

Ported from mapinly.vaibhavtomar.com.

License

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

0