Dev Design LibraryOpen the library

Physics Toy Components

Dev Design Library indexes 34 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. Physics toy components belong to the Widgets group.

BallpitReact Bits · ReactPhysics ball pit simulation with bouncing colorful spheres.
Compass Needle DeflectAmicro Micro Transitions · ReactMagnetic compass needle swinging and deflecting with magnetic damping.
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.
Conveyor LoopAmicro Micro Transitions · ReactConveyor Loop loading animation.
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.
Dual Magnet DipoleAmicro Micro Transitions · ReactNorth/South magnetic dipole blocks attracting and snapping with tension.
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.
Inertia Skid StopAmicro Micro Transitions · ReactSkewing inertia block sliding in with heavy friction deceleration.
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.
Kinetic Metronome TickAmicro Micro Transitions · ReactMinimalist metronome pendulum ticking in harmonic angular rhythm.
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.
Newtons CradleAmicro Micro Transitions · ReactNewtons Cradle loading animation.
Newton S CradleKinetics · HTML/CSSEnd pendulums trade momentum across the row
X WalkersUI Lab · React
PendulumAmicro Micro Transitions · ReactPendulum loading animation.
Pendulum Bubble LevelAmicro Micro Transitions · ReactPrecision spirit/bubble level balancing horizontally with fluid damping.
Domino CascadeAmicro Micro Transitions · React
Magnetic DisksAmicro Micro Transitions · React
Sudden BrakeAmicro Micro Transitions · React

Libraries with physics toy components

Related categories