Pixel Field

New

A grid of tiny pixels that warms up around the cursor and leaves a fading trail. The background of this site.

utils

move your cursor

Installation

$ pnpm dlx shadcn@latest add @soultel/pixel-field

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/pixel-field.json works too.

Manual installation

1. Copy the source from the Code tab into components/pixel-field.tsx.

Usage

example.tsx10 lines

import { PixelField } from "@/components/pixel-field"

export function Hero() {
  return (
    <section className="relative h-96">
      <PixelField />
      <h1 className="relative">Hello</h1>
    </section>
  )
}

Props

Prop	Type	Default	Description
gap	number	18	Distance between pixel centers in px.
size	number	1.5	Idle pixel size in px.
activeSize	number	5	Pixel size at full heat.
color	string	"rgb(26 25 24 / 0.13)"	Idle pixel color.
activeColor	string	"#e2412f"	Color pixels heat toward.
radius	number	4	Cursor influence radius, in cells.
decay	number	0.93	Per-frame heat falloff. Higher means longer trails.
twinkle	number	3	Random pixels lit per second. 0 turns it off.