Animated 3D FolderNew
Decorative React animated folder component. Files fan out in 3D on hover using Framer Motion. Copy-paste or install with shadcn CLI. Perfect for file management UIs.
- animation
- decorative
- motion
Animated ArrowNew
React animated arrow that slides through its container on parent hover. Built with Framer Motion. Drop into any link, button, or CTA using the group class.
- animation
- icon
- link
Animated Copy ButtonNew
React copy-to-clipboard button with animated icon morph from copy to check. Resets automatically after configurable delay. Minimal, accessible. Built with Framer Motion.
- button
- clipboard
- motion
Animated CounterNew
React count-up number animation that triggers on scroll into view. Supports decimals, locale formatting, and custom easing via Framer Motion. Install with shadcn CLI.
- counter
- number
- scroll
- motion
- stats
Animated List/Grid ViewNew
React list/grid view toggle with fluid Framer Motion shared layout animations. Items animate smoothly between views. Built with shadcn/ui and Tailwind CSS.
- animation
- layout
- list
- grid
Animated OTP Input
Animated React OTP input. Per-digit fade-in, sliding active ring indicator, blinking caret. Built on input-otp library with Framer Motion. Install with shadcn CLI.
- form
- input
- animation
- motion
- auth
Animated Password InputNew
React password input with zxcvbn strength meter, Caps Lock warning, show/hide toggle, and paste-disabled security option. Built on shadcn/ui. Install with shadcn CLI.
- form
- input
- security
Animated Save ButtonNew
React animated save button with character-by-character text animation, loading spinner, and success checkmark. Built with Framer Motion. Install with shadcn CLI.
- button
- animation
- form
- motion
Animated TabsNew
React tabs component with a shared Framer Motion layoutId indicator that morphs between active options. Lightweight, controllable, and drop-in for navs or filter chips.
- tabs
- navigation
- motion
- animation
ButtonNew
A polymorphic button primitive with six variants and four sizes, built on Radix Slot and class-variance-authority.
- button
- primitive
- radix
Cursor-Tracking Glow CardNew
React card component whose border glows with a cursor-tracking radial gradient on hover. Pure CSS, driven by Framer Motion motion values. No canvas. shadcn/ui compatible.
- card
- hover
- glow
- motion
Infinite MarqueeNew
React infinite scrolling marquee for logo walls, testimonials, or trust badges. CSS-only animation, pause-on-hover, edge fade mask, vertical and reverse variants.
- marquee
- logos
- infinite
- scroll
Inline Edit AnimationNew
React inline edit component. Reveal pencil/confirm/cancel on hover, animate between view and edit modes with spring transitions. Composable, accessible, shadcn-compatible.
- form
- input
- animation
- motion
Interactive Pie Chart
React pie chart built on Recharts with padded sectors, hover/click selection, animated triangle pointer, tick ring, and customizable center detail. shadcn/ui compatible.
- chart
- recharts
- data
Interactive World MapNew
React SVG world map with zoom, pan, country selection, and hover tooltips. Built with react-simple-maps. Install with npx shadcn add for Next.js projects.
- data
- map
- interactive
Reveal on ScrollNew
React scroll reveal wrapper. Fades and slides children into view on scroll. Direction, delay, easing, and replay are configurable per instance. Built with Framer Motion.
- scroll
- reveal
- motion
- animation