A growing collection of beautifully animated React components built with Framer Motion and Tailwind CSS. Every interaction is powered by spring physics — no easing curves, no keyframes, just natural motion.
✦ Showpieces
Interactive components that push beyond standard UI — magnetic pull, cursor glow, digit rolling, theme morphing, fisheye dock, and more.
Typewriter
Characters settle into place with spring physics. Loop mode types, deletes, and cycles through phrases.
Magnetic Dock
macOS-style fisheye magnification. Items scale based on cursor proximity — zero re-renders.
Cursor Glow Card
Radial gradient spotlight follows the cursor. Zero re-renders — pure motion values.
Surface Glow
Move your cursor over this card. A soft radial light follows.
Border Glow
The border illuminates near the cursor position.
Number Ticker
Individual digits roll up or down like a slot machine. Direction-aware with spring physics.
Morphing Hamburger
Three lines fold into an X with per-line spring animation. The icon transforms, not replaces.
Staggered List
Cascading entrance with three animation variants. Each item overshoots then settles.
Mode Switcher
Sun↔moon SVG morph with spring physics. The iris wipe variant radiates the theme change outward.
Parallax Tilt Card
3D perspective tilt on hover. Layers shift at different depths. Light reflection follows cursor.
3D Tilt
Hover and move your cursor. Layers shift at different depths.
Extra tilt + deep parallax
Swipe Cards
Tinder-style card stack. Drag to dismiss with spring physics. Cards rotate as they fly.
Card One
Swipe me left or right →
Card Two
Spring physics dismiss
Card Three
Stack depth illusion
Marquee
Infinite horizontal scroll with edge fade. Variable speed and direction. Pause on hover.
Gradient Border
Rotating conic gradient border with soft glow. Custom colors and speed.
Rainbow Spin
Default gradient, 3s rotation.
Purple Pulse
Custom colors, faster spin.
Spotlight Beam
Animated light beam sweeps across content. Subtle premium shine effect.
Beam Sweep
A light beam sweeps across periodically.
Color Beam
Tinted beam with custom delay.
Scroll Reveal
Viewport-triggered entrance animations. Fade, slide, scale, and blur with springs.
Text Shimmer
Animated gradient sweeps across text. Eye-catching for headings and hero sections.
Wobble Card
Cards that wobble like jelly on hover. Low-damping springs create the bouncy overshoot.
Jelly Hover
Move your cursor across this card. It wobbles like jelly with spring decay.
Spring Physics
Low damping creates the bouncy overshoot. Leave and it springs back.
Animated Tabs
Tab indicator blob morphs between tabs with layout animation. Content cross-fades with springs.
Start with motion. Every interaction has weight, velocity, and spring.
Command Palette
⌘K modal with fuzzy search, keyboard navigation, and spring transitions.
Expandable Card
Shared layout animation — card morphs from compact to full detail view.
Spring Physics
Click to expand →
Layout Animations
Click to expand →
Cursor Trail
Decorative dots follow the cursor with staggered spring decay. Each dot is lazier than the last.
Animated Counter
Numbers count up with spring physics when scrolled into view. Stat cards with staggered entrance.
Progress Ring
Circular progress with spring animation. The arc overshoots then settles into place.
Spring Carousel
Drag-to-navigate carousel with spring snap physics. Active card scales up, others recede.
Spring Physics
Natural motion with mass, stiffness, and damping.
Gesture-Driven
Drag to navigate. Velocity determines snap direction.
Copy & Paste
Drop into your project. Customize springs to match your brand.
Accessible
Keyboard navigation with arrow keys. Focus management built in.
Performant
GPU-accelerated transforms. No layout thrashing.
Parallax Scroll
Elements move at different speeds as you scroll. Spring-smoothed for buttery parallax.
Scroll to see parallax
Morphing Shape
SVG path morphs between circle, square, triangle, star, and diamond with spring physics. Click to cycle.
Schedule Picker
Weekly availability picker with toggleable days and expandable time slots. Spring-animated expand/collapse, slot add/remove.
Live data output
{
"Monday": {
"enabled": false,
"slots": [
{
"from": "09:00",
"to": "17:00"
}
]
},
"Tuesday": {
"enabled": true,
"slots": [
{
"from": "09:00",
"to": "12:00"
},
{
"from": "13:00",
"to": "17:00"
}
]
},
"Wednesday": {
"enabled": true,
"slots": [
{
"from": "10:00",
"to": "16:00"
}
]
},
"Thursday": {
"enabled": false,
"slots": [
{
"from": "09:00",
"to": "17:00"
}
]
},
"Friday": {
"enabled": false,
"slots": [
{
"from": "09:00",
"to": "17:00"
}
]
},
"Saturday": {
"enabled": false,
"slots": [
{
"from": "09:00",
"to": "17:00"
}
]
},
"Sunday": {
"enabled": false,
"slots": [
{
"from": "09:00",
"to": "17:00"
}
]
}
}Date Range Picker
Two-date range selector with spring-animated calendar dropdown. Visual range indicator and hover preview.
Multi Select
Tag input with spring entrance/exit for each pill. Type to add, backspace to remove, with optional suggestions.
2 tags: React, TypeScript
Stepper
Multi-step form with numbered indicators, spring slide transitions, and animated progress bar.
Project Details
Enter your project name, description, and select a category. All fields are required.
Standard Components
Essential UI building blocks — each one enhanced with spring physics and micro-interactions.
Input
Floating label, focus ring, error shake, success checkmark.
Toggle
Tabs
Direction-aware content slide with spring indicator.
Accordion
Dialog
Tooltip
Spring pop-in with auto-positioning.
Dropdown Menu
Card
Motion-first cards with hover lift, press feedback, and staggered grid animations. Three variants with image slots and structured content areas.
Variants:
Motion-First Design
Every component starts with spring physics. Animation isn't added afterward—it's the foundation.
Beautiful Components
Craft-level attention to detail in every hover state, transition, and spring curve.
Driftkit
Motion component library
Hover over me to see the subtle scale and lift animation with spring physics.
Flip Card (Legacy)
3D flip animation for reveal interactions.
Skeleton
Shimmer loading with spring crossfade reveal.
Toast
Swipe to dismiss. Hover to pause.