fluid—wallpaper

fluid-wallpaper / Start

Give your interface
a little life.

A field of color. A feeling of motion. Fluid backgrounds that fit the things you make.

Explore the galleryBuild with fluid-hero ↗

A little atmosphere. A lot of possibility. Add a living material field to a hero, a canvas, or an entire interface.

01 / Compose

Find your current

Six authored looks, from liquid gold to drifting ink. Pick one, make it yours.

02 / Embed

A hero in a few lines

Your heading, your layout, a fluid background. Native HTML and React.

03 / Explore

Know every control

Palettes, forces, emitters, backgrounds and runtime budgets, explained.

04 / Technique

Shaders & Navier–Stokes

How stable fluids on the GPU turn equations into living ink.

Install once. Use anywhere.

The preview package is on npm as fluid-wallpaper@0.1.0-next.0 (dist-tag next). These docs load that published build from the CDN so what you read matches what you install. 

npm install fluid-wallpaper@next
# or
yarn add fluid-wallpaper@next

Native web component

No React or stylesheet dependency. Give the host a height.

import { defineFluidInk } from 'fluid-wallpaper/element';
defineFluidInk();

<fluid-ink quality="eco" style="height:360px">
  <p slot="fallback">A still moment.</p>
</fluid-ink>

No bundler

<fluid-ink quality="eco" style="height:360px"></fluid-ink>
<script type="module"
  src="https://cdn.jsdelivr.net/npm/fluid-wallpaper@0.1.0-next.0/element-auto.js">
</script>

React

import { FluidHero } from 'fluid-wallpaper/react';
import 'fluid-wallpaper/styles.css';

export function Welcome() {
  return <FluidHero preset="aurora">
    <h1>Make room for wonder.</h1>
  </FluidHero>;
}

FluidHero includes its own shadow styles. The existing FluidField uses fluid-wallpaper/styles.css and offers the optional artist dashboard.

Meet the tools

Shaders & Navier–Stokes · Web component playground · React field demo · Artist tuner · Experimental two-liquid studio

WebGL2 and floating-point render targets are required for animation. ECO adapts to load; mobile certification and physical two-liquid accuracy remain unfinished. Static content stays useful without the animation.