Hero made by @ybouane.

@crazygl/hero-glitch-poster

A cyberpunk poster: any screenshot or photograph is overlaid with RGB channel splitting, horizontal slice glitches, soft CRT scanlines, and digital grain. The pointer ramps the chaos up — perfect for launch campaigns, agencies, gaming, and music.

Demo

Glitch Hero Poster

Install

npm install @crazygl/hero-glitch-poster

Usage

import GlitchHeroPoster from '@crazygl/hero-glitch-poster';

export default function Page() {
  return (
    <GlitchHeroPoster
      image="/shots/product.avif"
      heading="BREAK / BUILD."
      subheading="A new product. A new aesthetic. A new era."
      highlightTint="#ff3c8a"
    />
  );
}

Customise

• Image — image (cover-fit), imageScale, imageBrightness.
• Chromatic aberration — caStrength, caHueShift.
• Slice glitches — sliceFrequency, sliceIntensity, sliceSpeed.
• Scanlines & noise — scanlineStrength, grainStrength.
• Hover — hoverBoost, hoverDistortion.
• Color grading — shadowTint, highlightTint, gradeStrength.
• Atmosphere — vignetteStrength, transparentBackground.

Best for

• Product launch campaigns and teaser pages that want edge.
• Creative / digital agency and gaming / esports brands.
• Music releases, tour pages, and editorial drops.

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.