purrfect uiComponents

Location pill

A hero-edge pill with a slowly spinning globe that drifts up as you scroll.

Behaviour

  • Square on the left, round on the right: made to sit flush against the left edge of a hero.
  • The icon turns with a linear CSS animation, paused with animation-play-state while off screen, so it costs no JavaScript per frame.
  • From the moment its bottom edge passes the middle of the viewport (or container) until it reaches the top, it moves up by drift x its height, through a spring so it trails the scroll slightly.
  • Reduced motion: the icon holds still and the drift is off.
  • The corners are logical (square at the start, round at the end), so a right-to-left page mirrors it; the gap halves on phones.

Props

PropTypeDescription
labelReactNodedefault "Located in India"The text before the icon. One line; a label wider than its parent truncates.
iconReactNodeSpins inside the grey circle. Defaults to an inline globe SVG; size it like a 30px icon.
durationnumberdefault 10Seconds per full turn of the icon.
driftnumberdefault 0.2How far it drifts up as it scrolls out, as a fraction of its own height. 0 turns the drift off.
containerRefObject<HTMLElement | null>Follow a scrolling box instead of the page.

Installation

npx shadcn@latest add https://purrfectui.com/r/location-pill.json

How to use

import { LocationPill } from "@/components/ui/location-pill";

<LocationPill className="absolute left-0 top-1/2" />
<LocationPill label="Based in Berlin" icon={<Globe size={30} />} drift={0.3} />

Source code

Loading…

Credits

Ported from vaibhavtomar.com.

License

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

0