Motion UI · free
Motion components you can restyle while they run.
Flows, backgrounds, buttons, text effects, cinematic motion graphics and interactive science simulations, each a single small file. They respond to the cursor, fit any container, and expose their colours, copy and timing as live inputs. Tune one here, then copy the code or open it in ExodeUI.
Hub FlowMotionIntegration nodes stream particles into a glowing core. Hover a node to light its path, click to send a burst.
Network PulseMotionA drifting node network where signals hop from edge to edge. Your cursor joins the network; click to broadcast a shockwave.PipelineMotionData packets travel through named stages that light up as they process. Horizontal on desktop, vertical on phones; hover a stage to inspect it.Spotlight GridBackgroundsA fine grid revealed by a soft spotlight that follows the cursor, leaving a trail of lit cells. Click to send a ripple through it.Rising LinesBackgroundsA field of hairlines with streaks of light racing up them. Lines near the cursor brighten and speed up.Path FlowBackgroundsA ribbon of flowing lines like silk in a slow current. The cursor parts the lines around it.Wave CTAComponentsA button that fills with liquid on hover. The surface tilts toward the cursor, sloshes when you leave, and a click sends a ripple.Orbit BorderComponentsA feature card with two beams of light orbiting its border and a spotlight that follows the cursor inside.Linear RevealTextA headline revealed line by line behind a sweeping beam of light, then a slow shimmer. Click to replay.Flux CTABlocksA responsive Call To Action block with a live rotating fluid gradient mesh, typography reflection, and synced interactive button.Branch FlowMotionSignals originate from a root source, travel along branching bezier splines to child nodes, and pulse on arrival.StreamBackgroundsLuminous horizontal energy lines and flow particles meander smoothly, dynamically deflecting around the cursor.Shadow ButtonComponentsA tactile luxury button with multi-layer colored dynamic shadow casting, magnetic cursor tilt, and spring press physics.Flux HeroBlocksA responsive full hero block with living rotating fluid gradient mesh, glowing badge, dual action buttons, and a 3D perspective dashboard preview card that reacts to cursor movement.Aurora PricingBlocksAn interactive 3-tier pricing block with dynamic aurora borealis light curtains, spring-animated Monthly/Annual toggle switch, glowing featured Pro card, and plan select buttons.Morph NavComponentsA floating frosted glass navigation bar with glowing pulse brand icon, magnetic indicator pill with spring physics that glides under hovered links, and an interactive action button.Motion SwitchComponentsA tactile physics toggle switch with elastic fluid thumb stretching, smooth track morph, particle burst explosion on toggle, and real-time state synchronization.Pulse GraphMotionA live vector telemetry and throughput graph with animated bezier wave curves, vertical cursor scanning, floating metric tooltip, and click-to-inject data spikes.Jelly ButtonComponentsAn elastic physics spring-mass button with magnetic cursor suction, dynamic surface bulge, squash-and-stretch on click, liquid sheen, and droplet splash particles.Gooey ToggleComponentsA liquid mercury metaball toggle switch with a stretching fluid bridge during transit, break-away separation physics, liquid splashes, and on/off triggers.Radial GaugeComponentsA circular telemetry speedometer gauge with 270-degree neon sweep arc, illuminated tick marks, glowing needle, central digital ticker, and interactive drag scrubbing.Magnetic DockComponentsA macOS-inspired liquid magnification dock with dynamic cosine-curve icon scaling, floor reflections, active status dots, and spring bouncing app launch physics.Holo CardComponentsA luxury 3D holographic iridescent foil card with gyro pitch and yaw tilt, dynamic rainbow diffraction sheen, micro sparkle glitter, and EMV chip.Glass StackComponentsAn interactive 3D stacked deck of frosted glass cards with realistic spring fan-out physics when hovered and a 3D flip-cycle transition on click.Sound WaveComponentsA kinetic audio frequency visualizer with 32 dynamic equalizer bars, falling peak gravity caps, interactive cursor string excitation, and play/pause controls.MonolithMotion GraphicsAn obsidian slab turning in a shaft of volumetric light. The cursor moves the light source; dust glints through the beams.Kinetic TunnelMotion GraphicsWords wrapped around rings that fly toward the camera. The cursor steers the vanishing point; click to accelerate.Liquid ChromeMotion GraphicsMercury metaballs with a studio environment reflection, flowing over a serif headline. Your cursor is a droplet that merges in.Data GlobeMotion GraphicsA dotted planet with noise-grown continents and arcs of traffic flying between regions. Move to rotate it.EclipseMotion GraphicsA total solar eclipse with a breathing corona and a diamond-ring flare. Slide the moon off the sun with the cursor.Swiss GridMotion GraphicsA Bauhaus composition of quarter circles, halves and bars that turn and swap on a beat. Hover a cell to spin it.RidgelineMotion GraphicsStacked waveforms rising from a dark field like a pulsar plot. The cursor sends a surge through the nearest lines.TopographyMotion GraphicsContour lines over drifting terrain with accent index contours. The cursor raises a summit and reads out its coordinates.PrismMotion GraphicsA white beam splits into a spectrum through a glass prism. Aim the source with the cursor; dispersion follows the angle.Ink FlowMotion GraphicsThousands of particles drawn through a noise flow field, leaving silk trails. Stir a vortex with the cursor; click to clear.Iso CityMotion GraphicsAn isometric skyline whose towers rise and fall like an equaliser. Hover to raise towers; the tallest light up.NumeralsMotion GraphicsGiant figures that roll like an odometer between a series of values, each with its own caption. Click to advance.HalftoneMotion GraphicsPrint dots driven by interfering waves, with the headline set in the dots themselves and a misregistered spot colour. Click to drop ink.TesseractMotion GraphicsA four-dimensional hypercube rotating through the fourth axis, projected into neon wireframe. Move to orbit it.GalaxyMotion GraphicsA spiral of five thousand stars turning on a tilted disc around a breathing core. Move to tilt it.Silk RibbonMotion GraphicsThree twisting gradient ribbons sweep through space on a light editorial page. The cursor bends them.Signal LostMotion GraphicsA title card that tears into RGB-split slices in bursts, over scanlines and a REC timecode. Shake the cursor or click to corrupt it.BloomMotion GraphicsA generative flower of translucent petals that unfurls and breathes, ringed by drifting pollen. It opens as you come closer.RadarMotion GraphicsA phosphor sweep that paints contacts as it passes, with range rings, bearings and a live cursor readout. Click to drop a waypoint.Wave PlaneMotion GraphicsA perspective sea of dots the camera glides over, swelling into a ridge wherever you point. Click to send a swell.HarmonographMotion GraphicsTwo damped pendulums per axis draw a fine gold figure stroke by stroke, then fade and begin a new one. Click to redraw.EarbudsProductA glossy charging case whose lid swings open to lift two earbuds out on rings of sound. Click to open or close.SmartwatchProductA titanium watch that tilts toward the cursor, with live activity rings, a turning crown and a glass sheen. Click to change the face.PerfumeProductA heavy glass flacon with a gold cap, sloshing amber juice, a light sweep and caustics on the floor. Click to spray a mist.Phone SpinProductA slim phone turning on its axis from live screen to triple camera, with a floor reflection. Move to turn it, click to spin.HeadphonesProductOver-ear headphones that pulse to the beat while sound waves radiate from the cups. Click to cycle four colourways.Soda CanProductA drinks can with a true cylindrical label wrap, condensation and a splash when you click to change flavour.Camera LensProductA prime lens head-on: nine aperture blades open and close with the cursor, bokeh glows through the glass, and a click fires the shutter.Smart SpeakerProductA fabric speaker whose light ring listens when you hover and answers with a voice waveform when you click.KeyboardProductA mechanical keyboard with per-key RGB waves. Keys under the cursor press and ripple light, and it types a word on its own.DroneProductA quadcopter that follows the cursor, banking into turns over a moving contour map, with spinning props and a flight HUD. Click for a photo.Landscape PhotographerPortfolioA full-bleed slideshow with a slow Ken Burns drift, cross-fades, a filmstrip and EXIF for every frame. Click to advance or pick a thumbnail.Gallery PhotographerPortfolioA light editorial page with a bio and a masonry wall of photographs drifting upward. Hover a photo to lift it and read its caption.Film DirectorPortfolioA letterboxed living frame with title cards, timecode and a showreel button. Click to play the reel full-frame.ArchitectPortfolioAn axonometric drawing that draws itself on a drafting grid beside a project index. Hover a project to redraw its building.Graphic DesignerPortfolioA giant name whose letters scatter from the cursor, over case-study posters that tilt when hovered.IllustratorPortfolioA botanical ink drawing that grows stroke by stroke over watercolour washes on warm paper. Click to grow a new plate.MusicianPortfolioA spinning vinyl with generative label art, a tonearm, a tracklist and a live waveform. Hover the record to slow it; click a track to play it.3D ArtistPortfolioSoft-shaded spheres, rings and cubes floating in a pastel studio, drifting with the cursor. Click to shuffle the scene.DeveloperPortfolioAn editor window typing code with syntax colours, a contribution graph that fills in, and hover tooltips per day.WriterPortfolioA quote typed out in a serif beside a stack of typographic book covers that fan open on hover. Click a book to bring it forward.Ideal Gas LawScienceArgon atoms in a cylinder with a draggable piston. Change temperature, count and volume and watch pressure, PV/NkT and the Maxwell–Boltzmann distribution respond live.Liquid DropletScienceA Lennard-Jones liquid pooling under gravity. Tune temperature, attraction strength and gravity; grab molecules with tweezers and watch kinetic vs potential energy.Crystal LatticeScienceA 2D Lennard-Jones crystal with strain-coloured bonds and a live radial distribution function. Strike it, pull atoms out, heat it until it melts.Phase ChangeScienceSolid, liquid and gas from the same molecules. A heater adds or removes energy at a constant rate; the heating curve shows latent-heat plateaus as it melts and boils.Diffusion & MixingScienceTwo gases separated by a removable barrier. Set the mass and size of gas B, lift the wall and watch mixing entropy rise toward its maximum.Brownian MotionScienceA heavy grain buffeted by solvent molecules, with its random-walk trail and a live mean-squared-displacement fit for the diffusion coefficient.OsmosisScienceA semipermeable membrane on a spring between two solutions. Change solute on each side and compare the measured osmotic pressure with van ’t Hoff.EvaporationScienceA heated liquid in an open vessel. Fast molecules escape (evaporative cooling); set the heater, attraction and gravity, or close the lid to reach vapour equilibrium.Double HelixScienceA true-geometry 3D double helix built from your sequence. Morph between B, A and Z forms, spin and tilt it, and read length, turns, GC content and melting temperature.DNA ReplicationScienceA replication fork with helicase, leading and lagging strand polymerases, RNA primers, Okazaki fragments and ligation. Tune fork speed, error rate and proofreading.TranscriptionScienceRNA polymerases firing from a TATA promoter, opening transcription bubbles and spooling out mRNA. Set elongation speed and promoter firing to see several copies made at once.Ribosome TranslationScienceA ribosome translating the start of green fluorescent protein codon by codon, with E/P/A sites, tRNAs, a growing chain and a live hydropathy plot. Edit bases to change the protein.CRISPR-Cas9ScienceCas9 hunting a genome for its target: PAM recognition, R-loop formation, a double-strand break and NHEJ or HDR repair. Change the guide, mismatch tolerance and repair pathway.Point MutationsScienceEdit the β-globin gene base by base and watch the protein respond: silent, missense, nonsense and frameshift mutations, plus the real sickle-cell Glu6Val change.Protein FoldingScienceA hydrophobic-polar protein chain folding by Langevin dynamics. Set temperature and hydrophobic strength, anneal it, pull residues, and track energy and radius of gyration.DNA MeltingScienceA DNA duplex melting with temperature and salt: AT bubbles open first, GC regions hold, and the measured curve tracks the predicted Tm. Swap base pairs to retune it.
How it works
- One file per component. A compiled
.bexodeholds the drawing code and a state machine. No video, no sprite sheets. - Inputs instead of props. Colours, labels, counts and speed are state-machine inputs. Set them from React props or
engine.setInput…while it runs. - Responsive by default.
fit="Layout"redraws at whatever size the container gives it, from a phone column to a full-width hero. - Editable. Open any component in the ExodeUI editor with your customizations applied and change anything.