Hero made by @ybouane.

@crazygl/hero-ascii-video-displace

A looping video converted live into ASCII art — each cell's brightness picks a glyph from a long density ramp so the moving footage reads as live ASCII. The pointer is a clarity lens: under the cursor the cells resolve into the real, sharp footage, so the image reads genuinely clearer exactly where you point.

Demo

ASCII Video Displacement

Install

npm install @crazygl/hero-ascii-video-displace

Usage

import AsciiVideoDisplace from '@crazygl/hero-ascii-video-displace';

export default function Hero() {
  return (
    <AsciiVideoDisplace
      videoSrc="https://crazygl.com/samples/drone-1.mp4"
      heading="Reality, rendered."
      cellSize={9}
      clarity={0.8}
    />
  );
}

Customise

• Content — contentType (heading / two-columns / custom) plus heading, subheading, or column nodes.
• Video — videoSrc (looping MP4/WebM), cellSize (character cell width), invert (flip brightness→glyph mapping), lumaBoost (gamma on glyph selection only).
• Color — mode (mono vs video-tint), glyphColor, backgroundColor.
• Focus — clarity (how strongly the lens resolves real footage), lensRadius (focal size).
• Backdrop — transparent to composite over your own page background.

Best for

• Technical / developer-tooling and AI / data product landing pages that want a "computational" texture.
• Creative-studio and motion portfolios.
• Brands wanting a screen-free way to show real footage with a tactile, terminal feel.

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.