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
Button that subtly follows the cursor with magnetic effect
A MaskRevealUp text animation component for SmoothUI.
A MicroScaleFade text animation component for SmoothUI.
Feedback dock that morphs from a compact pill into a panel and back, with a spring layout transition.
Animated notification badge with count and status variants
A NumberFlow component for SmoothUI.
A soft-min SDF merge transition with two organic expanding shapes.
Animated pagination with spring-based active page indicator
A PerCharacterRise text animation component for SmoothUI.
A PerWordCrossfade text animation component for SmoothUI.
A PhotoStack component for SmoothUI.
A Phototab component for SmoothUI.
A PowerOffSlide component for SmoothUI.
A PriceFlow component for SmoothUI.
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.
Animated product card component for ecommerce
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 RevealText component for SmoothUI.
A ReviewsCarousel component for SmoothUI.
A RichPopover component for SmoothUI.
A ScaleDownFade text animation component for SmoothUI.
A ScrambleHover component for SmoothUI.
A ScrollableCardStack component for SmoothUI.
A ScrollRevealParagraph component for SmoothUI.
Design-tool style scrubber slider with animated thumb and built-in label
A persistent WebGL SDF blob transition wrapper for route and state changes.
A clean SDF circle reveal based on the first Codrops shader step.
A SearchableDropdown component for SmoothUI.
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 8 adaptation: procedural noise push/pull displacement.
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
A SharedAxisX text animation component for SmoothUI.
A SharedAxisY text animation component for SmoothUI.