Hero made by @ybouane.

@crazygl/hero-sand-typography

Your headline is built from thousands of grains of sand. The grains drift on the breeze, erode where the cursor sweeps through them, and spring back to spell the word again.

Demo

Sand Typography

Install

npm install @crazygl/hero-sand-typography

Usage

import SandTypography from '@crazygl/hero-sand-typography';

export default function App() {
	return (
		<SandTypography
			heading="Sands of time."
			subheading="Sweep your cursor and watch the wind do its work."
			ctaLabel="Begin the journey →"
			grainCount={8000}
		/>
	);
}

Customise

• Content — heading, optional subheading, and a CTA (ctaLabel, onCTAClick as URL or function, ctaTextColor, ctaBgColor).
• Grains — grainCount (2000–15000, sweet spot 6000–10000), grainSize, and the grainColorLight / grainColorDark palette.
• Spring — springStiffness, springDamping, brownianJitter tune how grains recover and how alive the field feels at rest.
• Wind — windRadius, windStrength, windDecayTime control the cursor gust.
• Typography — headingFontFamily, headingFontWeight, headingSize, headingOffsetX / headingOffsetY.
• Ambient grains — ambientGrainCount, ambientGrainOpacity, ambientGrainSpeed for the background drift layer.
• Background — bgTop / bgBottom dune gradient or transparentBackground.

Best for

• Travel, adventure, and outdoor lifestyle brands.
• Wellness, retreat, and luxury hospitality launches.
• Editorial homepages where the headline is the visual centrepiece.

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.