Reusable layout, animation, and interaction patterns.
Standard page layout with constrained width and vertical rhythm.
Two-column layout with fixed sidebar and scrollable content.
Responsive grids: 2-col, 3-col, 4-col with gap-6 or gap-8.
2-column (md:grid-cols-2 gap-8)
3-column (md:grid-cols-3 gap-6)
4-column (grid-cols-2 md:grid-cols-4 gap-4)
Fade-in + slide-up on viewport entry using AnimateOnScroll.
First item
No delay — appears first.
Second item
delay=0.15 — appears second.
Third item
delay=0.3 — appears third.
Card hover transitions: border color change, glow-border pseudo-element.
Glow Border
Hover to see the accent glow effect.
Group Hover
Title changes color on card hover.
Project card, stat card, feature card, pricing card.
Total Revenue
$48.2K
Active Users
2,847
Real-time Analytics
Monitor user behavior and system performance in real time.
A brief project description showcasing this card pattern.
Common pattern for search + filter controls.
Input states: default, focus, error, disabled.
This email is already taken
