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

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.

ReactWebGL3DInteractiveFont#3d#particles#sphere#vortex#accretion#fibonacci#monochrome#scientific#three#premium

Usage

import VortexParticleSphere from '@crazygl/hero-vortex-particle-sphere';

export default function Page() {
  return (
    <VortexParticleSphere
      particleCount={6000}
      vortexStrength={0.23}
      dotColor="#e8e8ec"
    />
  );
}

Customise

  • Particles — particleCount, pointSize, dotColor.
  • Motion — rotateSpeed (sphere spin), vortexStrength (pull/streak), vortexTightness (funnel focus).
  • Look — glow (additive halo), pointerGlow (cursor lens), sphereScale, positionX (shift so copy sits beside the sphere).
  • Backdrop — transparent and backgroundColor.

Best for

  • Quantitative finance, trading, and fintech sites that want a "data has gravity" feel.
  • AI and machine-learning launch pages.
  • Deep-tech, research, and scientific-computing brands.
  • Premium product pages that need a calm, intelligent hero.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-vortex-particle-sphere
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 VortexParticleSphere from '@crazygl/hero-vortex-particle-sphere';

export default function Landing() {
  return (
    <VortexParticleSphere />
  );
}
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 VortexParticleSphere from '@crazygl/hero-vortex-particle-sphere';

export default function Page() {
  return (
    <section>
      <VortexParticleSphere
        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

Magnetic Dot Cloud

Thousands of floating 3D points settle into a soft sphere of light. Wherever you point, a gravity well opens — nearby dots erupt radially outward from the sphere's centre, bulging the cloud like a living particle sculpture. A critically-damped spring eases every swell in and out; idle, the whole field drifts and turns.

Particle Typography

A dusty 3D volume of tiny floating characters — abstract micro-typography drifting in depth. The pointer pulls characters into rings and streams, and where the cursor dwells the dust briefly organises itself into a real word before scattering back into the haze.

Soft Volumetric Particle Fog

Thousands of tiny semi-transparent dust motes drift in depth inside a soft beam of light. Curl-noise keeps them floating naturally; depth fog reads volumetric; the pointer stirs a slow vortex that swirls particles away and leaves a fading wake, like moving a hand through mist.

Particle Slider

A cinematic auto-playing slider built on one shared particle engine. Each slide picks a visualization — magnetic sphere, spiral galaxy, liquid wave field, vortex portal, image-to-particle, particle text, neural cloud, cube lattice, orbital rings, terrain — and the thousands of particles MORPH from one formation into the next instead of resetting. The field reacts to the pointer (repel / attract / magnetic). Per-slide heading, subheading, CTA, text transition and layout. Dark, premium, developer-grade.

Product Inside a Glass Capsule

A product floats inside a transmissive glass capsule, like a luxury museum object or futuristic sample container — refraction through the shell, a frosted inner layer, a band of condensation, slow rotation and a soft pedestal glow.

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.Live customizer

Vortex Particle Sphere

Particle count6000How many dots cover the sphere. 4000–7000 reads dense and scientific; below 2000 it thins out, above 9000 the streaks merge into haze.Dot size1.6pxBase size of each dot before depth attenuation. 1.4–2 keeps them crisp; above 3 they start to feel chunky.Dot colourColour of the points. Soft white reads as the WorldQuant look; a tint pushes it toward sci-fi.Rotation speed0.15How fast the whole sphere slowly turns. 0.15–0.3 is a calm scientific drift; 0 freezes the rotation but the vortex still flows.Vortex strength0.23How hard the points are pulled and streaked toward the focus. 0 = a clean static sphere; 1 = strong accretion pull; 2 = aggressive collapse.Vortex tightness1How focused the pull is. Low values swirl a wide region of the sphere; high values draw a narrow, tightly-wound funnel into the focus.Glow0.67Additive bloom around each dot. 0 = hard pinpoints; 0.6–1 gives them a soft scientific halo; 2 blooms into streaks.Pointer glow0.2Strength of the glowing lens that tracks the cursor over the sphere (the pointer no longer affects rotation).Sphere size1.12Overall size of the sphere in frame.Horizontal position1.6worldShifts the sphere left or right so the heading copy can sit beside it.Transparent backgroundBackground colourInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.