CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/ascii-video-displace

ASCII Video Displacement

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.

ReactCanvasVideoInteractiveFont#ascii#video#interactive#monospace#clarity#lens#pointer#premium#technical

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-ascii-video-displace
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import ASCIIVideoDisplacement from '@crazygl/hero-ascii-video-displace';

export default function Landing() {
  return (
    <ASCIIVideoDisplacement />
  );
}
03 · Use it in a page

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.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <ASCIIVideoDisplacement
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

ASCII Nebula

The whole background is a grid of ASCII glyphs that, from afar, reads as a soft drifting nebula — dense glyphs where the cloud is thick, sparse where it thins. The pointer locally reveals hidden structure: nearby glyphs grow larger, rotate slightly, and switch to denser symbols.

ASCII Rain Repulsion

Elegant columns of falling ASCII glyphs on a near-black field — pale, premium, and readable behind text. The pointer opens a circular force field that pushes the characters outward into a clean tunnel of empty space, which smoothly refills as the cursor moves on.

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.

Artwork Lens

A clear glass DOME — a magnifying loupe / plano-convex lens — glides over a vibrant artwork with your heading composited on top. By default the artwork is an animated domain-warped colour field; supply your own image or video instead (cover-fit, never stretched). Beneath the lens everything is magnified UPRIGHT (not flipped like a glass marble), like a loupe sitting on the page: the centre magnifies cleanly, straight features curve more toward the rim, red/cyan chromatic fringing grows toward the edge, a Fresnel ring traces the rim and a specular hotspot sits upper-left. Because the heading is part of the scene, it reads normally outside the lens and is magnified, gently bent and chromatically split where the lens passes over it.

SDF Lens Blur

A single heading word, rasterised to a true signed distance field and rendered in WebGL. Where the cursor hovers, the letters dissolve into a soft luminous bokeh — a variable-radius radial blur kernel sampled in distance space, with optional chromatic aberration. Move the cursor across the word to smear it into a beam of light; move away and it snaps back to a razor-sharp typeface.

AI Video Generation Portal

A floating prompt card streams a current of energy particles across to a glowing portal ring, through which the generated video or image materializes with a shimmer-dissolve reveal.Live customizer

ASCII Video Displacement

VideoA looping MP4/WebM. The footage is sampled at the grid resolution and cover-fit into the hero aspect, then converted to ASCII. Muted + looping autoplay; if it fails to load, a procedural moving gradient stands in.Cell size9pxWidth of one ASCII cell in CSS pixels. Smaller = finer, more legible footage; larger = chunkier, more abstract. Sweet spot 10-14.Invert brightnessFlip the brightness-to-glyph mapping — bright areas become sparse, dark areas dense. Useful for footage that's mostly light.Luminosity boost1Gammas the sampled brightness BEFORE it picks a glyph, so you can push more cells into brighter/denser symbols (>1) or darker/sparser ones (<1). Affects glyph SELECTION only — the rendered glyph colours never change.Color modeMono draws every glyph in the glyph colour. Video tint colours each glyph by the underlying video pixel, so the ASCII keeps the footage's hues.Glyph colourColour of the glyphs in Mono mode, and the tint floor in Video-tint mode.BackgroundBackdrop behind the glyph grid. Near-black sells the terminal feel and lets the brightest glyphs glow.Clarity0.8How strongly the cursor resolves the ASCII back into the real, sharp footage. 0 = no lens; 0.7-0.9 reads as a clear window onto the video exactly where you point.Focus size0.22Radius of the clarity lens (Gaussian sigma in screen-height units). Small = a tight focal spot; large = a broad clear zone that follows the cursor.Transparent backgroundDrop the backdrop fill so the glyph grid composites over whatever sits behind the hero on your page.InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.