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.

Stroke effect card on hover