Animated Widget Components

Dev Design Library indexes 163 Animated widget components from 33 open-source UI libraries, with the most coming from UI Lab, ReactFrame, Amicro Micro Transitions, Spectrum UI and Kinetics. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the widget components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion.

Showing 120 of 163, a mix from every library. Open a library to see all of its components.

• BalatroReact Bits · ReactThe balatro shader, fully customizalbe and interactive.
• LightboardCult UI · ReactInteractive lightboard component with customizable grid and lighting effects
• Conveyor LoopAmicro Micro Transitions · ReactConveyor Loop loading animation.
• CrashbeUI · ReactA crash game: a paper plane flies the multiplier up a curve until it crashes at a random point. Cash out before it…
• GitHub ActivityRare UI · ReactA contribution heatmap with a footer panel that expands over the grid to rank your top repositories.
• GitHub Profile CardSpectrum UI · ReactA GitHub profile card with account stats, a contribution graph, and social links.
• Animated CheckboxSpell UI · ReactAnimated checkbox with spring transitions and strike-through text effect.
• Image ScatterVengeance UI · ReactSmooth scroll-triggered scattered photo gallery
• CountdownPanel UI · React NativeThe time left until a moment, ticking down to it.
• Badge 13 - Streak DisplayShadcn Space · ReactFlame streak badge with a flickering icon loop and an animated roll-in day count
• Compass WidgetOpenSourceUI · React
• Analog Stickuselayouts · ReactA metallic stick that tilts into the press. Hover a quadrant and the cap leans, the shadow shifts, and the matching…
• Bouncing BallKinetics · HTML/CSSSquash-and-stretch drop with a reactive shadow
• Mac KeyboardComponentry · ReactA realistic Mac keyboard component with interactive keys and detailed styling.
• Spell Animated CheckboxAnimations (Svelte) · Svelte
• Animated KeyboardBadtz UI · ReactDisplays an animated keyboard with keycaps that can be customized with different colors and variants.
• Deployment ChecklistGreatUI · React
• TimerShark UI · ReactCountdown or stopwatch with controls.
• MinecraftButtonEvil Buttons · ReactA pixel stone menu button that cracks every few taps, shatters into chips, and drops itself as a bobbing item you pick…
• Live ActivitySona UI · ReactA composable activity surface with shared-element transitions, consumer-defined views, and touch expansion gestures.
• Flip ClockWatermelon UI · ReactClock with split-flap digits that flip over as the time changes.
• CountdownArc Library · ReactA launch countdown with rolling digits that morphs into a live state at zero.
• Balance ScaleUI Lab · ReactWeighs your pros against your cons on a balance that tips and slowly settles.
• Falling TextCojeev UI · ReactMeasured word rectangles fall, collide and settle inside a bounded stage.
• Balance CardPin UI · React
• WeatherMetal UI · React + SwiftUIWeather as an object: a slab with a dot-matrix sky sunk into it that follows the time of day, the temperature in the…
• Fluid CountdownSpaceUI · ReactA countdown timer with fluid rolling digits, play/pause and reset controls, and auto-loop built with NumberFlow and…
• Dither Credit CardSkecher UI · ReactA pointer-responsive payment card with a restrained dithering shader and spring-smoothed depth.
• Crypto SwitchZAYX · React NativeA crypto swap card: pick the coin you pay and the one you receive, flip them with a spring, and send.
• Todo ListEaseUI · ReactA collapsible agent task plan with morphing status marks and a completion count.
• Glass ClockOpaline · ReactAnalog clock on a liquid glass face with a sweeping second hand.
• 2048 GameReactFrame · ReactA fully playable 2048, arrow-key and swipe controls, spring-animated tile merges, score and best-score tracking, and…
• KeyboardAceternity UI · React
• BallpitReact Bits · ReactPhysics ball pit simulation with bouncing colorful spheres.
• TimerCult UI · ReactCountdown timer component with customizable duration and visual styles
• Dual Magnet DipoleAmicro Micro Transitions · ReactNorth/South magnetic dipole blocks attracting and snapping with tension.
• Knockout WheelbeUI · ReactThe tournament drawn radially. The champion holds the hub, each round is a ring further out, and the teams themselves…
• Gravity LettersRare UI · ReactA playful gravity field where letters, numbers, emoji, or any components you pass fall and pile up like real objects.
• Scheduled MaintenanceSpectrum UI · ReactA maintenance window with a ticking ETA, a stage rail and a notify-me field.
• Spotify CardSpell UI · ReactDisplay Spotify tracks with album art and blurred background.
• Music PlayerVengeance UI · ReactCollapsible glass music player with equalizer and seekable progress
• Spinner 08 - Clock RingShadcn Space · ReactA clock-style loading indicator with a rotating ring and a marker arm that completes a full rotation.
• Credit Card GlassOpenSourceUI · React
• Bucketuselayouts · ReactAn interactive card component that simulates a bucket where chips are tossed and replaced with smooth physics-inspired…
• Countdown RingKinetics · HTML/CSSDrains a circular ring as the seconds tick down
• Music PlayerComponentry · ReactA fun interactive vinyl record music player with swinging tonearm.
• Spell Spotify CardAnimations (Svelte) · Svelte
• Facebook CardGreatUI · React
• Github Star HistorySona UI · React
• Github StarsWatermelon UI · React
• Onboarding checklistArc Library · ReactGuide a new workspace through setup, one step at a time.
• Bubble WrapUI Lab · ReactPop every bubble to clear the list, one click or one long swipe.
• WeatherPin UI · React
• Github ActivitySpaceUI · ReactAn interactive GitHub ecosystem showcase featuring pure 52-week contribution heatmap matrix content with live fetch…
• Card InsightZAYX · React Native
• Glass Control CenterOpaline · ReactmacOS-style Control Center kit — glass modules, toggles, light-filled sliders and buttons.
• Coin Flip GameReactFrame · ReactA real 3D CSS coin, click or tap to flip with a physical spin animation, a yes/no question field, flip history dots…
• Pixelated CanvasAceternity UI · React
• Falling TextReact Bits · ReactCharacters fall with gravity + bounce creating a playful entrance.
• Inertia Skid StopAmicro Micro Transitions · ReactSkewing inertia block sliding in with heavy friction deceleration.
• MinesbeUI · ReactA mines board: pick tiles to find gems, each raising the multiplier, and cash out before you hit a mine. The round's…
• Task ListRare UI · ReactA checklist that strikes out completed tasks and moves them to the bottom of the list.
• OfflineSpectrum UI · ReactAn offline panel that counts down, retries itself and recovers on screen.
• Typing KeyboardVengeance UI · React3D isometric keyboard with auto-typing screen
• Toggle Group 02 - Animated Social Reactions WidgetShadcn Space · ReactA premium social reactions toolbar (Like, Love, Dislike) using Base UI Toggle Group and Framer Motion spring…
• Event Countdown CardOpenSourceUI · React
• Polaroid Draguselayouts · ReactDraggable Polaroid photo gallery with realistic tilt, stacking, smooth animations, and customizable captions, sizes…
• Ferrofluid CrownKinetics · HTML/CSSA magnetic core raises a ring of liquid-metal spikes
• Pixel CanvasComponentry · ReactCanvas where pixels react to interaction.
• Github CardGreatUI · React
• Prototype Avatar ShowcaseSona UI · React
• Github Stars WheelWatermelon UI · React
• Signature padArc Library · ReactSmooth ink that thins with speed, with undo, replay, and PNG or SVG export.
• Call WidgetUI Lab · ReactAccept turns into hang-up as the call controls unfold out of it, one by one.
• Voice Chat WidgetSpaceUI · ReactAn expandable voice chat pill with participant avatars, animated speaking indicators, and a smooth pill-to-panel…
• Coin RewardZAYX · React Native
• Glass Credit CardOpaline · ReactA glass payment card that tilts to the pointer, flips to its back and detects the brand.
• Countdown TimerReactFrame · ReactA countdown timer that counts down to a duration or an absolute end date, with flip-cell digit transitions, a compact…
• LanyardReact Bits · ReactSwinging 3D lanyard / badge card with realistic inertial motion.
• Newtons CradleAmicro Micro Transitions · ReactNewtons Cradle loading animation.
• PlinkobeUI · ReactA Plinko board where balls drop through rows of pegs, bounce left or right off each one and land in a slot. Pegs flash…
• Price ChartSpectrum UI · ReactTicker chrome with last price and signed delta. Use it for tokens, equities, or protocol TVL.
• Widget 02 - Sales by Country WidgetShadcn Space · ReactA ranked country wise sales widget with flags, revenue values, and growth indicators, ideal for dashboards to monitor…
• Focus Breath WidgetOpenSourceUI · React
• Set Timeruselayouts · ReactA dark timer pill that morphs into a minute wheel picker, then into a running timer with pause, cancel, and a…
• Jelly WobbleKinetics · HTML/CSSSquash-and-stretch settle on hover
• Text RepelComponentry · ReactPhysics-based text where each letter reacts to cursor proximity with spring dynamics, creating an interactive magnetic…
• Instagram CardGreatUI · React
• Card InputUI Lab · ReactFormats as you type, spots the card brand, and flips to show the CVC.
• Github LinkSpaceUI · React
• Fintech IslandZAYX · React Native
• Glass PlayerOpaline · ReactNow-playing widget with scrubber, transport controls and volume.
• Credit Card InputReactFrame · ReactA grouped card number, expiry and CVC field: brand detection with an animated mark, 4-4-4-4 or Amex 4-6-5 spacing…
• PendulumAmicro Micro Transitions · ReactPendulum loading animation.
• Slide GamebeUI · ReactA slide game: set a bet and a target, then a reel of multiplier cards races past two tabs at the center of the stage…
• First ProjectSpectrum UI · ReactFirst-run project screen with selectable templates and a setup checklist.
• Heart Rate WidgetOpenSourceUI · React
• Stacked Outline Textuselayouts · ReactHeavy outlined type you can drag. Speed leaves a stacked white-on-black trail that springs back when you stop.
• Liquid BlobKinetics · HTML/CSSAn organic shape endlessly morphs its border-radius — pure CSS
• Lens ClockComponentry · React
• Linkedin CardGreatUI · React
• Combination LockUI Lab · ReactSpin right, left, right to fill each number, then turn the handle to open.
• Github Link ClientSpaceUI · React
• Piggy BankZAYX · React Native
• Battery WidgetOpaline · ReactBatteries widget with device rings that fill, turn red when low and show charging.
• Dice Discount PopupReactFrame · ReactA gamified discount popup, roll two animated 3D dice for a reward tier (with a doubles bonus), copy the code, and…
• Pendulum Bubble LevelAmicro Micro Transitions · ReactPrecision spirit/bubble level balancing horizontally with fluid damping.
• Todo ListbeUI · ReactShows which planned work is paused by the decision.
• Reasoning TraceSpectrum UI · ReactAn expandable chain-of-thought trace with a live thinking timer.
• Hydration WidgetOpenSourceUI · React
• Metaball BridgeKinetics · HTML/CSSTwo particles trade mass through a liquid neck
• Twitter CardGreatUI · React
• Drag SelectUI Lab · ReactDraw a box across files to select them, like the desktop.
• Interactive ChecklistSpaceUI · React
• Weather WidgetOpaline · ReactWeather widget with animated condition art and an hourly forecast.
• Dice Roll Discount PopupReactFrame · ReactA gamified discount-capture widget where visitors roll two 3D dice for a reward tier, with a themed reveal modal and…
• Smart Card DispenserAmicro Micro Transitions · ReactCredit card dispensing slot ejecting smart pass upwards on trigger.
• Wallet CardbeUI · ReactWallet overview card with an account switcher and search that morph open from their triggers, a cascading balance with…
• Scratch CardSpectrum UI · ReactA scratch-to-reveal coupon card with an HTML5 canvas foil, dust particles on scratch, and a reveal callback at a…
• Voice Assistant WidgetOpenSourceUI · React

Libraries with Animated widget components

• UI Lab
• ReactFrame
• Amicro Micro Transitions
• Spectrum UI
• Kinetics

Related categories

• Widget Components
• React Widget Components
• Tailwind CSS Widget Components
• React Native Widget Components
• shadcn/ui Widget Components
• Animated Physics Toy Components
• Animated Game Components
• Animated Timer Components
• Animated GitHub Widget Components
• Animated Payment Card Components
• Animated Todo List Components
• Animated Drawing Canvas Components
• Animated Now Playing Components
• Animated Clock Components