Skewed Grid
A hero background of two grid planes tilted in 3D so they cross behind your content, stretching the cells into skewed rectangles that drift toward you.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/skewed-gridProps
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Content shown over the grid, centred. |
cellSize | number | 40 | Size of one grid cell, in pixels. |
angle | number | 45 | Tilt of each plane, in degrees. |
perspective | number | 1000 | Camera distance; lower gives a stronger, wider-angle perspective. |
lineColor | string | - | Line colour; defaults to the text colour, so it follows the theme. |
lineOpacity | number | 0.1 | Strength of the lines, from 0 to 1. |
speed | number | 0 | Seconds for the grid to drift one cell toward you; 0 holds it still. |
glowColor | string | - | A soft glow where the two planes cross, behind the content. |
fadeEdges | boolean | true | Fade the grid out at the left and right edges too. |
className | string | - | Extra classes for the wrapper. |