Vizzele UI
Get started

Interfaces that feelliquid

Springs, inertia, gestures and iridescent materials — components with weight, that catch the light and move like they mean it. Go on, stir the ink behind this text.

Get startedPlay with physics
  • 111 components & effects
  • 0 dependencies in core
  • 4.3 kB per button
  • MIT · open source
NewA keyboard you can play + 10 more

Liquid light for the web · scroll to dive in

Physics, not keyframes

Interrupt it. Feel the difference.

Same button, two engines. Hit it again before the motion ends: the keyframe restarts from a standstill, the spring keeps its momentum and simply changes its mind.

CSS · ease-in-out · 600ms
Vizzele · spring · jelly

The collection

111 pieces. All of them alive.

Keep scrolling — the page turns sideways. Everything on the way is the real thing: drag it, press it, break it.

01 / 06

Mass, momentum, rubber

Go on. Throw them.

Every card has weight: fling it and it glides, stretches against the walls and settles.

Drag & physics →
SpringsAnalytic. Exact at any fps.
InertiaThrow it at the wall.
GlassIt really refracts.
FluidStir the ink.
02 / 06

Only in Vizzele

Effects you won’t find anywhere else.

Glass that casts light, buttons that fill with liquid, chips that fuse like drops.

The originals →
caustics

Glass that casts light

Move your pointer — you hold the lamp.

hold to confirm

It fills with liquid. Wiggle while holding — it sloshes.

surface tension
liquid selection

Select this text. The highlight springs out of the caret and the lines melt into one drop of light.

03 / 06

Live components, not screenshots

A whole kit that reacts to you.

Every tile is the real component — open the select, fire a toast, flip the switch.

Every component →

Variable type

Hover the weight

Magnetic

Select

Liquid tabs

Toasts

Micro-physics

Elastic slider

Spring counter

0
04 / 06

Liquid light

Materials you can almost touch.

Glass that bends what’s behind it, foil that shifts with the angle, chrome that melts.

Materials →
Holo foilTILT ME · 0001
refraction: 46px

Liquid glass

The lines behind this panel bend at its rim — real refraction, not a blur.

liquid chrome
05 / 06

A real physics world

Everything collides.

Grab a word and throw it into the others. Then turn gravity off.

Physics world →
springmassdampinginertiaglassholochromelightfling
06 / 06

Charts & agents

Data with a pulse. Agents with a face.

Charts that morph between datasets on springs, and an orb that shows what your AI is doing.

Charts & AI →

Visitors

  • Web
  • App
Visitors per month
monthWebApp
Jan4.2K2.6K
Feb5.3K3.2K
Mar6.2K3.8K
Apr6.8K4.2K
May6.9K4.5K
Jun6.6K4.6K
Jul6K4.6K
Aug5.4K4.4K
Sep4.9K4.1K
Oct4.8K3.8K
Nov5.1K3.6K
Dec5.8K3.5K

Mockups · live apps inside

Show the product, not a picture of it.

Good evening, Ada

$0

▲ 8.2% this week

  • Blue Bottle CoffeeToday−$6.50
  • Salary · NorthwindYesterday+$4,200
  • SpotifyMon−$11.99
  • Transfer from LinSun+$45.00
  1. 01

    Your app, live, in their hands.

    The phone is CSS 3D and the screen is real DOM: this wallet works — switch the range, press Send.

  2. 02

    An assistant with a face.

    Type a question. The agent orb listens, thinks and answers — the same component you ship.

  3. 03

    Motion you can hear.

    The orb pulses with the music; scrub the elastic slider and it stretches past the ends.

  4. iPhone-style, Galaxy-style & laptop mockups →

Backgrounds · WebGL2, no three.js

Pick your light.

Aurora — curtains of light

<Aurora colors={['#00e5ff', '#ff2bd6', '#7c5cff', '#ffb238']} />
Aurora docs →

Theming

Your brand. Our physics.

Installing Vizzele changes nothing on your page until you opt in. Every colour is a CSS variable — pick a palette and watch this whole page follow.

your.css
:root {
  --vz-accent: #00e5ff;
  --vz-cyan: #00e5ff;
  --vz-magenta: #ff2bd6;
  --vz-amber: #ffb238;
  --vz-acid: #a8ff3e;
  --vz-violet: #7c5cff;
}
The theming guide →

React, vanilla or plain HTML

Same physics, three doors.

import { Button, Draggable } from '@vizzele/react';
import '@vizzele/css';

export function Hero() {
  return (
    <Draggable bounds="parent" rotate={8}>
      <Button variant="liquid" magnetic>Throw me</Button>
    </Draggable>
  );
}

Make your interface feel alive.

Free, open source, and ready for React, vanilla JS or plain HTML.

Install VizzeleRead the docs