Beautiful Components Crafted with Care
A modern design system that brings depth, clarity, and elegance through translucent surfaces, dynamic lighting, and fluid motion. Explore 50+ components built with Radix UI, CSS animations, and Tailwind CSS.
50+
Components
50+
Animations
2
Themes
Design Philosophy
The art of translucency - creating visual hierarchy through layered transparency
Multiple glass layers create spatial relationships through backdrop-filter blur with varying opacity levels.
Mouse-tracked radial gradients create interactive light sources that respond to cursor position.
Smart RGB color system with opacity modifiers ensures perfect readability in all conditions.
Color Composition
A carefully crafted palette built on warm orange tones with pure contrasts
Near-white with subtle gradients
Pure black for OLED optimization
Glass Effect Hierarchy
Four levels of glassmorphic intensity for different visual emphasis
.glass-sm.glass.glass-lg.glass-readableMotion Design
Carefully orchestrated animations that create seamless, delightful experiences
GPU-accelerated transforms with will-change optimization for 60fps animations.
Spring physics and smooth cubic bezier curves create natural, organic movement.
Layered animations with staggered delays that respond to user interaction.
Mouse tracking creates dynamic light reflections and 3D perspective shifts.
Interactive Elements
Every interaction thoughtfully crafted with visual feedback
3D Transforms
Cards tilt in 3D space following cursor movement
Shimmer Effects
Light sweeps across surfaces on interaction
Float Animation
Elements gently float to draw attention
Component Architecture
Built with flexibility using compound patterns and variant-driven styling
variant="default" | "destructive" | "outline"size="sm" | "default" | "lg" | "icon"Crafted with Precision
Every pixel, every animation, and every interaction has been meticulously designed to create a cohesive and delightful experience. This is not just a design system—it's a digital craft.
Design System v1.0