CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/feature-blocks-playground

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.

ReactWebGL3DInteractiveFont#3d#blocks#playful#features#startup#landing#three#physics#interactive

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-feature-blocks-playground
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import FeatureBlocksPlayground from '@crazygl/hero-feature-blocks-playground';

export default function Landing() {
  return (
    <FeatureBlocksPlayground />
  );
}
03 · Use it in a page

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.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <FeatureBlocksPlayground
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Carousel of Product Toys

A slowly turning toy shelf — 5–8 chunky plastic-toy product icons rotate around the headline like collectibles on a display stand. Hover a toy to bring it forward; click to navigate.

Inflatable Balloon Typography

Your headline becomes a row of soft, puffy balloon letters. Each glyph is inflated outward along its surface normal, floats gently with its own bobbing rhythm, squashes elastically when your cursor gets close, and ripples in a bounce wave when you click anywhere on the canvas.

Chrome Mascot Logo

Your logo or mascot reborn as a chunky Y2K chrome object floating over a sunset gradient with twinkling stars and slow anamorphic lens flares. Real PBR mirror metal lit by a procedural HDR environment.

Bouncy Logo Mascot

The uploaded logo becomes a soft mascot-like 3D toy that drops in with snappy spring physics, reacts to the cursor like a squashy character, and pops into a colorful confetti burst when clicked — then drops in again.

Energy Beam CTA

A conversion-focused hero: the main CTA button emits a glowing vertical beam that connects to a tilted product dashboard, making the button feel like it activates the product. Hover the CTA to brighten the beam, burst particles, and ripple a wake across the dashboard.

Magnetic Letter Field

Every character of the headline is an individual physical object. The cursor projects an invisible magnetic field — letters lean toward it, push back, and lift away. Hover a word and its letters float upward like iron filings rising from a sheet of paper.Live customizer

Feature Blocks Playground

Block count5How many feature blocks land in the composition. Smaller counts give more space to the heading.Gravity strength1Speed of the falling animation on load. 0 disables the fall (blocks appear in place); 2 = brisk drop with a strong landing thump.Hover lift0.5How high a block rises when you hover it. 0 disables the lift entirely; 1 lifts it ~0.6 world units.Pointer parallax0.4Subtle camera offset that follows the pointer. 0 is fully static; 1 is a noticeable parallax.Group offset X0worldNudge the whole cluster along X.Group offset Y0worldNudge the whole cluster along Y.Group scale1Scale the whole cluster.LabelColorEmojiOptional emoji shown above the label. Leave blank for label-only.On clickURL to navigate to when this block is clicked. Code consumers can also pass a function — same prop name, type-detected at runtime.LabelColorEmojiOn clickURL to navigate to when this block is clicked. Code consumers can also pass a function — same prop name, type-detected at runtime.LabelColorEmojiOn clickURL to navigate to when this block is clicked. Code consumers can also pass a function — same prop name, type-detected at runtime.LabelColorEmojiOn clickURL to navigate to when this block is clicked. Code consumers can also pass a function — same prop name, type-detected at runtime.LabelColorEmojiOn clickURL to navigate to when this block is clicked. Code consumers can also pass a function — same prop name, type-detected at runtime.LabelColorEmojiOn clickURL to navigate to when this block is clicked. Code consumers can also pass a function — same prop name, type-detected at runtime.Transparent backgroundDrop the cream gradient backdrop so the blocks composite over your page.Background topWarm-cream colour at the top of the gradient.Background bottomSlightly deeper warm tone at the bottom — gives the floor some grounding.Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.