Liquid Glass
The material itself: a lens that refracts what’s behind it, with squircle bevel, specular rim, dispersion and spring physics.
The library · 68 components
Components that copy exactly. Zero dependencies beyond React.
Every preview on this page is the real file running — the same code you install. Verified pixel for pixel in a bare React app on every push.
- Copy-exact
- SSR-safe
- Keyboard accessible
- MIT
Liquid Glass. Real refraction, specular rims and morphing — the material from Apple's HIG, rebuilt for the web.
9 items
Glass Button
glass, glassProminent, clear and clear-prominent capsules in four sizes, with a springy press and a glow from the touch point.
Glass Tab Bar
Floating iOS 26 tab bar: a liquid lens springs between tabs, search sits apart, and it minimizes as you scroll.
Glass Toggle
An iOS 26 switch whose knob swells into clear Liquid Glass while pressed or dragged, then settles back to solid.
Glass Slider
A slider whose thumb becomes refracting glass while dragged, stretching along its velocity and springing back to solid.
Glass Toolbar
Grouped glass toolbars with fixed spacers, a sliding selection lens, labelled icons and a soft scroll-edge blur.
Glass Menu
A glass button that morphs — one surface, springing open — into its menu and back, with full keyboard support.
Glass Sheet
An inset glass sheet with detents: content peeks around it, and it turns edge-to-edge and more opaque at full height.
Glass Media Controls
Clear-glass playback controls over video: transport, scrubber and volume capsules, with the HIG’s 35% dimming layer.
Liquid Metal. Chrome that flows. WebGL shaders and CSS that read as polished, molten metal.
4 items
Liquid Metal
Flowing chrome: a warped height field reflecting a procedural studio, in silver, gold, titanium, black chrome or oil-slick.
Liquid Metal Button
A capsule CTA with a live chrome rim that ripples from your touch — plus a zero-JS CSS chrome variant.
Liquid Metal Text
A giant headline cast in flowing chrome with bevelled edges; tilt your pointer and the studio lights slide across the letters.
Liquid Metal Blob
A raymarched drop of mercury that morphs, merges and reaches for your cursor — a hero centrepiece on a transparent canvas.
Dither. Ordered and error-diffusion dithering for images, logos and gradients — interactive, GPU-fast.
4 items
Dither Image
Bayer and blue-noise dithering of any image into a 2–4 ink palette, with a cursor loupe that sharpens, inverts or reveals.
Dither Logo
Your mark as ordered-dither stipple dots — each one a spring particle that scatters from the cursor and settles back.
Dither Gradient
A slow, flowing mesh gradient quantised through Bayer dithering into 2–4 inks — a hero backdrop with a light pool that follows the cursor.
Dither Text
Headlines printed as a Bayer halftone — dots ink in as the text scrolls into view and dissolve as it leaves.
Forms. Inputs, OTP, toggles, sliders and full forms with real validation states.
7 items
Input Field
A floating-label input with helper, error and success states, adornments, counter, clear and password reveal.
OTP Input
Six-digit code entry with auto-advance, paste and SMS autofill, error shake and a success cascade.
Payment Form
Card entry with brand detection, live formatting, Luhn validation and a preview that flips to the CVC.
Multi-step Signup
A three-step onboarding flow with progress, validation, animated transitions and a review step.
Settings Form
Grouped settings with switches, a bubble slider, radio cards, a select and a save bar that slides in when dirty.
Search Command
A ⌘K command palette with fuzzy matching, sections, recent items and complete keyboard navigation.
Newsletter Inline
Single-line email capture with inline validation, a loading button and a success morph with undo.
Heroes. Above-the-fold sections with motion, from fintech to fashion.
10 items
Ledger Card Hero
A photoreal CSS-3D metal card that tilts to the cursor, then flips and docks on scroll while spend stats count up.
Agent Terminal Hero
A terminal types a prompt and streams an agent's plan while the generated dashboard assembles itself beside it.
Maison Editorial Hero
A giant serif masthead and procedural duotone fabric frames revealed by clip-path wipes, drifting apart on scroll.
Fjord Parallax Hero
A layered SVG landscape with deep pointer and scroll parallax, a mirrored lake and golden hour fading to dusk.
Calm Clinic Hero
Warm and unhurried: a breathing gradient orb, an appointment stack that fans out, and quiet trust stats.
Grid Globe Hero
A dotted canvas globe with energy arcs pulsing between sites, and live MW and tCO₂ counters ticking beneath.
Album Launch Hero
Giant condensed type, gradient-painted album art with a sliding vinyl, a play/pause morph and a pointer-reactive spectrum.
EV Scrollytelling Hero
A 300vh sticky scene: an EV drives through a tunnel of light while 0–100, range and charge specs count up in sequence.
Bento Product Hero
A headline over a live bento grid where every tile runs a micro-interaction on a staggered loop, with a pointer spotlight.
Private Office Hero
A split hero with a momentum-drag property carousel, map pins that follow the active listing and a recent-sales ticker.
Tables. Data tables that sort, select and breathe — dense or editorial.
5 items
Data Table
Sortable, selectable, paginated table with sticky header, bulk actions, empty and loading states.
User Admin Table
Team members with initial avatars, inline role menu, status pills, filter chips and a hover actions menu.
Expandable Table
Rows that open into rich detail panels with a smooth height animation, shown with a shipment route timeline.
Leaderboard Table
Editorial league standings with rank-change arrows, zone markers, form dots and rows that FLIP into place.
Pricing Comparison Table
Plan comparison grid with sticky first column and headers, check/dash cells and a highlighted recommended plan.
Scroll & Hover Effects. Scroll-driven scenes, image ripples, split cards and hover transitions.
10 items
Scroll Split Card
A pinned card splits into three panels that fan out in 3D and flip, one by one, to reveal your services.
Hover Transitions
Eight hover reveals for profile cards: morph blob, diagonal wipe, strips, pixel dissolve, iris, slices, focus and a liquid lens.
Sticky Storytelling
Apple-style scrollytelling: pinned media morphs between four states while text steps scroll past a progress rail.
Text Reveal on Scroll
A manifesto whose words light up as you scroll, with keywords that get a hand-drawn marker underline.
Horizontal Pin Gallery
Vertical scroll drives a pinned horizontal track of large project cards, with inner parallax and a rolling counter.
Velocity Marquee
Infinite marquees that speed up, skew and reverse with your scroll velocity — and ease to a stop on hover.
Magnetic Cursor Grid
Portfolio tiles that tilt and lift toward a spring cursor that morphs from dot to ring to a “View” label.
Count-up Stats
A stat band whose numbers roll up like an odometer as it enters view, with sparklines that draw on in sync.
Zoom Parallax
Apple-style zoom-out: a full-bleed hero shrinks into a seven-tile mosaic as the surrounding tiles drift into place.
Image Ripple
Image cards that behave like water — your cursor drags a live wave simulation that refracts the photo with a chromatic edge.
Text Effects. Split, morph, repel, scramble and flip — typography that moves with intent.
7 items
Split Text
Split any string into chars, words or lines and reveal it with rise, wave, scatter, blur or a human-paced typewriter.
Text Morph
Cycle through words with a letter-level morph: shared letters glide into place, the rest blur away, the line stays centred.
Text Repel
A headline whose letters drift away from — or toward — your cursor and spring home, each on its own spring.
Scramble Text
A decoding effect: characters cycle through glyphs and lock in left to right. Hover re-scrambles; layout never shifts.
Split Flap
An airport departure board: each cell folds through the drum with a two-half 3D flap and rows settle in a cascade.
Animated Number
Odometer digits that roll up or down to each new value, with Intl locale and currency formatting and a gain/loss flash.
Particle Text
A title sampled into thousands of canvas particles: the cursor parts them, they spring home, a click detonates and reforms the word.
Cursors & Interactions. Cursor trails, magnetic docks, fisheye walls and 3D carousels.
4 items
Image Trail
Cards spawn along the cursor path at fixed intervals, pop in with a tilt and fall away — a portfolio you leaf through by moving.
Custom Cursor
A dot and a spring-lagged ring that morph into labels like View, Drag or Play and snap magnetically around buttons.
Magnetic Dock
A macOS-style dock: icons swell with a gaussian falloff, labels float up, launches bounce and running apps get a dot.
Fisheye Grid
An infinite two-axis tile wall you drag with momentum, with a loupe-like lens that swells tiles around the cursor.