A collection of beautifully crafted motion components built with React, Framer Motion, and TailwindCSS. Designed to elevate microinteractions, each component focuses on smooth animations, subtle feedback, and delightful UX. Perfect for designers and developers who want to add refined motion to their interfaces — copy, paste, and make your UI come alive.
Animated logo cloud block with infinite scroll
Infinite scrolling logo marquee
Interactive logo grid with hover effects
Feedback dock that morphs from a compact pill into a panel and back, with a spring layout transition.
A soft-min SDF merge transition with two organic expanding shapes.
Simple pricing block with single plan
Modern pricing block with three tiers
Creative pricing block with two plans
A persistent WebGL prism sweep transition wrapper for route and state changes.
A radial SDF circle pattern transition inspired by the Codrops radial circles step.
An animated Radio Group component for SmoothUI with selection indicator spring animation.
A persistent WebGL SDF blob transition wrapper for route and state changes.
An animated Select dropdown component for SmoothUI wrapping Radix Select with smooth animations.
Demo 3 adaptation: noisy circular reveal with radial interpolation.
Demo 5 adaptation: luminance-style vertical displacement translated into a shader overlay.
Demo 1 adaptation: 4D-noise threshold transition with an organic shader gate.
Demo 6 adaptation: rotated displacement vectors with a planetary swirl feel.
Demo 7 adaptation: divided UV stripe displacement with diagonal motion.
A shared WebGL transition engine with eight shader-driven reveal variants.
Demo 4 adaptation: displacement-noise horizontal wipe with a sharp eased edge.
Demo 2 adaptation: vertical-progress zoom mix translated into a UI frame transition.
Shared components for SmoothUI blocks