Getting started
Introduction
Vizzele UI is a library of components, gestures and effects built around one idea: liquid light. Everything moves with real spring physics, can be thrown, stretches like rubber and settles with weight — and every surface reacts to light and to you.
Three packages, one engine
@vizzele/core— the zero-dependency engine: springs, inertia, drag, effects anddata-vz-*attributes. Works with any framework, or none.@vizzele/react— components and hooks built on the core.@vizzele/css— tokens, themes, materials and pure-CSS motion utilities.
pnpm add @vizzele/react @vizzele/css
# or, without React
pnpm add @vizzele/core @vizzele/cssBrowse
Originals
Liquid focusOne focus ring for the whole page that travels between elements like a drop of mercury: the leading edge races ahead, the trailing edge catches up, and it settles around whatever you landed on. Press Tab — this whole site uses it.Liquid selectionSelect some text below. Instead of hard blue boxes, a blob of light springs out of the caret, stretches as you drag, and the lines fuse into one continuous drop where they touch.Hold to confirmFor actions you can’t undo: the button fills with liquid while you hold it. Pressing splashes where your finger is, moving the pointer makes it slosh, letting go early drains it. At the top it overflows and confirms.CausticsA glass card casts caustics — the moving net of light at the bottom of a pool — onto the page behind it, split into colors like a prism. Move the pointer: you are holding the lamp.Surface tensionItems behave like drops sitting on a surface. Bring the pointer close and they lean toward it; between two neighbours a meniscus forms and they fuse into one shape; a droplet follows your pointer and merges with whatever it touches.
Cursor & pointer
CursorA liquid cursor: a dot, a ring that lags on a spring and stretches with speed, and a trail of blobs. Grows over links, becomes a beam over text, squeezes while dragging.MagneticElements that get pulled toward the pointer as it approaches, then snap back on a spring.SpotlightLight that follows the pointer across a surface — the border starts glowing before the pointer even arrives.Tilt & Holo3D tilt that follows the pointer, plus holographic foil whose colors shift with the viewing angle.RippleA liquid ripple that wells up from the press point, overshooting like a drop hitting water.Particle trailIridescent sparks shed by the pointer with velocity, drag and drift — and a burst on click.Border lightA comet of light that orbits a card’s border. Bring the pointer close and it swings round to meet it on a spring, brightening as you approach; move away and it resumes its orbit.
Drag & physics
DraggableGrab it, throw it. Momentum carries it, the walls bounce it back with rubber-band resistance, snap points catch it.Reorder listDrag items to reorder; the others flow out of the way with springs. Works with the keyboard too.Swipe stackA stack of cards you flick left or right. The next card rises as the top one leaves.Elastic sliderPull past either end and the track stretches like rubber, then wobbles back into shape.Drag to dismissFlick notifications, cards or sheets away. A short drag springs back; a fling sends it flying.Bottom sheetA sheet that springs up from the bottom, rests at snap points and can be flicked away.Infinite canvasAn endless gallery you drag and throw in every direction. Cells recycle, so it stays light.Physics playgroundEvery child becomes a body: they fall, collide, push each other and can be grabbed and thrown.Number scrubberA number you drag. Pull it sideways and the value runs under a sliding ruler; flick and it coasts on inertia, stretches like rubber at its limits and springs back. Double-click to type.Pull to refreshPull the top of a list and a drop of liquid stretches out of the edge, its neck thinning until it snaps free at the threshold — release and it spins while you refresh.
Backgrounds
Fluid simulationA real-time fluid you stir with the pointer, leaving iridescent ink that swirls and fades.Mesh gradientA domain-warped, slowly flowing iridescent gradient with glints that bends around the pointer.Particle fieldThousands of iridescent motes drifting in a flow field — they part around the pointer, or swirl into it.Liquid metalRaymarched blobs of liquid chrome with an iridescent film. They merge, split and reach for the pointer.Lens gridA precise grid of lines and dots that bulges under the pointer like glass, splitting into color at the edge.AuroraCurtains of northern light rippling over a starry sky. They lean toward the pointer and glow brighter under it.SilkFlowing iridescent satin with a soft sheen running along the folds. The pointer presses a dent into the cloth.Lava lampBlobs of glossy wax rise, merge and split. Your pointer is one more blob — push it into the others and they fuse.Wave linesDozens of fine lines rolling like an ocean of sound, iridescent along their length. The pointer lifts them and sends a ring outward.RipplesA dark liquid surface. Click or tap to drop rings that spread and bend the light below; when nobody is touching, it rains softly.GrainFine animated film grain over anything — as a zero-JS CSS class, or on the GPU.Dot gridA field of dots that behaves like a membrane: dots near the pointer swell, light up and lean away on springs, and a click sends a shockwave rolling across the grid. Canvas 2D — no WebGL.
Text
Scramble textText that decodes itself from random glyphs, settling letter by letter.Text revealReveal by letters, words or lines as text scrolls into view — rising, blurring or sliding out of a mask.Shimmer textAn iridescent band of light sweeping across type, or type painted with the moving spectrum. Pure CSS.Weight waveA variable-font wave: letters swell near the pointer as if light were pooling under it.Morph textWords that melt into one another — a blur crossfade sharpened by an SVG threshold into liquid.CounterNumbers that spring to their value with a whisper of overshoot — on scroll and whenever they change.Split flapAn airport departures board: each cell flips through its drum letter by letter until it lands on the new text. Great for headlines, prices, scores and status.
Scroll
ParallaxLayers that travel at different speeds as you scroll, for real depth.Horizontal scrollA section that pins in place and turns your vertical scroll into sideways travel.Text portalZoom-through text: a giant word is cut out of the page and scrolling dives into one of its letters until the scene inside fills the screen — then the page carries on. The hero on the home page is one.Sticky stackCards pin one after another and pile up; covered cards shrink and dim beneath the next.Scroll progressAn iridescent reading-progress bar for the page or for a single article.Reveal & staggerContent that springs in as it enters — alone, or its children one after another.Smooth scrollOptional inertial wheel scrolling that glides to a stop. Native scrolling everywhere else.
Components
ButtonLiquid, holo, glow or plain — every button can be magnetic and ripples on press. The liquid body flows toward the pointer.CardSurfaces in four materials: plain, liquid glass, holographic foil and spotlight.Liquid glassGlass that actually refracts: the backdrop bends at the rim like a lens and splits into color at the edge — not just a blur.ModalA dialog that grows out of the button that opened it, and shrinks back into it. Drag the header down to dismiss.TabsThe indicator flows like liquid: its leading edge races ahead, the trailing edge catches up, and it settles with a wobble.DockmacOS-style magnification: icons swell as the pointer passes over, neighbours rising along a curve.NavbarA full-width bar that condenses into a floating glass pill as you scroll — and optionally hides on the way down.Switch, checkbox & radioNative inputs with physical micro-motion: the switch thumb stretches and lands with a jelly bounce, ticks draw themselves, radio drops pop in.InputA text field with a floating label and a border of light that follows the pointer, then circles the field on focus.TooltipA small label that springs out of its anchor on hover or keyboard focus, flipping to stay on screen.PopoverA glass panel anchored to a button: springs open on click, moves focus inside, closes on Escape or outside click.ToastNotifications that spring up into a stack, fan out on hover and can be flicked away.AccordionSections that open with a spring on their height — content pours in, the chevron flips with a wobble.MarqueeAn endless ticker that eases to a stop on hover, and that you can grab and throw — it glides back to cruising speed.3D carouselA ring of cards in 3D. Drag to spin it with inertia — it snaps the nearest card to the front.Image revealImages revealed through a liquid, wobbling mask — growing from the center on scroll, or as a lens that follows the pointer.SkeletonLoading placeholders with an iridescent sheen sweeping across.Copy buttonCopy to clipboard that answers like liquid: the icon folds into a check that draws itself, light washes out from where you pressed, droplets burst and a "Copied" bubble rises off the button.SidebarNavigation with a liquid current-page marker that stretches between links on two springs, a light that follows the hovered link, foldable sections and an iridescent edge that glows near the pointer.FooterA footer that ends the page with weight: link columns whose underlines pour in as light, a hairline that brightens under the pointer, and a giant liquid wordmark rising out of the bottom edge.WordmarkGiant text made of liquid light. Letters rise out of a surface, reach up toward your pointer like pulled fluid, wobble when pressed, and a spotlight lights the flowing iridescent fill.SelectA select in liquid light: the list springs out of the button, options cascade in, and a blob of light slides between them — stretching as it travels.Dropdown menuAn action menu that springs out of its button — icons, shortcuts, sections, separators and destructive items, with the same liquid highlight.Command paletteA ⌘K palette in liquid light: it drops in over a blurred page, the list springs to fit its results, matched letters glow and a liquid highlight slides between commands.OTP inputA one-time-code field: a drop of light stretches to the next cell as you type, characters fall into place and a full code sends an iridescent wave across.File dropzoneA drop target with a liquid surface: it swells when a file is dragged over, a pool of light follows the file, and a drop sends a splash ring out from where it landed.Gooey menuA floating action button that splits into drops of liquid: each action buds off the trigger, the necks between them stretch and snap, and they flow back in when it closes.Avatar stackOverlapping avatars fused into one drop of liquid. Hover or focus the group and they part — the necks thin and snap — and each face lifts with its name.Liquid stepperProgress through steps as liquid: the finished part is one stream that flows into the next dot when you advance — it bulges, fuses and settles on a jelly spring.Liquid ratingStars that fill with liquid. Light pours from one star into the next with a wobbling front, overshoots a touch and settles; hovering previews the level.Signature padSign with liquid ink: strokes swell when you slow down and thin out when you flick, and iridescent ink shifts hue along the line. Export PNG or SVG.Auth panelA sign-in and sign-up card made of liquid glass: a mode switch that stretches like a drop, Continue with Google, a password eye that watches you, a strength tube that fills as you type, and a button that melts into a spinner, then a check — with confetti.Password inputA password field whose show/hide button is a living eye: open, it follows your pointer and blinks now and then; hidden, it shuts with its lashes down. Warns when Caps Lock is on, and can carry the strength meter.Password strengthA tube of liquid that fills and changes colour as a password gets stronger — the level overshoots on a spring, its edge wobbles like a meniscus — with a checklist that ticks itself off. scorePassword() is exported too.ConfettiA burst of paper from any element, point or the middle of the screen: pieces flutter, tumble, slow in the air and fall, then the canvas cleans itself up. One function, no component to mount.Click sparkWrap anything and every click inside throws a ring of sparks from the exact point — a tiny reward that makes a whole page feel more physical.Heart buttonA like button with a jelly pop: the heart fills, throws a ring and a spray of coloured sparks, and the counter rolls up to its next number (and back down if you change your mind).Theme toggleA day-to-night switch: the sun rolls across a sky that darkens, clouds drift off, stars come out and a shadow bites the sun into a moon. The page changes inside a circle that grows from the switch.OrbitIcons, logos or avatars circling a centre on concentric rings at their own speeds. Items stay upright as they travel, grow on hover, and the orbits pause so they are easy to click.Mechanical keyboardA mechanical keyboard you can play. Creamy keycaps sink and spring back, RGB underglow runs in a wave and ripples out from every press, and an optional synthesised thock plays with each key. Type in the field above — or click the keys. Full, TKL, 65% or 60%.KbdA tiny mechanical keycap for keyboard shortcuts in your text. Give it a key to listen for and it presses down — and lights up — when you hit it.Shopping cartThe inside of a cart drawer: lines slide in and collapse away, quantity numbers roll, a liquid bar fills toward free shipping and the totals count to their new value.Add to cartAn add-to-cart button that throws the product in an arc into your cart icon, which bumps when it lands — then the button turns into a check. CartButton and flyToCart() come with it.Logo marqueeA sponsors strip: logos glide past, ease to a stop under the pointer, wake to full colour on hover and can be grabbed and thrown. Two rows run against each other.CountdownA countdown whose digits roll over like an odometer — for launches, drops and sales. It ticks exactly on the second and calls you when it reaches zero.StickerA die-cut sticker you can peel. Grab a corner: the paper folds back along a real crease, showing its white backing and casting a shadow. Pull far enough and it comes off — carry it anywhere and let go to slap it down. Tilts in 3D with holographic foil.BadgeSmall labels with personality: soft, solid and outline, plus a breathing glow, a sweep of light and holographic foil. Six colours, two sizes, an optional icon.Status badgeA status pill with a living dot: it pulses when online or live, blinks on an outage, spins for maintenance. For presence, streams and status pages.Compare sliderBefore and after, split by a handle you drag. The handle is a drop of liquid: it stretches with speed and wobbles back when you stop. Works with images, video or any markup.Flip cardA card with two faces that turns over on a spring — overshooting a little and settling — and leans toward the pointer with a moving glare. Flip on click or on hover.Scratch cardA lottery-ticket foil over anything — a coupon, a prize, a spoiler. Drag to scratch: the holographic foil flakes away under your finger, catches the light as you hover, and once enough is gone the rest dissolves (with confetti, if you like).
Mockups
iPhone-style phoneA 3D phone with a titanium frame, Dynamic-Island cutout and a real camera plateau on the back. Put your app inside — it stays live and clickable. Turns toward the pointer, spins when you drag the frame.Galaxy-style phoneA 3D Android flagship: flat armour frame, centred punch-hole camera and three separate lenses down the back. Same live screen, pointer tilt and drag-to-spin.LaptopA 3D laptop whose lid swings open when it scrolls into view — aluminium body, full keyboard, trackpad and speaker grilles. The screen holds a live site at 1280 × 800.
Charts
Line & area chartLines that grow in when they scroll into view and spring between datasets with a liquid overshoot. A crosshair snaps to the nearest point; one glass tooltip lists every series.Bar chartColumns that grow out of the baseline on a spring — grouped or stacked, thin with rounded caps, separated by 2px of air. Hover a category to lift it.Donut chartPart-to-whole in a ring that sweeps in on a spring. Hover a slice or its legend row and it lifts out on a bouncy spring while the center shows its value.Stat card & sparklineA metric that counts up on a spring, a signed delta with an arrow (never color alone) and a sparkline of the recent trend.Liquid gaugeA round vessel of liquid light. The surface rolls gently; change the value and the level overshoots and sloshes before it settles. The number inverts where the liquid covers it.
AI
AgentA face for your AI: a drop of iridescent ink that breathes when idle, ripples to your voice, swirls while thinking, orbits while working, pulses as it speaks — and lands every change of state with a jelly pop.Agent stepsShow an agent’s work as it happens: pending steps wait in outline, the running one spins and shimmers, finished ones pop a check and fill the thread of light to the next.Stream textText that arrives the way an AI answer does: each new word condenses out of a blur behind a glowing liquid caret. Feed it tokens as they stream, or a whole string at a reading speed.