Card Stroke

A card component with an animated SVG stroke and word-by-word text reveal on hover.

Card Title

A small two line paragraph passed by prop.

title

description

accentStrokeColor

baseStrokeColor

textColor

Installation

Note: This component uses GSAP with the SplitText plugin for word-based animations. It is inspired by this amazing post by joaopaulots

Usage

import CardStroke from '@/components/odysseyui/card-stroke';

export default function Page() {
  return (
    <CardStroke
      title="Card Title"
      description="A small two line paragraph passed by prop."
      imageSrc="/templateImages/placeholder.png"
      imageAlt="Placeholder preview image"
      accentStrokeColor="#E0E0E0"
      baseStrokeColor="#2B7FFF"
      textColor="#F5F5F5"
    />
  );
}

How It Works

Uses GSAP timelines for hover animations.
Uses SplitText to animate title and description word-by-word.
SVG paths are animated using strokeDasharray and strokeDashoffset.

On Hover

Stroke expands and reveals.
Title and description slide up into view.

On Mouse Leave

Stroke retracts.
Text animates back down.

API Reference

CardStroke

Prop	Type	Default
`title?`	`string`	`Card Title`
`description?`	`string`	`A small two line paragraph passed by prop.`
`imageSrc?`	`string`	`/templateImages/placeholder.png`
`imageAlt?`	`string`	`Card background`
`accentStrokeColor?`	`string`	`#E0E0E0`
`baseStrokeColor?`	`string`	`#2B7FFF`
`textColor?`	`string`	`#F5F5F5`
`className?`	`string`	-

Examples

Custom Colors

<CardStroke
  title="Dark Accent"
  description="Custom stroke and text colors."
  accentStrokeColor="#00E5FF"
  baseStrokeColor="#7C3AED"
  textColor="#FFFFFF"
/>

Custom Image

<CardStroke
  title="Nature Preview"
  description="Using a custom background image."
  imageSrc="/images/nature.jpg"
  imageAlt="Nature landscape"
/>

With Custom Styling

<CardStroke
  title="Rounded Card"
  description="Extended styling using className."
  className="shadow-2xl ring-1 ring-white/10"
/>

Card Stroke

Card Title

On this page

Card Title