Hero made by @ybouane.

@crazygl/hero-liquid-data-core

A glowing ray-marched glass sphere with refracted, dispersed inner orbits of data points — a living analytics engine that reacts to the cursor.

Demo

Liquid Data Core

Install

npm install @crazygl/hero-liquid-data-core

Usage

import LiquidDataCore from '@crazygl/hero-liquid-data-core';

export default function Page() {
  return (
    <LiquidDataCore
      heading="Your data, alive."
      tintColor="#6ab2ff"
      dispersion={0.45}
      ior={1.34}
    />
  );
}

Notable controls

• Dispersion (0–1, sweet spot 0.4–0.6) — how far the prism splits color at the grazing rim. 0 is clean mono refraction; push past 0.7 for an obvious rainbow edge.
• Index of Refraction (1.05–1.6) — how hard the glass bends the background. 1.34 reads as water-glass; 1.5 is dense crystal.
• Realism (0–1, default 0.7) — master dial for micro surface detail, inner caustics, subsurface glow, and the grounding contact shadow. Drop toward 0 for a flat, graphic look.
• Orbit Count & Points per Orbit (2–6 rings, 4–16 points) — density of the inner data field; fewer rings feel calm and editorial, more feel busy and alive. 4 × 10 is the photogenic default.
• Pointer Distort & Pointer Orbit Drag (0–1) — how much the cursor dents the surface and how lazily the orbits trail it; around 0.4–0.5 feels responsive without being twitchy.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.