CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/window-lens

Window Lens

A draggable OS-style window is a sharp 'lens' over an image or video: crisp inside the window, processed outside — pixelate, blur, black-&-white dither, ASCII, or none. Use a separate custom image for the processed outside region, and pick any of four chrome styles (classic Mac, modern Mac, Windows XP, Windows 95).

ReactWebGLImageInteractive#window#macos#windows#retro#pixelate#ascii#dither#video#interactive#webgl

Usage

import WindowLens from '@crazygl/hero-window-lens';

export default function Hero() {
  return (
    <WindowLens
      image="https://crazygl.com/samples/hands.avif"
      effect="pixelate"
      windowType="mac-old"
      windowTitle="my window"
    />
  );
}

Customise

  • Source — image (image or MP4/WebM video; sharp inside, processed outside), useOuterImage / outerImage for a separate processed-region image.
  • Outside effect — effect (pixelate / blur / dither / ascii / none) plus cellSize, blurAmount, ditherFg / ditherBg, asciiChars / asciiFg / asciiBg.
  • Window — windowType (Classic Mac, Modern Mac, Windows XP, Windows 95), windowTitle, windowWidth, windowAspect, draggable.

Best for

  • Developer-tool, design-tool, and creative-software landing pages.
  • Retro / nostalgia-themed brands and portfolio sites.
  • Interactive "before/after" or reveal moments where dragging is the point.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-window-lens
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 WindowLens from '@crazygl/hero-window-lens';

export default function Landing() {
  return (
    <WindowLens />
  );
}
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 WindowLens from '@crazygl/hero-window-lens';

export default function Page() {
  return (
    <section>
      <WindowLens
        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 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.

Text Reveal Lens

A cursor-driven lens that reveals the bright real colour of a heading from underneath a dim default. Five lens shapes — circle, rectangle, diamond, wave, star — with an optional gradient fill on the revealed text.

VHS Product Demo 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.

Dither Gradient

A dark editorial hero lit by a single grainy warm gradient that ramps along one animated sine contour (no mirrored band). The contour breathes with a pseudo-random amplitude, and the giant wordmark is rendered into the same shader so it is revealed by the light — bright where the gradient washes over it, sinking into near-black shadow elsewhere. Quantised, dithered and grained for a retro/print texture.

Retro-Future Product Tunnel

Your screenshot or video sits at the centre of an 80s sci-fi tunnel — stacked rings of glowing colour flow toward the camera against deep black. Energetic, fun, memorable.

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.Live customizer

Window Lens

Image or videoImage or video (MP4/WebM) — shown sharp inside the window and processed outside it.Custom outside imageUse a separate image for the processed region outside the window.EffectCell size9pxBlock / dot / glyph size for pixelate, dither and ASCII.Chrome styleTitleWindow width46%Window aspect0.68Window height as a fraction of its width.DraggableInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.