---
title: "Stroke Effect Card — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Fahem Ahmed · Cards. Stroke effect card on hover"
canonical: "https://framer.elliotli.dev/component/stroke-effect-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Stroke Effect Card

# Stroke Effect Card

Stroke effect card on hover

[View on Framer](https://framer.com/marketplace/components/stroke-effect-card/?via=elliot-li)

![Stroke Effect Card preview image 1](https://framer.elliotli.dev/og/component/stroke-effect-card/fd65f175ed43b2ed/1600x1200.jpg)

## Summary

Stroke effect card on hover

## Description

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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #8167

## Details

- **Author**: Fahem Ahmed
- **Price**: $5.00
- **Published**: 2026-08-07
- **Updated**: 2026-08-07
- **Added**: 2026-08-07
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator