Hero made by @ybouane.

@crazygl/hero-feature-blocks-playground

Each selling point is a colourful, chunky 3D block. The blocks fall from above, bounce into a deliberate stacked composition, and respond to hover and click — your product benefits, rendered as playful building blocks.

Demo

Feature Blocks Playground

Install

npm install @crazygl/hero-feature-blocks-playground

Usage

import FeatureBlocks from '@crazygl/hero-feature-blocks-playground';

export default function Hero() {
	return (
		<FeatureBlocks
			heading="Built to stack."
			block1Label="FAST"   block1Emoji="⚡"
			block2Label="SECURE" block2Emoji="🛡️"
			onBlock1Click={(e) => console.log('clicked FAST', e)}
			onBlock2Click="/features/security"
		/>
	);
}

Each onBlock{1..6}Click accepts EITHER a string URL (the customizer-facing form, navigates via window.location.href) OR a function called with the PointerEvent. One prop, type-detected at runtime.

Customise

• Content — heading / subheading, or two-columns / custom via contentType.
• Composition — blockCount (1–6), gravityStrength (0 skips the fall), hoverLift, pointerParallax, plus groupOffsetX/Y and groupScale.
• Per-block (×6) — block{n}Label, block{n}Color, block{n}Emoji, onBlock{n}Click.
• Background — transparentBackground, or bgTop / bgBottom for the warm-cream gradient.
• Typography — headingFontFamily.

Best for

• Startup and SaaS landing pages where the value prop is a short list of benefits.
• App launches and product-feature reveal sections.
• Playful consumer brands that want personality without going noisy.

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.