CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/magnetic-dot-cloud

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.

ReactWebGL3DInteractiveFont#3d#particles#points#sphere#magnetic#gravity#premium#pointer#three#interactive

Usage

import MagneticDotCloud from '@crazygl/hero-magnetic-dot-cloud';

export default function Page() {
  return (
    <MagneticDotCloud
      heading="A living sculpture."
      particleCount={6000}
      pullStrength={0.24}
      dotColor="#ffffff"
    />
  );
}

Customise

  • Content — contentType, heading, subheading, columns / custom node.
  • Cloud — particleCount, cloudShape (sphere / wave), cloudScale, offsetX/offsetY, dotColor, backgroundColor.
  • Motion — rotateSpeed (idle drift), pullStrength, pullRadius, springDamping (spring response).
  • Look — pointSize, glow.
  • Backdrop — transparent.

Best for

  • Premium SaaS and AI product launches.
  • Data / network platforms.
  • Creative studios and agencies.
  • Any landing page that wants a tactile, alive hero without a literal subject.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-magnetic-dot-cloud
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 MagneticDotCloud from '@crazygl/hero-magnetic-dot-cloud';

export default function Landing() {
  return (
    <MagneticDotCloud />
  );
}
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 MagneticDotCloud from '@crazygl/hero-magnetic-dot-cloud';

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

Thousands of particles stream along smooth, divergence-free flow lines — a live visualisation of an invisible magnetic field. The pointer drops a new magnetic pole into the field; lines visibly bend, swirl, and repel around the cursor.

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.

Gravitational Particles

Hundreds of particles orbit invisible gravity wells. The cursor adds a temporary attractor that bends nearby paths into fresh orbits.

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.

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.

Data Rain 3D

Characters, digits and small symbols fall through a real 3D perspective volume. Near glyphs are large and bright, far ones shrink and dissolve into depth fog. Move the cursor and the falling stream curves around it, like rain hitting an invisible umbrella.Live customizer

Magnetic Dot Cloud

Particle count6000How many points form the cloud. 5000–8000 reads as a dense, soft shell; below 2500 it thins into scattered dust.Cloud shapeSphere = an even Fibonacci shell. Wave shell gently undulates the radius so the surface breathes like a soft membrane.Cloud size0.88Overall radius of the sphere. Around 0.88 fills the frame with comfortable margins for the heading copy.Horizontal offset1.47worldSlide the whole cloud left or right on screen. Useful for laying the heading copy opposite the sphere. 0 = centred.Vertical offset0worldSlide the whole cloud up or down on screen. 0 = centred.Dot colourBase colour of the points. Pulled-forward dots brighten toward white; receding dots cool and dim with depth.Background colourDeep backdrop the cloud floats against. A near-black makes the additive glow read richest.Idle rotation0.12Slow drift / turn of the whole cloud at rest. 0 = perfectly still; the sweet spot is 0.08–0.2 — present but never spinning like a banner.Pull strength0.24How hard the gravity well pushes dots radially outward from the sphere's centre. 0 = no bulge; above 1.5 the cloud erupts dramatically.Pull radius0.31Width of the Gaussian gravity well. Small = a tight, focused bulge under the cursor; large = the whole front of the cloud lifts.Spring response3.8How quickly the bulge eases in and out (critically damped, no overshoot). Low = slow, gooey swell; high = the cloud snaps to the cursor.Dot size0.5Base size of each round sprite. Pulled-forward dots grow larger as they approach the camera; this sets the resting scale.Glow0.26Softness and additive bloom of each dot. 0 = crisp pinpoints; higher blooms the cloud into a luminous haze.Transparent backgroundDrop the backdrop so the dot cloud composites over your own page background.InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.