Dev Design LibraryAnimated Physics Toy Components
Dev Design Library indexes 31 Animated physics toy components from 10 open-source UI libraries, with the most coming from Amicro Micro Transitions, Kinetics, UI Lab, uselayouts and React Bits. 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 physics toy components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Physics toy components belong to the Widgets group.
BallpitReact Bits · ReactPhysics ball pit simulation with bouncing colorful spheres.
Conveyor LoopAmicro Micro Transitions · ReactConveyor Loop loading animation.
Gravity LettersRare UI · ReactA playful gravity field where letters, numbers, emoji, or any components you pass fall and pile up like real objects.
Image ScatterVengeance UI · ReactSmooth scroll-triggered scattered photo gallery
Bucketuselayouts · ReactAn interactive card component that simulates a bucket where chips are tossed and replaced with smooth physics-inspired…
Bouncing BallKinetics · HTML/CSSSquash-and-stretch drop with a reactive shadow
Text RepelComponentry · ReactPhysics-based text where each letter reacts to cursor proximity with spring dynamics, creating an interactive magnetic…
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.
Tearable RevealReactFrame · ReactA physically-simulated cloth intro reveal, drag to tear open a torn-paper layer covering an image, with breakable…
Falling TextReact Bits · ReactCharacters fall with gravity + bounce creating a playful entrance.
Dual Magnet DipoleAmicro Micro Transitions · ReactNorth/South magnetic dipole blocks attracting and snapping with tension.
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
Bubble WrapUI Lab · ReactPop every bubble to clear the list, one click or one long swipe.
LanyardReact Bits · ReactSwinging 3D lanyard / badge card with realistic inertial motion.
Inertia Skid StopAmicro Micro Transitions · ReactSkewing inertia block sliding in with heavy friction deceleration.
Stacked Outline Textuselayouts · ReactHeavy outlined type you can drag. Speed leaves a stacked white-on-black trail that springs back when you stop.
Jelly WobbleKinetics · HTML/CSSSquash-and-stretch settle on hover
Elastic StringUI Lab · ReactPull a string and let go to watch it ring back to rest.
Newtons CradleAmicro Micro Transitions · ReactNewtons Cradle loading animation.
Liquid BlobKinetics · HTML/CSSAn organic shape endlessly morphs its border-radius — pure CSS
Paper ShredderUI Lab · ReactDrag a file into the shredder and it comes out in strips.
PendulumAmicro Micro Transitions · ReactPendulum loading animation.
Metaball BridgeKinetics · HTML/CSSTwo particles trade mass through a liquid neck
Pull Cord SwitchUI Lab · ReactPull the ball chain to switch the site's lights; light pours from the bulb as a cone.
Pendulum Bubble LevelAmicro Micro Transitions · ReactPrecision spirit/bubble level balancing horizontally with fluid damping.
Newton S CradleKinetics · HTML/CSSEnd pendulums trade momentum across the row
X WalkersUI Lab · React
Domino CascadeAmicro Micro Transitions · React
Magnetic DisksAmicro Micro Transitions · React
Libraries with Animated physics toy components
Related categories
- Physics Toy Components
- React Physics Toy Components
- Tailwind CSS Physics Toy Components
- Animated Widget 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