Trace Card

Cards with animated SVG paths that draw themselves on hover, built with motion. Drop in your own paths, colors, and images.

Project Title

Project description

Examples

With Next/Image

Next Image

With Custom Path and Base Stroke

Explore

Discover beautiful landscapes around the world.

Trace Card Grid Demo

The Summit

Scale the highest reaches and breathe in the crisp mountain air.

City Lights

Navigate the vibrant energy of the world's most iconic skylines.

Azure Shores

Find serenity where the crystal clear ocean meets white sands.

Stark Beauty

Experience the quiet majesty of shifting dunes and open skies.

Ancient Groves

Lose yourself in the lush greenery of untamed woodland trails.

Cosmic View

Witness the brilliance of the Milky Way from the dark wilderness.

Installation

$ npx shadcn@latest add https://akshitr.com/r/trace-card.json

Usage

import { TraceCard } from "@/components/trace-card";
 
export default function TraceCardDemo() {
  return (
    <TraceCard
      className="h-64 w-64"
      image="https://images.unsplash.com/photo-1448375240586-882707db888b?w=800&auto=format&fit=crop&q=80"
    >
      <div className="text-white">
        <h2 className="text-2xl font-bold">Project Title</h2>
        <p className="text-sm">Project description</p>
      </div>
    </TraceCard>
  );
}

Component API

Prop	Type	Default	Description
image	`string`	—	The image source URL for the card background.
title?	`string`	—	Optional title used for accessibility (`alt` text).
stroke?	`string`	`"#ff6b6b"`	Primary color of the animated SVG stroke.
baseStroke?	`string`	`"#e5e5e5"`	Secondary/base stroke color (background path layer).
paths?	`{ d: string; viewBox: string }[]`	`DEFAULT_PATHS`	Custom SVG path configurations for the animated lines.
renderImage?	`(props: { src: string; alt?: string }) => React.ReactNode`	—	Custom renderer for the image (e.g. Next.js `<Image />`).
children?	`React.ReactNode`	—	Content displayed inside the card (usually text or UI elements).
className?	`string`	—	Additional CSS classes for styling the root container.

Use Cases

Featured Architecture & Design Portfolios: Emphasize artistic drawings, wireframe contours, or blueprint paths that outline upon hover.
Service & Capability Feature Cards: Draw viewers into product capability grids where vector lines trace out icons or device borders.
E-Commerce & Fashion Lookbook Cards: Highlight silhouettes, apparel cuts, or footwear profiles as shoppers hover items.
Hero & Landing Highlights: Create striking visual moments in product landing grids where static photos transform into line art drawings.

References

Inspiration