PRO

SVG Stroke Hover

A two-column image grid where each card draws broad SVG scribble strokes on hover and raises its title over the image.

Component

The Hover State

Synthetic Silhouette

Red Form Study

Material Pause

Obscured Profile

Muted Presence

Spatial Balance

Install
npx shadcn@latest add @compronents/svg-stroke-hover

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files
Checking access…
API
PropTypeDefaultDescription
cards{ title: string; image: string; accent: string }[]6 Compronents-hosted JPGsImage cards and accent stroke colors.
headingstringThe Hover StateLarge heading rendered above the image grid.
background / textColorstring"#f2f0eb" / "#111111"Page background and heading color.
Customize
cardslinks

Card titles, image URLs, and accent colors.

headingtext

The large heading above the hover grid.

Dependencies
None.