LiquidBulb

backgroundheroglassiridescentspherecanvas

Liquid-glass sphere wrapped in drifting iridescent ribbon loops — pure canvas 2D, no WebGL, fully prop-driven.

Playground

Signals from
the deep green

Liquid glass, painted by code — one sphere, every palette.

Tweak the props in the toolbox — the preview updates in realtime. “Copy code” gives you the exact JSX for the current tweaks.

Installation

Requires the shadcn CLI. Run this from your project root — it writes the component source, then you import and go.

bash

npx shadcn@latest add "https://webcules.com/r/liquid-bulb.json"

The command installs the component source (plus its engine / type files when the component ships one). No other dependencies — everything is dependency-free canvas, SVG and CSS.

Usage

Import the component and drop it in — every prop in the toolbox is a regular React prop:

hero.tsx

import { LiquidBulb } from "@webcules/ui/components/ui/liquid-bulb";

export function Hero() {
  return (
    <section className="relative h-screen overflow-hidden">
      <LiquidBulb className="absolute inset-0" />
      <div className="relative z-10 flex h-full flex-col items-center justify-center">
        <h1>Signals from the deep</h1>
      </div>
    </section>
  );
}

Highlights

A liquid-glass sphere wrapped in ribbon loops that drift around a shared tilted axis — the swirl reads as liquid revolving inside a glass shell
Milky frosted body, spectral fringes on the folds, hard specular streaks and dark creases — thin-film glass, painted entirely in canvas 2D
Two shipped looks out of one prop surface: the crisp prism bulb and the defocused pastel aura (softness + frost)
Depth-sorted ribbons, deterministic seed, zero dependencies, aria-hidden, one settled frame under prefers-reduced-motion

Example — Prism — the reference bulb

The default look: pastel spectral ribbons on a light backdrop, hard gloss, grounded by a soft contact shadow.

example.tsx

<LiquidBulb
  colors={["#ffd3e8", "#c9f2ff", "#d6ffcf", "#e4d5ff", "#fff1c9"]}
  background="#dedee0"
  bands={3}
  tilt={-34}
  frost={0.55}
  iridescence={0.8}
  gloss={0.7}
/>

Example — Aura — defocused pastel orb

Frost up, gloss and shadow down, softness near max: the same sphere becomes a dreamy blurred glow behind hero copy.

example.tsx

<LiquidBulb
  background="#f4f4f6"
  bands={2}
  tilt={-20}
  frost={0.85}
  iridescence={0.55}
  gloss={0.3}
  softness={0.85}
  shadow={0.12}
/>

Example — Midnight bulb

A dark-room variant: cool spectral ribbons on near-black, higher iridescence so the fringes carry the color.

example.tsx

<LiquidBulb
  colors={["#7dd3fc", "#f0abfc", "#86efac", "#c4b5fd"]}
  background="#0a0a12"
  iridescence={1}
  gloss={0.55}
  frost={0.35}
  shadow={0.2}
  grain={0.1}
/>

Props

Prop	Type	Default	Description
colors	string[] \| string	"#ba1766,#0089b3,#163cd4,#774ac9,#df307b"	Spectral ramp walked along each ribbon loop — 2–4 picks (in code also accepts an array).
background	string	"#ffffff"	Backdrop the sphere sits on. Use "transparent" to let the page show through.
size	number	0.85	Sphere diameter as a fraction of the shorter side.
scale	number	0.85	Global zoom of the composition.
bands	number	3	Glass ribbon loops wrapped around the sphere.
tilt	number	-63	Tilt of the shared orbital axis, in degrees.
swirl	number	1	Per-loop radius/inclination variation and counter-drift (0–1).
speed	number	0.6	Orbit drift rate; 0 = frozen.
interactive	boolean	false	The sphere tilts subtly toward the pointer.
frost	number	1	Milky body opacity of the glass (0–1).
iridescence	number	0.85	Spectral fringe strength on the ribbon folds and silhouette (0–1).
gloss	number	0.8	Specular streaks, sheen and rim light (0–1).
softness	number	0.65	Upscale blur (0–1); push high for the defocused aura look.
shadow	number	0.4	Contact shadow grounding the sphere (0–1).
grain	number	0	Film-grain overlay (0–1); needs a background color to sit on.
seed	number	1	Deterministic variation — same seed, same bulb.

Notes

origin is an object — set it in code; every other prop, including the iridescent palette, is tunable in the toolbox.
colors takes a comma-separated string (as the toolbox emits) or a real array — same result.
Ribbon halves on the far side of the orbit are painted first and dimmed under the frosted shell, so back ribbons read as seen through glass.
Renders through a low-resolution offscreen buffer upscaled with smoothing; softness controls that blur — at 0 the rim stays crisp, at 1 the orb melts into an aura.
Under prefers-reduced-motion it renders one settled static frame; the loop pauses on hidden tabs.