Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
import { AsciiGridHover } from "@/registry/tween/ascii-grid-hover"
export function AsciiGridHoverDemo() {
return <AsciiGridHover />
}
import { AsciiGridHover } from "@/components/ui/ascii-grid-hover"<AsciiGridHover image="/portrait.jpg" />The component lays a grid of blockSize-pixel cells over the image. A share of cells (emptyRatio) stay blank; the rest hold a random glyph from symbols, and a fraction of those (scrambleRatio) are flagged to flip glyphs on a scrambleInterval. As the pointer moves, the nearest cell within detectionRadius lights up, then a random walk steps through up to clusterSize of its neighbors and lights them too. Each lit cell stays visible for blockLifetime ms before fading back out, so a soft trail follows the cursor.
This component has no animation library dependency — a single requestAnimationFrame loop expires highlights and the pointer handler is bound to the wrapper element only, so it never interferes with page scroll. A ResizeObserver rebuilds the grid when the wrapper resizes. When prefers-reduced-motion: reduce is set, the grid is skipped entirely and only the image renders.
| Prop | Type | Default | Description |
|---|---|---|---|
image | string | default img | Source URL of the image under the grid. |
imageAlt | string | default | Alt text for the image. |
symbols | string[] | 6 glyphs | The glyph pool drawn into non-empty cells. |
blockSize | number | 25 | Cell size in pixels (also scales the glyph size). |
detectionRadius | number | 50 | How close the cursor must be to light the nearest cell. |
clusterSize | number | 7 | Max neighbors lit in the random walk per move. |
blockLifetime | number | 300 | How long (ms) a lit cell stays visible before fading. |
emptyRatio | number | 0.3 | Fraction of cells left blank. |
scrambleRatio | number | 0.25 | Fraction of filled cells that flip glyphs while lit. |
scrambleInterval | number | 150 | Glyph-flip interval (ms) for scrambling cells. |
blockColor | string | "#e3e3db" | Glyph color. |
blockBackground | string | "#1a1a1a" | Cell background color. |
className | string | — | Extra classes on the outer container. |