CrazyGLEmber Mesh
A warm particle-network hero. Particles drift and connect with glowing ember edges that follow the pointer.
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) withheading,subheading,media, or node-typedcolumn1/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.
One command, zero config.
npm install @crazygl/hero-ember-meshImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import EmberMesh from '@crazygl/hero-ember-mesh';
export default function Landing() {
return (
<EmberMesh />
);
}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.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import EmberMesh from '@crazygl/hero-ember-mesh';
export default function Page() {
return (
<section>
<EmberMesh
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
