Tailwind CSS Physics Toy Components

Dev Design Library indexes 25 Tailwind CSS physics toy components from 8 open-source UI libraries, with the most coming from Amicro Micro Transitions, UI Lab, uselayouts, Rare UI and Componentry. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes. Physics toy components belong to the Widgets group.

• 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…
• 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…
• Conveyor LoopAmicro Micro Transitions · ReactConveyor Loop loading animation.
• Polaroid Draguselayouts · ReactDraggable Polaroid photo gallery with realistic tilt, stacking, smooth animations, and customizable captions, sizes…
• Bubble WrapUI Lab · ReactPop every bubble to clear the list, one click or one long swipe.
• 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.
• 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.
• 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.
• 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.
• 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 Tailwind CSS physics toy components

• Amicro Micro Transitions
• UI Lab
• uselayouts
• Rare UI
• Componentry

Related categories

• Physics Toy Components
• React Physics Toy Components
• Animated Physics Toy Components
• Tailwind CSS Widget Components
• Tailwind CSS Game Components
• Tailwind CSS Todo List Components
• Tailwind CSS Payment Card Components
• Tailwind CSS Timer Components
• Tailwind CSS Drawing Canvas Components
• Tailwind CSS Clock Components
• Tailwind CSS Now Playing Components
• Tailwind CSS Balance Card Components