CrazyGLLiquid 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.
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.
One command, zero config.
npm install @crazygl/hero-liquid-data-coreImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import LiquidDataCore from '@crazygl/hero-liquid-data-core';
export default function Landing() {
return (
<LiquidDataCore />
);
}SSR-safe by default.
The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import LiquidDataCore from '@crazygl/hero-liquid-data-core';
export default function Page() {
return (
<section>
<LiquidDataCore
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
