Hero made by @ybouane.

@crazygl/hero-vhs-product-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.

Demo

VHS Product Demo Screen

Install

npm install @crazygl/hero-vhs-product-screen

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.

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.