CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/touch-dot-matrix

Touch Dot Matrix

A flat blueprint grid of dim plus-markers on near-black. Move or tap and the markers around your touch bloom into glowing cyan dots — spreading with a soft ripple, trailing behind your path, and fading back to quiet crosses.

ReactCanvasInteractiveFont#grid#dots#touch#interactive#minimal#canvas#dark#ui#playful

Usage

import TouchDotMatrix from '@crazygl/hero-touch-dot-matrix';

export default function Page() {
  return (
    <TouchDotMatrix
      heading="Touch the grid"
      dotColor="#4fd6e8"
      touchRadius={150}
      trailPersistence={0.55}
    />
  );
}

Customise

  • Grid — gridSpacing, markerSize (plus-arm length), showLattice for the faint dashed graph-paper lines.
  • Touch response — touchRadius, trailPersistence (how long lit dots linger behind your path), rippleSpeed (clicks fire an expanding ring), glowStrength.
  • Colors — markerColor (resting crosses), dotColor (lit dots), bgColor or transparent.

Best for

  • Touch-first products, tablet apps, and kiosk/installation landing pages.
  • Developer tools and design systems that want a quiet, precise, blueprint feel.
  • Any dark hero where the interaction itself is the message: it responds instantly, then settles.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-touch-dot-matrix
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 TouchDotMatrix from '@crazygl/hero-touch-dot-matrix';

export default function Landing() {
  return (
    <TouchDotMatrix />
  );
}
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 TouchDotMatrix from '@crazygl/hero-touch-dot-matrix';

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

Bouncing Light

A lantern of stacked discs floating in the dark. Every few seconds a warm light bounces into it — the whole stack squashes on impact, glows cream-to-ember from within, wobbles, then fades back to charcoal. Click to bounce it yourself.

Touch Sparkle Grid

A dark perspective grid floor receding into the distance. Pointer movement emits glowing magenta-pink and cyan sparkle particles that drift, fade, and die — a soft halo glows where the cursor rests.

Text Flow

A wordmark assembled out of thousands of soft particles, each parked at a sampled pixel of the rasterised text. Move the cursor through it and the particles flee from your hand, then spring back to their target positions.

Ember Mesh

A warm particle-network hero. Particles drift and connect with glowing ember edges that follow the pointer.

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).

Magnetic Logo Field

An image-driven particle field. Drop in a logo and the particles drift around then snap into its silhouette in waves. Cursor magnetically pulls or repels the swarm. Sample by alpha, luminosity, or transparency.Live customizer

Touch Dot Matrix

Grid Spacing56pxDistance between markers. The reference sits around 56px.Marker Size0.16Plus-marker arm length as a fraction of the spacing.Dashed LatticeFaint dashed lines connecting the markers, like graph paper.Touch Radius150pxHow far around the cursor markers light up.Trail Persistence0.55How long lit dots linger after the cursor moves on.Tap Ripple Speed1Clicking fires an expanding ring of lit dots at this speed.Dot Glow0.7Marker ColorThe resting plus-markers and dashed lattice.Lit Dot ColorBackgroundTransparent backgroundHeading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.