Live backgroundsfor your site

Ribbons, particles, paper hills and more, rendered on the GPU with WebGL. Mix one in the browser, then paste one tag. Under 9 KB, no dependencies.

Open the studio

Try it on your page

Pick your brand colour, a mode and what the cursor does, then see it as a hero, a tilt card or a pricing table. Move your pointer over it.

Mode
Cursor
Preview it as
Open in the studio

Software that stays out of your way.

Aster keeps your team’s work in one calm place, so the busy part of the day gets shorter.

Start freeBook a demo
Trusted by teams at

Mix, link,
apply

A Haze design is never a file you have to keep track of. It is one line of text, so it fits in a URL, a commit or a chat message, and opening it again brings back every setting.

  1. Mix

    Pick up to six colours and one of eight modes, then tune the motion and the cursor.

  2. Link

    The whole design packs into one short line of text: its share link and its design code.

  3. Apply

    Paste one tag on any page. One script, under 9 KB, no dependencies.

Copy it into your page

Works in plain HTML, Webflow, Framer embeds, WordPress, Vue, Svelte and anything else that renders HTML. The tag fills its parent.

<script src="https://haze.mitolu.dev/v1/haze.js" defer></script>
<haze-gradient design="4,r,0a0f2c-3b5bdb-7048e8-e64980-ffd8a8,0.35,1.2,1.2,0.03,9,0,1,1,0,s"></haze-gradient>

Lighter than one photo

6.7KB

The whole renderer: all eight modes, three cursor effects and the shaders, minified and gzipped. Measured on 27 October 2026 with terser and gzip at level 9. No three.js and no other dependencies.

8.5 KB
haze.js, the one-tag install, with all twenty presets inside
7.4 KB
the React component, minified and gzipped
3.5 ms
GPU time per frame on a 4K screen at default settings, heaviest mode, GTX 1650
0
frames drawn while it is offscreen or the tab is hidden

Start with a design

Twenty designs to start from. Open one to make it yours.

Show designs by category

Questions

What is a live background?

An animated background your visitor's GPU draws with WebGL, frame by frame, instead of a video or image. It stays sharp at any screen size, can react to the cursor, and weighs a few kilobytes where a background video weighs megabytes.

Will it slow my page down?

It only draws while someone can see it. Scrolled offscreen, in a background tab or under reduced motion it draws nothing at all, and on screen it caps the pixel density and lets you lower the resolution further.

Does it work without WebGL?

Every background fades in once its first frame is drawn, so nothing flashes first. If the browser has no WebGL 2, a CSS gradient of the same colours shows instead. Nothing breaks and no space jumps.

What about reduced motion?

If a visitor asks their system for less motion, Haze draws one still frame and stops. If they change the setting while the page is open, it follows without a reload.

Can it react to the cursor?

Yes, three ways. Stir makes the background flow around the pointer like stirred paint; Trail draws a ribbon of your palette behind it; Pixel trail lights up blocky pixels that dissolve as it passes. All are off by default, react to taps and short drags on touch screens, and stay still under reduced motion.

Which frameworks does it work with?

The tag works anywhere that renders HTML: plain pages, Next.js, Vue, Svelte, Astro, Webflow, Framer embeds and WordPress. React projects can also take a single dependency-free component file from the studio instead.

Can I change a design later?

Yes. The code in the tag holds every setting, so opening haze.mitolu.dev/studio followed by a hash and that code brings the design back exactly. Change it, then copy the new tag.

Can I host it myself?

Download haze.js from this site and point the script tag at your own copy, or use the React export, which makes no network request at all.

Can I use it in commercial work?

Yes. Tags, exports and haze.js can go in any project, paid work included. haze.js carries an MIT licence line at the top.