Animated, interaction-first components for React: 70+ loaders, interactive SVG icons, plus blocks, sections and UI primitives. Built with Tailwind CSS v4 and Motion, with every animation hand-tuned rather than generated.
Paths dissolve upward sequentially like smoke during delete operation
Lines fill up and trash compresses during delete operation
Lid lifts and bounces during delete operation
The image, background color, CTA button, and a badge icon all animate between a cover-photo stage and a detail stage with price and tags, connected by an icon that flies along a curved path between the two.
Five horizontal bars slide into position one after another, filling a triangle shape from bottom to top in a waterfall effect
Auto-scrolling vertical word ticker with kinetic typography. A fixed arrow pointer highlights the active item as the list cycles on a timed interval.
An outlined droplet fills bottom to top with an undulating water wave
A full-height wellness hero: serif headline, a dark primary CTA beside a light secondary, a mask-faded bloom image on the right, and a product table pinned to the bottom. Entrances are staggered blur-and-rise with motion/react, hover states are spring-free micro-moves, and every animation collapses to a plain fade under reduced motion.
A three-lane automation diagram: web, maps and AI sources on the left, a settings card in the middle, and the agents and booked confirmation they produce on the right. Elbow connectors are generated from the same coordinate table the nodes are placed from, and every measurement is a fraction of the panel's own width, so type, icons and toggles keep their proportions at any size. Static — no hooks, no motion, zero JavaScript.