Make an entrance.
Leave an impression.

Your message takes the foreground. The fluid brings the atmosphere.

Drop it into HTML

import { defineFluidHero } from 'fluid-wallpaper/hero';
defineFluidHero();

<fluid-hero preset="obsidian" quality="eco">
  <p>Introducing something different</p>
  <h1>Ideas in motion.</h1>
  <a href="#details">Explore the details</a>
</fluid-hero>

Or use React

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

<FluidHero preset="porcelain" config={{ noiseTime: 0.18 }}
  onError={event => console.warn(event.detail)}>
  <h1>A quieter kind of energy.</h1>
  <button>Discover more</button>
</FluidHero>

No build step

<fluid-hero preset="aurora"><h1>Hello, flow.</h1></fluid-hero>
<script type="module" src="https://cdn.jsdelivr.net/npm/fluid-wallpaper@0.1.0-next.0/hero-auto.js"></script>

That URL is the published preview on npm (fluid-wallpaper@0.1.0-next.0). Prefer a pinned version in production pages.

Shape the frame

fluid-hero {
  --fluid-hero-height: 480px;
  --fluid-hero-radius: 24px;
  --fluid-hero-content-width: 1100px;
  --fluid-hero-overlay: linear-gradient(90deg, #07111bcc, transparent);
  color: white;
}

Glass and soft blur

Add glass for a frosted panel behind your copy so type stays readable over busy fluid. Add blur to soften the artwork itself — the content stays sharp.

<fluid-hero glass>
  <h1>Readable over motion.</h1>
</fluid-hero>

<fluid-hero glass blur style="--fluid-hero-blur: 14px; --fluid-hero-glass-blur: 20px">
  <h1>Soft field, clear message.</h1>
</fluid-hero>

// React: <FluidHero glass blur>...</FluidHero>

Let the page show through

Transparent mode reveals your existing HTML, photography or video through empty ink. It adds no backdrop or scrim. Decorative overlays should also use pointer-events: none so controls underneath remain clickable.

const hero = document.querySelector('fluid-hero');
hero.config = { backgroundMode: 'transparent' };
hero.style.pointerEvents = 'none';
// React: <FluidHero config={{ backgroundMode: 'transparent' }} />

Behavior that belongs in a hero

Defaults: Aurora, ECO, decorative input. Preset changes create a fresh composition; config patches preserve it unless a resource reset is needed. Foreground headings and links remain normal accessible content. Hidden or offscreen animation pauses. Reduced motion starts with a still background and an explicit Play animation control.

Properties, methods, events and lifecycle →