Docs·Card Stroke

Card Stroke

Card with animated SVG strokes and word-by-word text reveal on hover.

Installation

$pnpm dlx shadcn@latest add @spiderui/card-stroke

The install command also adds gsap from the registry (includes SplitText). Manual install: pnpm add gsap

Usage

Uses GSAP SplitText for word-by-word reveals on hover. Inspired by joaopaulots.

API Reference

PropTypeDefault
titleHeading at the bottom-left of the card.
string"Card Title"
descriptionSupporting text below the title.
string"A small two line paragraph passed by prop."
imageSrcBackground image URL.
string—
imageAltAlt text for the background image.
string"Card background"
accentStrokeColorColor of the first animated SVG stroke.
string"#E0E0E0"
baseStrokeColorColor of the second animated SVG stroke.
string"#2B7FFF"
textColorTitle and description text color.
string"#F5F5F5"
classNameAdditional classes on the root container.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
Placeholder preview image

Card Title

A small two line paragraph passed by prop.

import { CardStroke } from "@/components/ui/card-stroke"
export default function Page() {
  return (
    <CardStroke
      title="Card Title"
      description="A small two line paragraph passed by prop."
      imageSrc="https://images.unsplash.com/photo-1773058373644-74e4120bfc77?q=80&w=1200&auto=format&fit=crop"
      imageAlt="Placeholder preview image"
      accentStrokeColor="#E0E0E0"
      baseStrokeColor="#2B7FFF"
      textColor="#F5F5F5"
    />
  )
}