Hero made by @ybouane.

@crazygl/hero-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.

Demo

Particle Slider

Install

npm install @crazygl/hero-particle-slider

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).

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.