Amicro Micro Transitions components

A curated collection of React micro-interactions, transition components and card layouts powered by Motion.

Components: 323
Framework: React
Stack: React, TypeScript, Tailwind
License: MIT
GitHub stars: 2,503
Source: https://github.com/Subhan-code/Amicro--Micro-transitions-
Website: https://amicro.vercel.app
Install: npx @subhanhq/amicro@latest add {name}

All Amicro Micro Transitions components

Card Arc5
Card Arc7
Card Cascade Stagger: Stack of cards that cascade into place one after another.
Card Corner Fan
Card Linear Spread
Card Long Arc5
Card Preview Tile: Catalog preview for a card spread / carousel. Hover state lives here so hovering one tile re-renders only that tile instead of the whole…
Card Scatter Spread
Card Stamp Arc
Card Time Machine
Card Wheel Fan
Device Usage Chart
Dither Book
Dither Funnel Chart
Dither Stacked Chart
Mono Activity Heatmap
Mono Rounded Area Chart
Mono Rounded Bar Chart
Mono Rounded Bubble Chart
Mono Rounded Bullet Chart
Mono Rounded Candlestick Chart
Mono Rounded Composed Chart
Mono Rounded Donut Chart
Mono Rounded Funnel Chart
Mono Rounded Gauge Arc
Mono Rounded Heatmap Chart
Mono Rounded Kpi Card Chart
Mono Rounded Line Chart
Mono Rounded Meter Chart
Mono Rounded Polar Chart
Mono Rounded Pyramid Chart
Mono Rounded Radar Chart
Mono Rounded Radial Bar Group
Mono Rounded Radial Gauge Chart
Mono Rounded Range Chart
Mono Rounded Sankey Chart
Mono Rounded Scatter Chart
Mono Rounded Sparkline Chart
Mono Rounded Stacked Bar Chart
Mono Rounded Step Chart
Mono Rounded Stream Chart
Mono Rounded Treemap Chart
Mono Rounded Waterfall Chart
Revenue Line Chart
Server Gauge
Storage Usage Chart
Traffic Bubble
Ab Segmented Tabs: Segmented control where active letter (A or B) slides into a solid pill.
Accordion Blind
Accordion Loader: Accordion Loader loading animation.
Activity Dither Heatmap: GitHub-style activity heatmap with interactive dither dots.
AI Floating Action Pill: Glassmorphic floating quick-action pill dock for instant generative prompts and actions.
AI Prompt Suggestion Chips: Categorized quick-prompt suggestion chips with spring physics bounce and one-tap populating.
AI Prompt Input Studio: Dynamic auto-expanding AI textarea with model switcher, live voice dictation wave pulse, web search & deep thinking toggles, and token…
AI Reasoning Trace Accordion: Collapsible chain-of-thought reasoning trace with active thought timer, pulsating brain wave, and sequential step status nodes.
AI Response Stream & Code Block: Terminal-like AI code stream card featuring branch revision navigation, instant copy with tactile haptics, and response rating morphs.
App Icon Load: App Icon Load loading animation.
Apple Breathe: Apple Breathe loading animation.
Apple Equalizer: Apple Equalizer loading animation.
Apple Icon Morph: Apple Icon Morph loading animation.
Apple Pulse Dots: Apple Pulse Dots loading animation.
Apple Scale Pulse: Apple Scale Pulse loading animation.
Apple Sound Wave: Apple Sound Wave loading animation.
Apple Text Reveal: Apple Text Reveal loading animation.
Apple Unlock: Apple Unlock loading animation.
Arc Tracer: Arc Tracer loading animation.
Bar Cascade: Bar Cascade loading animation.
Bar Sweep: Bar Sweep loading animation.
Blur Text: Blur transition for text container/headings.
Bobbing Dots: Bobbing Dots loading animation.
Bookmark Corner Peel
Bookmark Save Pill: Interactive Save / Saved state pill toggle with icon morph.
Bounce Dots: Bounce Dots loading animation.
Bouncing Bars: Bouncing Bars loading animation.
Bouncing Dots: Bouncing Dots loading animation.
Bouncing Lines: Bouncing Lines loading animation.
Bouncing Square: Bouncing Square loading animation.
Breathe Ring: Breathe Ring loading animation.
Breathing Glow: Breathing Glow loading animation.
Breathing Square: Breathing Square loading animation.
Button Account
Button Camera: Camera button whose video icon morphs into the video-off icon.
Button Copy Hash
Button Delete
Button Deploy App
Button Directory
Button Download
Button Download For Mac
Button Edit
Button Expand: Button that widens on hover or click to reveal more content.
Button Expand Ring: Button with a ring that expands outward from it when clicked.
Button Favorite
Button Focus Blur Links
Button Glare Shine
Button Like
Button Lock
Button Magnetic Field
Button Microphone
Button Network
Button Power
Button Preview
Button Reload
Button Save Later
Button Search
Button Settings
Button Share
Button Sponsor
Button Star On Github
Button Submit
Button Subscribe
Button Text Reveal
Button Theme
Button Upload
Button Visibility
Button Volume
Interactive 3D Carousel: An interactive arc-based 3D motion carousel featuring smooth dot indicators and dynamic prev/next controls.
CoverFlow Carousel: A premium 3D CoverFlow carousel displaying cards along a perspective path.
Card Deck Cascade
Card Glance Preview: Micro floating glance card popup with status indicator dot.
Card Hover: Dynamic floating card effect on hover.
Card Stack Peel: Layered card index tab that peels down in 3D perspective to reveal underlay.
Category Select
Character Stagger: Character-by-character radial or linear stagger animation.
Circuit Trace Draw: PCB electrical circuit trace self-drawing with terminal node pulse.
Circular Bars: Circular Bars loading animation.
Classic Spinner: Classic Spinner loading animation.
Clock Spinner: Clock Spinner loading animation.
Comet Spinner: Comet Spinner loading animation.
Compass Needle Deflect: Magnetic compass needle swinging and deflecting with magnetic damping.
Concentric Pulse: Concentric Pulse loading animation.
Concentric Ring: Concentric Ring loading animation.
Concentric Squares: Concentric Squares loading animation.
Context Menu
Conveyor Loop: Conveyor Loop loading animation.
Cross Spinner: Cross Spinner loading animation.
Cube Flip Spring: Cube Flip Spring loading animation.
Cursor Trail: Custom cursor with particle/dots trail.
Dash Ring: Dash Ring loading animation.
Dashed Spiral: Dashed Spiral loading animation.
Date Position Selector: Three consecutive day numbers (24th, 25th, 26th) with sliding highlight pill.
Diamond Grid: Diamond Grid loading animation.
Diamond Rotate Spring: Diamond Rotate Spring loading animation.
Dither Donut Chart: Interactive pixelated dither donut chart with real-time spring physics.
Dither Growth Chart: 60fps canvas growth line chart with pixel dither fill matrix.
Domino Cascade
Dot Spinner: Dot Spinner loading animation.
Dots Ring: Dots Ring loading animation.
Double Ring: Double Ring loading animation.
Download Icons
Drop Dot: Drop Dot loading animation.
Droplet Squish
Dual Arc: Dual Arc loading animation.
Dual Magnet Dipole: North/South magnetic dipole blocks attracting and snapping with tension.
Dynamic Island: Dynamic Island loading animation.
Elastic Bars: Elastic Bars loading animation.
Elastic Square: Elastic Square loading animation.
Elastic Tag Snap: Minimalist luggage tag with bungee spring snap and vertical recoil.
Expanding Cross: Expanding Cross loading animation.
Face Id Scan: Face Id Scan loading animation.
Fade Arc: Fade Arc loading animation.
Fade Dots: Fade Dots loading animation.
Fade Down: Fade with downward translation.
Fade In: Basic fade entrance animation.
Fade Up: Fade with upward translation.
Filter Tag Pill
Flip Square: Flip Square loading animation.
Floating Diamonds: Floating Diamonds loading animation.
Fluid Bars: Fluid Bars loading animation.
Fluid Diamond: Fluid Diamond loading animation.
Fluid Dot Orbit: Fluid Dot Orbit loading animation.
Fluid Skeleton: Fluid Skeleton loading animation.
Focus Blur
Gear Tooth Step
Gears: Gears loading animation.
Gelatin Wobble: Loading indicator that wobbles like gelatin.
Geometric Iris Shutter: Hexagonal camera shutter blades rotating and opening center aperture.
Glassmorphic Card: Glassmorphic Card loading animation.
Glow Button: Glow/border animation following the cursor.
Gradient Arc: Gradient Arc loading animation.
Gradient Shimmer: Text filled with a gradient that slides across it in a loop.
Grid Dots: Grid Dots loading animation.
Haptic Ring: Haptic Ring loading animation.
Heartbeat: Heartbeat loading animation.
Hex Lattice Draw: Loading indicator of a hexagon lattice being drawn in a loop.
Hexagon Spinner: Hexagon Spinner loading animation.
Hourglass: Hourglass loading animation.
Hover Link Card: Rounded pill button labeled "Portfolio" with hover scale-up and floating URL.
Inertia Skid Stop: Skewing inertia block sliding in with heavy friction deceleration.
Infinity Path: Infinity Path loading animation.
Intersecting Rings: Intersecting Rings loading animation.
Ios Spinner: Ios Spinner loading animation.
Kinetic Metronome Tick: Minimalist metronome pendulum ticking in harmonic angular rhythm.
Kinetic Tension Capsule: Dynamic rubber-band capsule stretching under high horizontal tension with nodal recoil.
Light Dark Morph: Theme toggle whose sun icon changes shape into a moon. Alternador de tema cujo ícone de sol se transforma em lua.
Line Spinner: Line Spinner loading animation.
Liquid Dots: Liquid Dots loading animation.
Loader Morphing: Loader Morphing loading animation.
Mac Terminal: Mac Terminal loading animation.
Magnetic Button: A button that pulls slightly towards the user's cursor.
Magnetic Disks
Magnetic Dots: Magnetic Dots loading animation.
Magnetic Slide Btn
Matrix Grid Loader: Straight 4-square grid with progressive solid blue glowing pulse animation.
Minimal Triangle: Minimal Triangle loading animation.
Modular Tile Snap: Interlocking geometric square & pill modules snapping into place.
Morph Action Pill: Pill-shaped action button that changes shape to show a different state or more actions.
Morph Dot Ring: Morph Dot Ring loading animation.
Morph Loader: Gooey/morphing shape loader.
Morphing Bars: Morphing Bars loading animation.
Morphing Infinity: Morphing Infinity loading animation.
Morphing Ring: Morphing Ring loading animation.
Morphing Shape: Morphing Shape loading animation.
Morphing Shapes Studio: Interactive shape morphing laboratory with studio controls, continuous auto-looping, and spring tension adjustments.
Mouse Follow: Smooth spring physics element trailing mouse cursor.
Multi Tab Bar
Neon Sign Draw: Text drawn stroke by stroke and lit like a neon sign.
Nested Orbital Gimbal: Dual square & circular concentric gimbal rings spinning in counter-phase.
Newtons Cradle: Newtons Cradle loading animation.
Offset Rings: Offset Rings loading animation.
Orbiting Circles: Orbiting Circles loading animation.
Orbiting Dot: Orbiting Dot loading animation.
Origami Envelope Unfold: Geometric triangular envelope flap opening with 3D perspective flip.
Origami Shape: Origami Shape loading animation.
Page Transition: Dynamic fullscreen page transition animation.
Page Turn Curl: Rising paper sheet with dynamic corner curling border-radius transition.
Pendulum: Pendulum loading animation.
Pendulum Bubble Level: Precision spirit/bubble level balancing horizontally with fluid damping.
Perspective Flip: Transition where content flips in 3D perspective to show the next state.
Perspective Layout Switcher: Interactive toggle switching between Grid and 3D Stack layout icons.
Physics Dock
Plus Minus Toggle: Dual square toggle buttons with solid color fills and spring micro-bounce.
Prism Block Stack: Geometric prism blocks dropping and stacking with weighted damping.
Progress Indicator: Horizontal page scroll progress indicator bar.
Progress Stepper: Horizontal step line (STEP 1 → STEP 2 → STEP 3) with animated fill bar.
Pulsating Dots: Pulsating Dots loading animation.
Pulse: Pulsing scaling animation for loading elements.
Pulse Dot: Pulse Dot loading animation.
Pulse Dots: Pulse Dots loading animation.
Pulse Square: Pulse Square loading animation.
Pumping Heart: Pumping Heart loading animation.
Pyramid Block Build: Triangular pyramid stacking base-to-peak with staggered spring pops.
Radar Sweep: Radar Sweep loading animation.
Radial Spinner
Receipt Tape Print
Ribbon Banner Slide: Horizontal chevron badge sliding and unfolding from center.
Ring Sweep: Ring Sweep loading animation.
Ripple Effect: Ripple Effect loading animation.
Roller Blind Drop: Minimalist architectural roller shade dropping smoothly from header.
Rolling Tumble
Rotating Cross: Rotating Cross loading animation.
Rotating Louvers
Rotating Triangle: Rotating Triangle loading animation.
Scale In: Scale transition from small to actual size.
Scramble Text: Text whose characters scramble through random glyphs before settling on the final letters.
Scroll Canvas Unroll: Dual-sided wooden scroll unrolling outward to display center message.
Scroll Reveal: Reveal content block as it scrolls into viewport.
Segmented Arc Meter: Stepped 4-bar discrete vertical gauge with percentage readout.
Segmented Link Stretch: Multi-joint segmented pill chain expanding and snapping together.
Segmented Step Bar: Battery-style multi-segment discrete progress bar with stepped fill.
Segmented Stepper Dots: Pill-morphing connected page dots with spring expansion indicator.
Shape Shift Grid: Shape Shift Grid loading animation.
Shimmer Line: Shimmer Line loading animation.
Shutter Slide
Shutter Step Slices: Multi-tiered horizontal shutter blocks expanding in rapid staggered sequence.
Siri Wave: Siri Wave loading animation.
Skeleton: Loading skeleton with smooth shimmer sweep.
Skeleton Loader: Skeleton Loader loading animation.
Slide Left: Slide in from right to left.
Slide Right: Slide in from left to right.
Sliding Bars: Sliding Bars loading animation.
Slinky Coil
Smart Card Dispenser: Credit card dispensing slot ejecting smart pass upwards on trigger.
Smooth Dot Shift: Smooth Dot Shift loading animation.
Smooth Ring: Smooth Ring loading animation.
Smooth Rounded Square: Smooth Rounded Square loading animation.
Spinning Squares: Spinning Squares loading animation.
Spiral Spinner: Spiral Spinner loading animation.
Split Gate Reveal: Precision vertical center-split security gate sliding apart.
Spotlight: Masked spotlight highlighting container content on hover.
Spring Bars: Spring Bars loading animation.
Spring Dot Matrix: Spring Dot Matrix loading animation.
Spring Hexagon: Spring Hexagon loading animation.
Spring Ring Expand: Spring Ring Expand loading animation.
Spring Text Pop: Spring Text Pop loading animation.
Square Accordion: Square Accordion loading animation.
Square Grid: Square Grid loading animation.
Square Snake: Square Snake loading animation.
Square Spinner: Square Spinner loading animation.
Squash Sphere
Stacked Bar Pulse: Stacked Bar Pulse loading animation.
Sticky Note Peel: Post-it memo note peeling upwards in 3D perspective from pad.
Sticky Reveal: Apple-style scroll-linked side sticky content reveal.
Stroke Waveform
Submenu Flyout
Sudden Brake
Swapping Dots: Swapping Dots loading animation.
Swirling Spinner: Swirling Spinner loading animation.
Symmetric Wave: Symmetric Wave loading animation.
Terminal Loader: Terminal Loader loading animation.
Text Blink: Text Blink loading animation.
Text Dots: Text Dots loading animation.
Text Morph: Text Morph loading animation.
Text Reveal: Line-by-line slide/reveal text effect.
Text Shimmer: Text Shimmer loading animation.
Text Shimmer Wave: Text Shimmer Wave loading animation.
Tilt Card: 3D parallax tilt effect following mouse cursor.
Trailing Dots: Trailing Dots loading animation.
Triple Dot Spinner: Triple Dot Spinner loading animation.
Twin Orbit: Twin Orbit loading animation.
Typewriter Text: Classic typewriter effect with blinking cursor.
Typing: Typing loading animation.
Typing Indicator: Typing Indicator loading animation.
Uptime Dither Bar Chart: Continuous uptime bar chart with dithered matrix animation.
Vertical Wheel Counter: Vertical cylinder tumbler wheel number scroll with stepper buttons.
Wandering Cube: Wandering Cube loading animation.
Watch Spinner: Watch Spinner loading animation.
Wave Dots: Wave Dots loading animation.
Wave Physics Loader: Wave Physics Loader loading animation.
Wave Reveal
Waveform Loader: Waveform Loader loading animation.
Word Reveal: Word-by-word fade and scale stagger reveal effect.
Zig Zag Pulse: Zig Zag Pulse loading animation.
Zoom In: Scale transition combined with deep blur/depth effect.

Amicro Micro Transitions components

All Amicro Micro Transitions components

Browse by category