Hero made by @ybouane.

@crazygl/hero-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.

Demo

ASCII Rain Repulsion

Install

npm install @crazygl/hero-ascii-rain-repulsion

Usage

import AsciiRainRepulsion from '@crazygl/hero-ascii-rain-repulsion';

export default function Hero() {
  return (
    <AsciiRainRepulsion
      heading="Enter the stream."
      charset="katakana"
      repelStrength={0.44}
    />
  );
}

Customise

• Rain — charset (katakana / latin / binary / symbols), customChars, fontSize, fallSpeed, density, mutateRate, startFilled.
• Color — charColor, headColor, backgroundColor, fadeAmount (trail length).
• Repulsion — repelRadius (tunnel size) and repelStrength (push force; 0 disables).
• Backdrop — transparent to composite the rain over your own page background.

Best for

• AI and developer-tool landing pages
• Security / infra and crypto products
• Generative-art and "in the machine" launch pages
• Any hero that wants a coded feel without going full Matrix-green

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.