Animation
Building Cinematic UI with Framer Motion
Learn how to create stunning animations that bring your Next.js applications to life with spring physics and scroll-triggered effects.
SSandeep Gaddam
8 min 116
Card Collection
Card Showcase
From bento grids to glassmorphism, every card style you need — beautifully designed and endlessly customizable.
Bento Grid
Flexible grid layout with feature-rich cards
Glassmorphism
Frosted glass effects with backdrop blur and translucency for a modern, layered aesthetic.
Glass Effect
Gradient Cards
Vibrant gradient backgrounds that make each card pop with color and energy.
Vibrant
Hover Effects
Cards that lift, scale, and glow on hover for engaging interactive feedback.
Stats & Metrics
Data-rich cards with icons, numbers, and trend indicators for dashboards and analytics.
Users
24.5K
Revenue
$89K
Content Cards
Blog post and article cards with image placeholders, metadata, and reading time.
Getting Started Guide
5 min read · Tutorial
Interactive
Cards with buttons, actions, and interactive elements that respond to user input.
Minimal Cards
Clean, understated cards for when less is more. Elegance through simplicity.
Simplicity is the ultimate sophistication.
Orbit Animation
Feature section with orbiting tech icons
Build your idea
Nexus AI is a modern platform for AI-powered development, design, and innovation.
Glassmorphism Cards
Frosted glass effects with backdrop blur and translucency
Frosted Glass
Backdrop-blur creates a soft frosted effect that lets underlying colors bleed through beautifully.
Layered Depth
Multiple glass layers stack to create visual depth and hierarchy, perfect for complex dashboards.
Light Refraction
Border highlights and subtle gradients simulate light refraction through frosted surfaces.
Gradient Cards
Cards with vibrant gradient backgrounds for maximum visual impact
Terracotta
Gradient card
Emerald
Gradient card
Sunset
Gradient card
Ocean
Gradient card
Hover Effect Cards
Interactive cards that respond to hover with lift, scale, and glow effects
Lift Effect
Cards gently rise on hover with a soft shadow, creating a sense of elevation and depth.
Scale Effect
Cards smoothly scale up on hover, drawing attention to the focused element.
Glow Effect
A subtle glow appears on hover, highlighting the card with a warm terracotta aura.
Post Cards
Blog post and article cards with rich content layouts
Design
The Art of Glassmorphism in Dark Mode
Master the delicate balance of backdrop blur, translucency, and border effects to create gorgeous glass cards.
PPriya Sharma
5 min 214
Color
Terracotta: A Color System Deep Dive
How we crafted the warm terracotta palette for UnQWebTemplate and why it works across light and dark modes.
MMarcus Chen
6 min 152
Stats Cards
Data-rich metric cards with icons, values, and trend indicators
+20.1%
$45,231
Total Revenue
+180
2,350
Active Users
+19%
12.5K
Page Views
+0.4%
3.2%
Conversion
More Card Styles
Icon cards, accent cards, and notification cards
Icon Card
Lead with an icon to visually categorize content. Great for feature lists and tool cards.
Accent Border Card
A colored left border draws the eye and creates visual hierarchy without overwhelming the layout.
New update available
Version 2.4.0 includes 12 new components
“
Good design is obvious. Great design is transparent. These cards make great design effortless.
— Sandeep Gaddam
Magic Cards
Animated gradient cards with mouse tracking
Terracotta Glow
Mouse-tracking gradient in the signature terracotta color palette.
Emerald Wave
Fresh emerald gradient that follows your cursor movement.
Rose Aurora
Vibrant rose-to-fuchsia gradient with smooth tracking.
Cards with Meteors
Card components with meteor shower overlay effects
Launch Ready
Deploy in seconds
Production-grade deployment with edge runtime, auto-scaling, and zero-config CI/CD pipelines.
VercelEdge
AI Powered
Intelligent automation
Built-in AI capabilities with streaming responses, function calling, and multi-modal support.
GPT-4Streaming