ProHover

Dot Field

A living field of dots that parts around the cursor and breathes.

Loading
Usage 
import { DotField } from "./DotField";

<DotField>
  <h1>Your headline</h1>
</DotField>

About

A background of dots that part around the pointer like iron filings and spring back when it moves on, warming toward an accent colour where it passes. A slow wave breathes through the field, and it drifts gently against the page scroll. Canvas 2D (no WebGL), device-pixel-ratio capped at 2, drawn in four colour batches per frame and paused entirely while off-screen. Put a headline or a form inside and it sits on top.

What you get

  • Rebuild prompt

    One paste into Claude Code, Cursor, Codex or v0 rebuilds it byte for byte.

  • Source

    DotField.tsx + DotField.css — plain React and CSS, every comment kept.

  • Vite project

    A ready-to-run project with this exact example and pinned versions — unzip, install, run.

More like this

All components
◎HoverNewPro
Open live demo →

Tilt Card

Cards

A card that tilts in real 3D, with glare and layers that float apart.

◎HoverNewFree
Open live demo →

Magnetic Button

Buttons

A button that pulls toward the cursor and floods with colour from where you enter.

↕ScrollNewPro
Open live demo →

Aperture Zoom

Scroll

A framed image that opens to full-bleed as you scroll, parting the headline.