CrazyGLVideo Wall Hero
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.
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, andpanelCount(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.
One command, zero config.
npm install @crazygl/hero-video-wallImport 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 VideoWallHero from '@crazygl/hero-video-wall';
export default function Landing() {
return (
<VideoWallHero />
);
}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 VideoWallHero from '@crazygl/hero-video-wall';
export default function Page() {
return (
<section>
<VideoWallHero
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
