SVG Stroke Hover Cards

A grid of image cards where hovering draws brush-stroke paths that thicken to flood-paint over the photo while the title reveals word-by-word.

Open in

svg-stroke-hover-cards-demo

The Hover State

Synthetic Silhouette

Red Form Study

Material Pause

Obscured Profile

Muted Presence

Spatial Balance

components/ui/svg-stroke-hover-cards-demo.tsx

import { SvgStrokeHoverCards } from "@/registry/tween/svg-stroke-hover-cards"

export function SvgStrokeHoverCardsDemo() {
  return <SvgStrokeHoverCards />
}

Installation


pnpm dlx shadcn@latest add https://tween-www.vercel.app/r/svg-stroke-hover-cards.json

Usage

import { SvgStrokeHoverCards } from "@/components/ui/svg-stroke-hover-cards"

<SvgStrokeHoverCards
  cards={[
    { img: "/a.jpg", title: "Synthetic Silhouette", strokeColor: "#e67339" },
    // ...
  ]}
/>

Each card layers the photo, two scaled-up SVG brush paths, and a title. The paths start fully dash-offset (invisible). On mouseenter a GSAP timeline tweens both paths' strokeDashoffset to 0 while growing their stroke-width from 200 to 700, so the strokes both draw on and thicken into broad paint that floods over the image; the title's words (split with SplitText) rise into view with a stagger. mouseleave reverses the whole sequence. Path lengths are measured with getTotalLength(), every timeline is killed and each split reverted on unmount. When prefers-reduced-motion: reduce is set, the cards render the photo and visible title with no stroke paint and no hover listeners.

Props

Prop	Type	Default	Description
`header`	`React.ReactNode`	default	Heading above the grid.
`footer`	`React.ReactNode`	default	Heading below the grid.
`cards`	`StrokeHoverCard[]`	6 defaults	Each is `{ img, alt?, title, strokeColor }`.
`baseStrokeColor`	`string`	`"#e0e0e0"`	Secondary under-stroke color shared by all cards.
`background`	`string`	`"#ffffff"`	Page background color.
`foreground`	`string`	`"#000000"`	Heading and title color.
`className`	`string`	—	Extra classes on the outer container.

Particle Logo Canvas Image Stack Hover

On This Page

Installation Usage Props

Contribute