A collection of design system components, interaction patterns, and visual explorations. Where I experiment outside of production work.
Core palette built for dark-first interfaces with warm accent tones.
System font stack with intentional weight and spacing hierarchy.
Primary, secondary, ghost, and icon variants across three sizes.
8px base unit spacing system for consistent layout rhythm.
Outline icon system with 1.5px stroke weight.
Optimized for speed across all platforms and screen sizes.
WCAG 2.1 AA compliant with full keyboard navigation support.
Enterprise-grade security with end-to-end encryption built in.
Three-up card layout for feature highlights and value props.
Input fields, toggles, and form patterns for dark interfaces.
Toast and alert patterns with status indicators.
Three concentric animated rings with orbiting particles, independent speeds, and color-coded metrics.
Dark and light mode token mapping for cross-theme support.
7-layer animated aurora with rotating blobs, screen blending, and noise texture overlay.
Organic SVG shapes with continuous morphing animation, glow filters, and noise overlay.
Sized avatars, stacking groups, and status badges.
Full-featured analytics panel with KPI cards, sparklines, dual-bar comparison chart, and animated data entry.
Six micro-interaction patterns for interactive elements.
Interactive particle constellation with mouse-reactive gravity, network connections, and bloom trails. Hover to attract.
Three-layer time-series monitor with labeled axes, gradient area fills, glow filter, and pulsing data points.
Physics-based gradient orbs with spring dynamics and mouse-reactive movement. Hover to attract.
Text rendered as particles that scatter on hover and reassemble with spring physics.
32-band spectrum analyzer with gradient fills, rounded caps, and mirrored reflections.
Perspective-aware 3D transform with light reflection, grid texture, and dynamic shadow. Move your cursor to interact.
Thousands of particles following a Perlin noise flow field with shifting color gradients and organic motion.
CSS-only animated letters with individual wave, bounce, and rotation patterns.
easeOutExpo count-up animation with formatted suffixes, staggered entry, and gradient text.