Hero made by @ybouane.

@crazygl/hero-halftone-video

A looping video rendered as a living halftone print — a grid of ink dots whose size tracks the footage's local brightness, so the moving image reads as a newspaper press plate that's somehow in motion. The pointer is a clarity lens: under the cursor the screen resolves finer and the raw footage sharpens through, so the image reads clearer exactly where you point. Bold, editorial, premium.

Demo

Halftone Video

Install

npm install @crazygl/hero-halftone-video

Usage

import HalftoneVideo from '@crazygl/hero-halftone-video';

export default function Hero() {
  return (
    <HalftoneVideo
      videoSrc="https://crazygl.com/samples/drone-1.mp4"
      heading="In print and motion."
      cellSize={6}
      clarity={0.75}
    />
  );
}

Customise

• Content — contentType (heading / two-columns / custom) plus heading, subheading, or column nodes.
• Video — videoSrc (looping MP4/WebM or still image), cellSize (grid pitch), maxDotScale (largest dot radius), invert (positive vs knock-out print).
• Color — mode (mono ink vs tint-by-video), dotColor, backgroundColor.
• Focus — clarity (lens reveal strength), lensRadius (focal size).
• Backdrop — transparent to composite the dots over your own page background.

Best for

• Editorial and print-adjacent brands, fashion and culture magazines.
• Music and film launch pages wanting a bold, tactile first frame.
• Design studios after a high-contrast, "press plate in motion" texture.

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.