CrazyGLVHS Product Demo Screen
Your product image or video plays inside a floating retro CRT/VHS-style screen with subtle barrel curvature, scanlines, chromatic aberration, vignette and occasional tracking-noise glitch bursts. Nostalgic but polished.
Usage
import VhsProductScreen from '@crazygl/hero-vhs-product-screen';
export default function Page() {
return (
<VhsProductScreen
heading="Press play on your roadmap."
screenMedia="https://yoursite.com/demo.mp4"
curvature={0.18}
scanlineStrength={0.35}
glitchFrequency={0.2}
/>
);
}Customise
- Content —
contentType,heading,subheading,column1,column2,content. - Monitor —
tvModel(GLB),modelScale,modelTilt,monitorX,monitorY,pointerParallax. - Screen media —
screenMedia(image/video),screenFit,screenOffsetX/Y,screenSizeScale,screenEmissive,turnOnAnimation. - CRT look —
curvature,scanlineStrength,scanlineFrequency,chromaticEdgeIntensity,vignetteStrength. - Glitch & glow —
glitchFrequency,glitchIntensity,glowColor,glowStrength,backgroundColor,headingFontFamily.
Best for
- Product demos and feature reveals with retro/nostalgic branding.
- Music, gaming, and creator-tool launches.
- Showing a screen recording inside a tactile, characterful frame.
One command, zero config.
npm install @crazygl/hero-vhs-product-screenImport 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 VHSProductDemoScreen from '@crazygl/hero-vhs-product-screen';
export default function Landing() {
return (
<VHSProductDemoScreen />
);
}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 VHSProductDemoScreen from '@crazygl/hero-vhs-product-screen';
export default function Page() {
return (
<section>
<VHSProductDemoScreen
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
