Pixel Trail
Pro
A grid where cells light up under the pointer and fade out, with a snake that roams it when idle.
Leave a trail
Move the pointer, or wait a moment for the snake.
Customize
24px
#ff784f
0.8s
Shape
Installation
Pixel Trail is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy pixel-trail.tsx into components/ui and run npm install motion.
Usage
import { PixelTrail } from "@/components/ui/pixel-trail";
<PixelTrail cellSize={24} shape="square" className="h-96 rounded-3xl">
<h2>Leave a trail</h2>
</PixelTrail>Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content of the area, drawn above the grid. |
| cellSize | number | 24 | Size of one grid cell, in pixels. |
| color | string | "#ff784f" | Color of lit cells. |
| fadeDuration | number | 0.8 | How long a lit cell takes to fade out, in seconds. |
| shape | "square" | "circle" | "square" | Shape of a lit cell. |
| idle | boolean | true | Let a snake wander the grid while the pointer is away. |
| className | string | — | Extra classes for the area, such as its size. |
Dependencies: motion