Crosshatch grid panel

Dark card with crosshatch grid visual area, motion entrance animation, hover state, and inset top highlight. Full React component with Tailwind.

typescriptreactcardtailwindmotiondark

Dependencies

Install the required packages before using this component.

npm install motion lucide-react

Props

Crosshatch grid panel

Prop	Type	Default	Description	Required
`title`	`string`	-	Card heading rendered in the text area below the visual	Yes
`description`	`string`	-	Supporting copy rendered below the title	Yes
`visual`	`React.ReactNode`	-	Any JSX rendered inside the grid visual area; use your icon, chart, or illustration	Yes
`delay`	`number`	0	Stagger delay in seconds for the whileInView entrance animation	No

titlestringRequired

Card heading rendered in the text area below the visual

default: -

descriptionstringRequired

Supporting copy rendered below the title

default: -

visualReact.ReactNodeRequired

Any JSX rendered inside the grid visual area; use your icon, chart, or illustration

default: -

delaynumberOptional

Stagger delay in seconds for the whileInView entrance animation

default: 0

Notes

The inset 0 1px 0 0 highlight on the outer card container gives the dark surface a visible top edge. Without it the card blends into a dark page background with no visual definition.

The inner visual area uses #0a0a0c - just 2 steps darker than the card #171717. This small difference is enough to read as a distinct inset without looking like an obvious border.

The grid uses two overlapping linear-gradients at 1px width on the same element. Setting opacity on the container adjusts all grid lines simultaneously - no need to change individual stops.