Liquid Reveal

Wrap a logo, a headline or any content in a slowly morphing bead of liquid: the content wobbles as if seen through the surface while the texture frequency keeps "breathing". On trigger, the displacement surges to its limit, then springs back to zero; the bead flattens out and throws a ring of small droplets, leaving the content crisp. Good for brand intros, release headlines and hero reveals. The refraction is an inline SVG filter (feTurbulence + feDisplacementMap) — no canvas or WebGL.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<LiquidReveal/>

    </div>
  );
}

Installation

Usage

import * as React from "react";
import {
  LiquidReveal,
  type LiquidRevealHandle,
} from "@/components/ui/liquid-reveal";

// Click to reveal: the container itself is a button
<LiquidReveal trigger="click" contentLabel="Shuihe wordmark" tint="rgba(56,189,248,0.16)">
  <Logo />
</LiquidReveal>;

// Reveal on entering the viewport, replay through ref
function Headline() {
  const ref = React.useRef<LiquidRevealHandle>(null);
  return (
    <>
      <LiquidReveal ref={ref} trigger="inView" droplets={10} grain>
        <h2 className="text-4xl font-bold">New release</h2>
      </LiquidReveal>
      <button type="button" onClick={() => ref.current?.reset()}>
        Replay
      </button>
    </>
  );
}

Props

LiquidRevealHandle

LiquidRevealTrigger, LiquidRevealHandle and LiquidRevealProps are also exported as named types.

CSS variables

How it works

• Refraction: a 0×0 inline SVG inside the container defines feTurbulence (fractalNoise, 2 octaves, fixed seed) feeding feDisplacementMap; the layer holding children applies it with filter: url(#id). The id comes from useId, so multiple instances on a page never collide
• No per-frame re-renders: displacement and frequency are motion values, and animation frames write straight to SVG attributes without triggering a React render
• Idle breathing: baseFrequency swings between 10/12 and 16/12 of frequency over 4 seconds; it stops while the component is off-screen to save filter work
• Three-phase burst: displacement surges to 1.6× restScale within 120ms, then springs to 0 (stiffness 180, damping 18); meanwhile the bead scales to 1.08 and back, flattens out, and throws small droplets at deterministic angles (24–60px, fading over 500ms). Once done, the filter is removed entirely so the content is natively crisp
• inView fires only on entry: calling reset() while still in view does not burst again immediately; scroll out and back in to replay
• Safari fallback: Safari's support for SVG displacement filters on HTML elements is unreliable, so when detected it animates a CSS blur(6px) down to 0 with the same timing

Accessibility

• The filter is purely visual: children stay in the DOM, so text remains selectable, searchable and readable by screen readers
• With trigger="click" the container is a type="button" button — focusable with Tab, activated with Enter / Space, with a focus-visible ring. Its accessible name is revealLabel before reveal (default 「揭露內容」, "Reveal content") and contentLabel after, falling back to the children text
• The SVG filter definition, highlight, grain and thrown droplets are all aria-hidden
• When the user's system has reduce motion turned on, children are shown directly: no filter, no morph, no droplets and no breathing animation