Back to Components
Previous

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

Alpine Peaks

The Summit

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

Urban Horizons

City Lights

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

Coastal Escape

Azure Shores

Find serenity where the crystal clear ocean meets white sands.

Desert Silence

Stark Beauty

Experience the quiet majesty of shifting dunes and open skies.

Forest Pathways

Ancient Groves

Lose yourself in the lush greenery of untamed woodland trails.

Stellar Nights

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

PropTypeDefaultDescription
imagestring—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_PATHSCustom 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.

References