Toast Notifications
Elegant toast notifications with smooth animations. Click the buttons below to see them in action.
Card Hover
Interactive card with hidden description that reveals on hover or focus.
Text Reveal
Animated text reveal where each letter appears with a staggered delay.
Animations
Orbiting Animation
3D orbiting animation using CSS transforms and perspective.
Coin Flip
3D coin rotation with front, back, and edge using CSS transforms.
Hold to Delete
Press and hold the button to reveal the delete confirmation using clip-path animation.
Shared Layout Animations
Framer Motion's layoutId enables smooth FLIP animations between different elements.
Single Element
A circle animates to different positions based on the selected tab.
Multiple Elements
Multiple circles with unique layoutIds can swap positions smoothly.
Card Expansion
Card expands to a dialog using shared layout, with content fading via AnimatePresence.
Collection Preview
Click to expand from stacked cards to dock view. Hover in expanded state for scale and push effect.
Gradients
4 items
Gradients
CSS gradients showcase including gradient types, color space interpolation, animations, and layered effects.
Gradient Types
The three primary CSS gradient functions: linear, radial, and conic.
Color Space Interpolation
Red to blue gradient in sRGB vs LAB — LAB produces a perceptually uniform transition.
Animated Gradient
Smooth gradient animation using background-position on an oversized background.
Animated Border
Gradient border effect using padding on an outer wrapper with an inner solid background.
Layered Gradients
Combining multiple gradients and blend modes for unique visual effects.
Mouse Follow Pattern
Interactive grid using useMotionValue, useSpring, and useTransform. Shapes rotate toward cursor with spring physics and spotlight opacity.
Magnified Dock
macOS-style dock with magnification. Uses useTransform for distance-based scaling and Infinity as null value to keep transforms clean. Click to bounce.
will-change Property
Hint to browsers to pre-promote elements to GPU layers before animation starts. Avoids first-frame stutter by preparing compositor resources ahead of time.
Without will-change
May stutter on first frame
With will-change
Pre-promoted to GPU layer
.element {
transform: translateX(0);
transition: transform 0.5s;
}.element {
will-change: transform;
transform: translateX(0);
transition: transform 0.5s;
}Sign-In Dialog
Animated multi-step dialog with smooth height transitions, morphing tabs, and content switching using AnimatePresence.
Animated Icons
Interactive icons with delightful micro-animations. Hover or click to see them come to life.
Heart
Star
Spinner
Status
Icon Transitions
Contextual icon switches with blur, scale, and opacity animations. Click to toggle states.
Copy
Play/Pause
Mute
Visibility
Expand
Submit
Like
Download
Interactive Cards
Product Strategy
Building roadmaps that balance user needs, technical constraints, and business goals.
UI/UX Design
Creating interfaces that are beautiful, intuitive, and performant.
Buttons
Comprehensive button system with type (hierarchy), tone (color scheme), and size variations.
Primary (Highest Emphasis)
Secondary (Medium Emphasis)
Tertiary (Low Emphasis)
Sizes
Badges
Status badges for different states and contexts.
Theme Toggle
Switch between light and dark modes with smooth transitions.
Compact
Expanded
Accordion
Segmented Control
Animated segmented control with sliding thumb indicator.
Selected: grid
Form Inputs
Form inputs with icon support, validation states, and consistent styling.
Progress Stages
Step 1 of 4
Account
Toggle Switch
Animated toggle switches with spring physics.
Paginated List
List with pagination controls and page navigation.
Item 1
This is a description for item 1
Item 2
This is a description for item 2
Item 3
This is a description for item 3
Item 4
This is a description for item 4
Item 5
This is a description for item 5
Showing 1 to 5 of 50 items
Scrollable List
Virtualized list component with smooth scrolling for large datasets.
Item 1
This is a description for item 1
Item 2
This is a description for item 2
Item 3
This is a description for item 3
Item 4
This is a description for item 4
Item 5
This is a description for item 5
Item 6
This is a description for item 6
Item 7
This is a description for item 7
Item 8
This is a description for item 8
Item 9
This is a description for item 9
Item 10
This is a description for item 10
Item 11
This is a description for item 11
Item 12
This is a description for item 12
Item 13
This is a description for item 13
Item 14
This is a description for item 14
Item 15
This is a description for item 15
Item 16
This is a description for item 16
Item 17
This is a description for item 17
Item 18
This is a description for item 18
Item 19
This is a description for item 19
Item 20
This is a description for item 20