@crazygl/hero-ember-mesh

_{Hero made by @ybouane.}

@crazygl/hero-ember-mesh

A warm particle-network hero. Particles drift and connect with glowing ember edges that follow the pointer.

Demo

Ember Mesh

Install

npm install @crazygl/hero-ember-mesh

Usage

import EmberMesh from '@crazygl/hero-ember-mesh';

export default function Hero() {
  return (
    <EmberMesh
      heading="Sparks in the dark"
      particleCount={110}
      emberColor="#ff8a3a"
    />
  );
}

Customise

• Content — contentType (heading / two-columns / custom) with heading, subheading, media, or node-typed column1/column2/content.
• Style — emberColor, accentColor, backgroundColor, particleCount, linkDistance (0 drops the mesh), speed, hazeStrength.
• Typography — headingFontFamily.

Best for

• AI / productivity tools and indie SaaS landing pages.
• Hospitality, restaurants and warm premium brands.
• Dark-mode portfolios that want quiet, magnetic motion.

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.