Hex Matrix Interactive Background

A React canvas component that renders a grid of hexadecimal characters with:

• Fixed-position characters that morph/transform digits in place (not falling)
• Six-color palette (cyan, magenta, gold, green, purple, orange)
• Mouse/touch ripple interaction — characters near cursor are pushed outward and glow
• Progressive decay for natural fluid movement

When to Use

Use this whenever a user asks for a tech/sci-fi interactive background for a React website. The component is self-contained and requires no external dependencies beyond React itself.

Usage

Copy assets/HexBackground.jsx into the React project's component directory, then import and render:

import HexBackground from './components/HexBackground';

// Place as first child of root layout, before any content
<div style={{ position: 'relative', minHeight: '100vh' }}>
  <HexBackground />
  {/* ... rest of the app ... */}
</div>

The canvas is fixed-position, covers the full viewport, has z-index: 0, and pointer-events: none so all click interactions pass through to content below.

Customization

Edit the constants at the top of the component:

• CELL: 44 — grid cell size in pixels
• RIPPLE_RADIUS: 200 — mouse interaction radius
• HEX_CHARS — character set to display
• COLORS — color palette