Crosshatch grid panel

Dark card with crosshatch grid visual area, framer-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 framer-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.