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 https://ui.aryank.space/r/svg-stroke-hover.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

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.