CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/sphere-field

Sphere Field

Many soft translucent gradient spheres drift in 3-D depth, blending into one another like abstract glass bubbles. Depth-of-field softens the back layers.

ReactWebGLInteractiveFont#spheres#gradient#depth-of-field#translucent#premium

Usage

import SphereField from '@crazygl/hero-sphere-field';

export default function Hero() {
	return (
		<SphereField
			heading="Soft glass."
			count={14}
			dofStrength={0.7}
		/>
	);
}

Customise

  • Background — bgTop / bgBottom: the vertical gradient behind the field.
  • Spheres — count (4–24), tintA / tintB / tintC: the three colour stops every sphere samples between.
  • Softness — how diffuse every sphere edge is, regardless of depth.
  • Depth-of-field (dofStrength) — how aggressively the back layers blur out.
  • Drift speed (speed) — slow ambient bob of the field.
  • Typography — headingFontFamily for the overlaid copy.

Best for

  • AI / machine-learning product sites that want a soft, abstract backdrop.
  • Music streaming, audio and wellness / meditation brands.
  • Design-tool and creative landing pages where copy floats over ambient colour.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-sphere-field
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import SphereField from '@crazygl/hero-sphere-field';

export default function Landing() {
  return (
    <SphereField />
  );
}
03 · Use it in a page

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.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import SphereField from '@crazygl/hero-sphere-field';

export default function Page() {
  return (
    <section>
      <SphereField
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Vortex Particle Sphere

Thousands of small white dots are spread evenly over a sphere with a Fibonacci spiral, then a vortex field swirls and pulls them toward a focal point — they spiral, streak, and bunch up like matter falling into an accretion disc. Crisp, monochrome, and scientific on pure black.

Crystal Refraction Field

Six raymarched octahedral crystals drift across the screen, refracting the background through each face with per-channel chromatic dispersion at the rim.

Halftone Field

A full-bleed AM halftone screen — thousands of ink dots on an aspect-corrected grid whose size is driven by a slow, domain-warped noise field sampled at each cell's centre. Dark zones grow fat dots, light zones shrink to pinpricks, and the field visibly evolves over time so the dot sizes breathe. Dot contrast intensifies toward the frame edges while the centre stays calm so the heading reads. Bold, graphic, editorial.

Magnetic Logo Field

An image-driven particle field. Drop in a logo and the particles drift around then snap into its silhouette in waves. Cursor magnetically pulls or repels the swarm. Sample by alpha, luminosity, or transparency.

Depth Wave Field

A perspective grid of small glowing dots forms an undulating 3D wave terrain that recedes into the distance and fades to black — the look of a topographic depth-sensing point cloud. Smooth traveling waves ripple through the field; crests glow electric violet, troughs and far rows sink into deep indigo. The pointer pushes a ripple toward the cursor.

Artwork Lens

A clear glass DOME — a magnifying loupe / plano-convex lens — glides over a vibrant artwork with your heading composited on top. By default the artwork is an animated domain-warped colour field; supply your own image or video instead (cover-fit, never stretched). Beneath the lens everything is magnified UPRIGHT (not flipped like a glass marble), like a loupe sitting on the page: the centre magnifies cleanly, straight features curve more toward the rim, red/cyan chromatic fringing grows toward the edge, a Fresnel ring traces the rim and a specular hotspot sits upper-left. Because the heading is part of the scene, it reads normally outside the lens and is magnified, gently bent and chromatically split where the lens passes over it.Live customizer

Sphere Field

BG topBG bottomSphere count14Tint ATint BTint CSoftness0.6How much the sphere edges fade vs. how crisp.Depth-of-field0.7Back spheres get softer with this set higher.Drift speed1.2Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.