Wensity

Liquid Glass Orb

Pro

A draggable soap-bubble orb you swipe upward to enter the page, where it settles as a compact, still glass anchor.

webglshaderglassorbherodragswipeentry
Liquid Glass Orb component preview

Overview

Liquid Glass Orb is a React and Tailwind CSS entry hero built around a draggable soap bubble, in Next.js or any React app, rendered in one WebGL2 pass. Swipe the orb upward and a spectral caustic trails the drag, then it snaps to the center, contracts into a still glass anchor, and reveals your page passed as children. The page stays inert until entry, the hint is read to screen readers, and Enter or Space enters without dragging. A CSS fallback covers missing WebGL2. The glass is lit for light grounds, so a dark background flattens it.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add liquid-glass-orb

Usage

Import LiquidGlassOrb from @/components/wensity/liquid-glass-orb and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { LiquidGlassOrb } from "@/components/wensity/liquid-glass-orb";


export default function Example() {
  return (
    <LiquidGlassOrb
      headline={<h1>hi, i&apos;m parth.</h1>}
      onEntryChange={(entered) => console.log(entered)}
    >
      <main className="mx-auto max-w-xl px-4 py-20">
        {/* Revealed once the orb settles. */}
      </main>
    </LiquidGlassOrb>
  );
}

Props

PropTypeDefaultDescription
childrenReact.ReactNode-The page behind the orb. Hidden from assistive tech and pointer events until the orb has entered, then faded in.
headlineReact.ReactNode-Shown behind the resting orb. Blurs and lifts away as the orb travels, driven by the same progress value as the physics.
hintstring"Swipe up to enter"Label printed across the resting orb. Also the live-region text read to screen readers.
onEntryChange(entered: boolean) => void-Fired when the orb enters, and again when it is swiped back down.
revealDelaynumber720Milliseconds between the orb settling and the children arriving. Keeps the two as separate beats instead of one cut.
heightstring"100svh"Scene height. The orb measures this section rather than the window, so a fixed height embeds the hero inside a panel.
backgroundstringA soft warm white radial washAny CSS background. The glass is lit for a light ground; a dark value flattens the shell.

Related components

  • Dynamic Island Toast component preview

    Dynamic Island Toast

    A pixel-faithful Apple Dynamic Island that morphs, splits, and breathes while it hosts live activities inside your app.

  • Infinite Marquee component preview

    Infinite Marquee

    A seamless, GPU-only logo strip that never stutters or snaps at the loop point.

  • Apple-Style Sticky Scroll component preview

    Apple-Style Sticky Scroll

    A pinned cinematic section that morphs in lock-step with scroll, staying perfectly in sync whichever way you travel.

  • Morphing Shape Background component preview

    Morphing Shape Background

    Lava lamp background for React heroes: soft gradient shapes that drift and melt.