CrazyGLHalftone 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.
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) plusheading,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 —
transparentto 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.
One command, zero config.
npm install @crazygl/hero-halftone-videoImport 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 HalftoneVideo from '@crazygl/hero-halftone-video';
export default function Landing() {
return (
<HalftoneVideo />
);
}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 HalftoneVideo from '@crazygl/hero-halftone-video';
export default function Page() {
return (
<section>
<HalftoneVideo
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
