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

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.

ReactWebGLImageInteractiveFont#particles#slider#webgl#morph#interactive#premium#dark#carousel#pointer

Usage

import ParticleSlider from '@crazygl/hero-particle-slider';

export default function Page() {
  return (
    <ParticleSlider
      slideCount={4}
      autoplaySeconds={5}
      particleCount={3000}
      pointerMode="repel"
    />
  );
}

Customise

  • Slider — slideCount (1–8), autoplaySeconds, dotStyle (bars / dots / lines / hidden).
  • Per slide — slideNHeading / slideNSubheading / slideNCta / slideNCtaHref, slideNViz (the formation), slideNTransition, slideNLayout, slideNAccent, slideNImage (mask), slideNText (particle word).
  • Particles — particleCount, particleSize, baseColor.
  • Pointer — pointerMode, pointerStrength, pointerRadius, rotationSpeed.
  • Backdrop — bgTop / bgBottom, transparent.
  • Typography — headingFontFamily.

Best for

  • Developer-tool and platform landing pages.
  • AI / infrastructure products and premium SaaS.
  • Launch pages that want a single hero to tell a multi-beat story (Apple/Vercel/Stripe-grade, dark and technical).
01 · Install the package

One command, zero config.

npm install @crazygl/hero-particle-slider
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 ParticleSlider from '@crazygl/hero-particle-slider';

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

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

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.

Gallery Slider

A full-bleed image gallery where each slide carries its own picture and copy. Image and text transition independently — fade, Ken-Burns zoom, push-slide, clip wipe or blur-morph for the image; fade, rise, clip-reveal or blur for the text. Autoplay, arrows, dots, counter, swipe.

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.

Cinematic Before / After Slider

Two images or videos blended in 3D across a glowing, draggable glass divider. The split refracts the scene with a chromatic edge, the whole plane tilts on pointer parallax, and corner labels call out before and after — a transformation showcase for AI enhancement, photo and video editing, design tools, and beauty tech.

Touch Sparkle Grid

A dark perspective grid floor receding into the distance. Pointer movement emits glowing magenta-pink and cyan sparkle particles that drift, fade, and die — a soft halo glows where the cursor rests.

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

Particle Slider

Slides8How many slides are in the rotation.Auto-play interval5sSeconds per slide. Auto-play pauses while you interact and is disabled under reduced-motion.Indicator styleStyle of the slide indicators along the bottom.HeadingSubheadingCTA labelLeave empty to hide the button.CTA linkURL to open on click. From code you can pass onCTAClick as a function instead.VisualizationText transitionLayoutAccent colourHeadingSubheadingCTA labelCTA linkVisualizationText transitionLayoutAccent colourMask imageImage sampled into particles for this slide. Transparent PNG/SVG works best; particles inherit its colour.HeadingSubheadingCTA labelCTA linkVisualizationText transitionLayoutAccent colourHeadingSubheadingCTA labelCTA linkVisualizationText transitionLayoutAccent colourHeadingSubheadingCTA labelCTA linkVisualizationText transitionLayoutAccent colourHeadingSubheadingCTA labelCTA linkVisualizationText transitionLayoutAccent colourParticle textWord rendered as particles for this slide (Particle Text / Extruded Text).HeadingSubheadingCTA labelCTA linkVisualizationText transitionLayoutAccent colourHeadingSubheadingCTA labelCTA linkVisualizationText transitionLayoutAccent colourParticle count6000Thousands of particles share one engine. Higher reads denser; 2000–3200 is the sweet spot for crisp formations at 60fps.Particle size1.45Scales the soft glow sprite. Lower = fine dust, higher = bold orbs.Particle colourBase particle tint. Each slide's accent colour blends in over the formation.Pointer effectHow the cursor disturbs the field: magnetic bends particles around it, repel pushes away, attract gently pulls in.Pointer strength1Force applied near the cursor. 0 disables interaction.Pointer radius0.6Reach of the cursor's force field, in formation units.Rotation speed0How fast the formations slowly turn. 0 = static (pointer parallax only).Backdrop topBackdrop bottomTransparent backgroundDrop the backdrop so the particle field composites over whatever sits behind the hero.Heading fontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.