Stroke Effect Card

Stroke effect card on hover

A hover-triggered image card with hand-drawn stroke reveal animation. Two custom SVG paths draw themselves across the image on hover using GSAP, while the title and description slide up word-by-word in sync.

Features:

• GSAP-powered stroke draw animation, fully hardware-accelerated

• Word-by-word text reveal for title and description

• Independent font, weight, size, and color controls for both title and description

• Adjustable animation duration — hover-out and text timing scale automatically

• Optional link support (with open-in-new-tab toggle) — the whole card becomes clickable

• Customizable stroke colors, corner radius, and image

• Zero setup — drop it in, add an image, and go

Perfect for portfolios, agency landing pages, product galleries, and editorial-style layouts that want a distinctive, tactile hover moment.