Browse components
Striped Grid
A slowly scrolling grid of diagonally hatched cells that light up and fade as the cursor passes. Canvas 2D.
Installation
npx shadcn@latest add @glint-ui/striped-gridFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/striped-grid.json
Usage
import { StripedGrid } from "@/components/ui/striped-grid";
<div className="relative h-96">
<StripedGrid highlightColor="#c6ff3d" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cellSize | number | 56 | Px per cell, including the gap. |
| gap | number | 8 | Px between cells. |
| stripeSpacing | number | 7 | Px between stripes inside a cell. |
| stripeColor | string | "#52525b" | Stripe and outline color of resting cells. |
| highlightColor | string | "#c6ff3d" | Color of cells under the cursor. |
| speed | number | 12 | Scroll speed in px per second. |
| className | string | — | Extra classes for the root element. |