Animated Border Card
A card component with an animated border effect that creates a clockwise rotating border animation on hover, inspired by Carl Philipe Brenner's portfolio.
Installation
Usage
import { AnimatedBorderCard } from "@/components/pluto-ui/animated-border-card"<AnimatedBorderCard>
<h3>D</h3>
<span>2012</span>
<span>Broccoli, Asparagus, Curry</span>
</AnimatedBorderCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Content to display inside the card |
className | string | - | Additional CSS classes |
width | number | 300 | Width of the card in pixels |
height | number | 460 | Height of the card in pixels |
borderColor | string | "var(--secondary)" | Color of the animated border lines |
backgroundColor | string | "var(--card)" | Background color of the card |
textColor | string | "var(--card-foreground)" | Default text color |
hoverTextColor | string | "var(--foreground)" | Text color when hovering (currently unused - colors are inverted on hover) |
strokeWidth | number | 3 | Width of the border stroke in pixels |
animationDuration | number | 0.8 | Duration of the border animation in seconds |
Examples
Basic Usage
The classic portfolio card style with different border colors using shadcn theme variables:
Features
- SVG-based animation: Uses SVG lines with CSS transitions for smooth, performant animations
- Clockwise border effect: Creates the illusion of border lines rotating around the card
- Color inversion on hover: Background and text colors swap on hover for a striking visual effect
- Fully customizable: Control dimensions, colors, stroke width, and animation duration
- Theme-aware: Uses shadcn CSS variables by default for seamless theme integration
- Responsive: All calculations adapt dynamically to the provided width and height
- Accessible: Respects
prefers-reduced-motionfor users who prefer reduced animations - Type-safe: Full TypeScript support with proper prop types
How It Works
The animation effect is achieved using SVG lines that are three times longer than the card's dimensions. Each line has a stroke-dasharray that creates a visible segment with a gap. On hover, the lines are translated (moved) in different directions:
- Top line: Moves left (
translateX(-600px)for a 300px wide card) - Bottom line: Moves right (
translateX(600px)) - Left line: Moves down (
translateY(920px)for a 460px tall card) - Right line: Moves up (
translateY(-920px))
The translation distance is two-thirds of the line length, creating the illusion that the border segments are rotating clockwise around the card. On hover, the background and text colors are inverted (background becomes the text color, text becomes the background color) for a dramatic visual effect.
Browser Support
This component uses CSS transitions on SVG transforms, which are well-supported in modern browsers:
- Chrome 1+
- Firefox 3.5+
- Safari 3.2+
- Edge 12+
The component gracefully degrades if CSS transitions are not supported, showing the static border without animation.
Notes
- The component uses CSS custom properties (CSS variables) for dynamic values, allowing for runtime customization
- Default colors use shadcn theme variables (
--card,--card-foreground,--secondary, etc.) for automatic theme support - On hover, the background and text colors are automatically inverted for a striking visual effect
- The stroke-dasharray values are calculated based on the card dimensions to ensure the animation effect works correctly
- The animation delay is carefully timed to ensure the border animation is visible after the background transition begins
- All measurements are in pixels to ensure precise positioning and animation
Credits
This component was inspired by the border animation effect seen on Carl Philipe Brenner's portfolio website. The implementation uses SVG and CSS transitions instead of JavaScript for better performance and easier customization.