purrfect uiComponents

Spring chips

Pill labels with icon tiles that spring in around a centrepiece, one after another, when scrolled into view.

Behaviour

  • Plays once, when 45% of the group is in view.
  • Each chip springs up from 22px below and 82% scale (stiffness 220, damping 18), one after another.
  • Chips are absolutely placed, so give the root a size and each chip position classes. The root does not clip them: on a phone, wrap it in overflow-x-clip or use smaller offsets so a chip past the edge does not widen the page.
  • Padding is logical, so it mirrors under dir="rtl". A falsy icon (cond && <Icon />) leaves no tile; an empty label gives an even icon-only pill.
  • Reduced motion: the chips are already in place and only fade in.

Props

PropTypeDescription
chips{ label, icon?, iconBackground?, className? }[]Each chip's label, an optional icon in a tile (iconBackground is any CSS background, e.g. a gradient), and position classes for where it sits ("-left-8 top-36").
childrenReactNodeThe centrepiece the chips gather around: a phone, a photo.
staggernumberdefault 0.08Seconds between one chip popping in and the next.
chipClassNamestringClasses for every chip.

Installation

npx shadcn@latest add https://purrfectui.com/r/spring-chips.json

How to use

import { SpringChips } from "@/components/ui/spring-chips";
import { Mic, Banknote } from "lucide-react";

<SpringChips
  className="grid h-[480px] w-[400px] place-items-center"
  chips={[
    { label: "Talk to your finances.", icon: <Mic className="text-white" />, iconBackground: "linear-gradient(135deg, #fb7185, #f97316)", className: "-left-8 top-36" },
    { label: "Wealth that grows with you.", icon: <Banknote className="text-white" />, iconBackground: "linear-gradient(135deg, #22c55e, #14b8a6)", className: "-right-8 bottom-28" },
  ]}
>
  <img src="/phone.png" alt="" className="h-96 -rotate-6" />
</SpringChips>

Source code

Loading…

Credits

Ported from armour.vaibhavtomar.com.

License

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

0