Hero made by @ybouane.

@crazygl/hero-video-wall

A cinematic cluster of floating media panels at staggered depths. The center panel carries your main demo — large and sharp — while the panels behind recede smaller, dimmer, and depth-blurred. Slow ambient drift, pointer parallax, and hover focus that pulls any panel forward.

Demo

Video Wall Hero

Install

npm install @crazygl/hero-video-wall

Usage

import HeroVideoWall from '@crazygl/hero-video-wall';

export default function Hero() {
	return (
		<HeroVideoWall
			heading="Every story, on the wall."
			centerMedia="https://your.cdn/demo.mp4"
			panelCount={8}
			depthBlur={0.7}
		/>
	);
}

Each panel slot (centerMedia, panel1Media … panel12Media) accepts an image (PNG / JPG / WebP / AVIF) or a video (MP4 / WebM). Put your strongest demo in the center slot. Videos autoplay muted and loop.

Customise

• Panels — centerMedia, panel1Media…panel12Media, and panelCount (0–12 back panels).
• Wall — wallSpread, wallCurvature (arc toward the camera), depthStagger (how deep back panels recede), panelGap.
• Depth & focus — depthBlur, depthDim, hoverFocus, scanlineStrength (sweeping light band).
• Atmosphere — accentColor, glowStrength, backgroundTone, vignetteStrength, transparentBackground.
• Motion — driftStrength (ambient bob), parallaxStrength (pointer follow).

Best for

• Video platforms and streaming products.
• Creative / motion-design agencies and creator-tool apps.
• Product pages where a wall of demos does the talking.

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.