Create award-winning, cinematic frontend interfaces that feel ALIVE. Combines 10+ years of creative frontend experience with technical excellence. Specializes in WebGL, custom shaders, premium animations, and distinctive aesthetics that would win on Awwwards. Use when building landing pages, dashboa

Premium Frontend Design Skill This skill guides creation of production grade frontend interfaces that feel ALIVE — not generic, not copy paste, but genuinely crafted experiences that users remember. "The difference between a good interface and an unforgettable one is intentionality in every pixel." Dependencies (Flexible — Choose What Fits) This skill is framework flexible . Pick packages based on user preference and project needs. Core 3D (for WebGL templates) Animation (choose based on user preference) Library Best For Complexity Bundle Size CSS/Tailwind Simple transitions, micro interactions Low 0KB Framer Motion React native feel, layout animations, gestures Medium ~30KB GSAP Complex timelines, scroll triggered, text effects High ~60KB GSAP + Club SplitText, ScrollTrigger, MorphSVG High ~80KB Decision Guide: User says "simple" or "lightweight" → CSS + Framer Motion User says "complex animations" or "scroll effects" → GSAP User says "text animations" or "split text" → GSAP + SplitText User doesn't specify → Default to Framer Motion (simpler API) Optional Enhancements Browser Compatibility Notes backdrop filter : Not supported in Firefox < 103 (add fallback bg) WebGL: Provide CSS fallback for older devices @starting style : Chrome 117+, Safari 17.4+ (progressive enhancement) Core Philosophy The "Alive" Principle An interface feels alive when: It breathes : Subtle ambient animations, particles, or shader effects create constant but non distracting motion It responds : Micro interactions acknowledge every user action with satisfying feedback It has depth : Layers, parallax, glassmorphism, and shadows create dimensional space It surprises : At least one element breaks expectations in a delightful way Design Thinking (Before ANY Code) Before writing a single line, answer these: 1. Purpose : What problem does this solve? Who uses it? 2. Tone : Pick ONE extreme direction (not a blend): Brutally minimal Maximalist chaos Retro futuristic / Cyberpunk Organic / Natural Luxury / Refined Playful / Toy like Editorial / Magazine Brutalist / Raw Art Deco / Geometric Industrial / Utilitarian Bio luminescent / Sci fi Mission Control / Technical 3. The One Thing : What single element will someone remember? Every great interface has a signature moment. 4. Constraints : Framework, performance budgets, accessibility requirements. CRITICAL : Bold maximalism and refined minimalism both work. The key is intentionality, not intensity . A single, perfectly executed animation beats 50 mediocre ones. Wow + Clarity Framework Use this whenever the brief is vague or when you need to justify design decisions. The goal is wow factor with purpose . 1. Hierarchy Guardrails 1 hero flourish (shader, particle system, or globe). Everything else supports readability. 1 supporting flourish (micro interactions, animated stat card, or glowing CTA). No more. Layout rule: Hero (wild) → Content blocks (calm) → Proof (calm) → CTA (highlighted) . If the page has more than one scroll length of copy, every second section should be mostly static. 2. Typography Discipline Max 2 headliner fonts (display + body). Monospace only for data. Headline letter spacing ≥ 0.04em. Anything tighter kills readability. Body width target: 55–75 characters per line on desktop, 35–45 on mobile. Always pair big display text with a plain supporting sentence under 80 characters. 3. Color & Contrast Rules Limit neon usage to primary CTA + 1 accent . Everything else stays in zinc/neutral palette. If background is busy (shader, gradients, particles), add a bg black/70 or bg slate 950/70 scrim behind text. Keep contrast ratios ≥ 4.5:1 for body copy even if the aesthetic is cyberpunk. Add a grayscale preview check before shipping: if it looks muddy, dial the palette back. 4. Motion Throttle Default : CSS or Framer Motion with durations ≤ 400ms, easing cubic bezier(0.34, 1.56, 0.64, 1) . Escalate to GSAP/WebGL only if the brief explicitly asks for cinematic or interactive experiences. Max 1 continuous animation per viewport (e.g., shader OR wave bars, not both). Provide a “calm mode”: disable non essential motion when prefers reduced motion is on OR when user scrolls past hero. 5. When Requirements Are Vague Situation Default Optional Upgrade User only says “clean SaaS” mesh gradient hero + bento grid Swap hero background for CPPN if they later ask for “more energy” User says “dashboard” with no flair bento grid + dashboard widgets + CSS glow pills Add digital liquid shader only after data viz is signed off User says “hero section” but nothing else Text first layout + CSS gradient Offer shader/globe as a suggestion, never as default If the prompt does not explicitly mention WebGL, assume CSS first and opt in to shaders only when the user embraces the cost. Anti Patterns (NEVER Do This) Visual Anti Patterns ❌ White/light backgrounds as default (dark mode is premium) ❌ Generic gradients (purple to blue on white is AI slop) ❌ Evenly distributed, timid color palettes ❌ Static, lifeless backgrounds ❌ Cookie cutter component layouts ❌ Missing loading/transition states ❌ Jarring, un eased animations Typography Anti Patterns ❌ Inter, Roboto, Arial, system fonts for headlines ❌ Same font for everything ❌ Default line heights and letter spacing ❌ Boring, predictable type scales Code Anti Patterns ❌ Inline styles scattered randomly ❌ No CSS variables for theming ❌ Animations without will change or GPU acceleration ❌ Canvas/WebGL without requestAnimationFrame ❌ Missing cleanup in useEffect Design System 1. Color Architecture Rule: ONE dominant accent, everything else supports it. Accent Usage Rules : Primary actions: Full accent color Secondary elements: Accent at 20% opacity Borders/lines: Accent at 30% opacity Glows: Accent with blur, 40 60% opacity Never use accent for large background areas 2. Typography System Rule: Display font for impact, Body font for reading, Mono for data. Typography Patterns : 3. Spacing & Layout Rule: Asymmetry creates interest. Grids are starting points, not prisons. Bento Grid Pattern (for dashboards): Visual Effects Library 1. Glassmorphism (The Right Way) 2. CRT Scanlines Overlay 3. Film Grain Texture 4. Tech Grid Background 5. Neon Glow Effects Animation Patterns Philosophy Entrance animations : Use once, make them count Micro interactions : Subtle, fast (150 300ms) Ambient motion : Infinite, very slow, non distracting Page transitions : Smooth, coordinated Choosing the Right Tool Need Use Why Hover/focus states CSS Zero JS, instant Simple entrance CSS keyframes Lightweight Layout animations Framer Motion layout prop magic Gesture based Framer Motion Built in drag/pan Scroll triggered GSAP ScrollTrigger Most powerful Text splitting GSAP SplitText Industry standard Complex timelines GSAP Precise control SVG morphing GSAP MorphSVG No alternative Default to simpler solutions. Escalate complexity only when needed. CSS Keyframes Library Staggered Entrance Pattern CSS Only Patterns (Zero Dependencies) GSAP Patterns (When You Need Power) Framer Motion Patterns 3D & WebGL Patterns Tech Stack Basic Scene Setup Particle Sphere (Data Globe) Sentient Core (AI Brain) Performance Rules 1. Always use requestAnimationFrame via useFrame 2. Reduce particle counts on mobile (check window.innerWidth ) 3. Use useMemo for geometry/position calculations 4. Cleanup animations in useEffect return 5. Set transparent and opacity for depth sorting Component Patterns 1. Loading + Page Transitions Default (ship this unless user asks otherwise): Skeleton placeholders on cards/sections (see shimmer pattern above) Simple fade/slide page transition using CSS or Framer Motion route transitions Optional Cinematic Mode (only when the user wants a narrative boot sequence and there's time/budget): GSAP powered preloader with boot logs, text scramble, shader/WebGL background Coordinated timeline that fades into actual content once data is ready 2. Glassmorphic Navbar 3. Live Terminal 4. Stat Cards with Sparklines Quality Checklist Before shipping, verify: Visual [ ] Dark mode is default and premium feeling [ ] ONE dominant accent color used consistently [ ] Glass effects have proper blur AND borders [ ] Scanlines or grain overlay for texture [ ] No pure white text on dark ( f4f4f5 max) Typography [ ] Display font for headlines (not Inter/Roboto) [ ] Monospace for ALL data/code/numbers [ ] Proper hierarchy (3 4 distinct levels) [ ] Tracking adjusted for large text Animation [ ] Entrance animations on load (staggered) [ ] Hover states with transform AND glow [ ] Smooth 60fps for all canvas [ ] No animation without purpose Code [ ] CSS variables for all colors [ ] Responsive (mobile first) [ ] Cleanup functions in useEffect [ ] Error boundaries for 3D content Accessibility (Premium ≠ Inaccessible) Great design is inclusive. These aren't optional. Motion Sensitivity WebGL Accessibility Color Contrast Element Minimum Ratio Target Body text 4.5:1 7:1 Large text (18px+) 3:1 4.5:1 UI components 3:1 4.5:1 Decorative N/A N/A Keyboard Navigation Mobile & Responsive Strategy Premium experiences adapt gracefully. Don't just shrink — reimagine. WebGL Fallbacks Performance Budgets Device JS Budget Animation Target Desktop < 500KB 60fps WebGL Tablet < 300KB 30fps or CSS only Mobile < 150KB CSS only, no WebGL Touch Interactions Responsive Typography Loading & Error States Premium UX handles every state beautifully. Skeleton Loaders Error Boundaries (Styled) Empty States Loading States for Data Framework Integration Next.js App Router SEO for WebGL Content Data Fetching with Loading States Template Quick Reference Template Props WebGL Mobile Fallback Best Animation Lib cppn hero title , description , ctaButtons , microDetails Yes CSS gradient GSAP (SplitText) mesh gradient hero colors[] , speed , distortion , swirl No Native Framer Motion wave hero title , subtitle , placeholder , onPromptSubmit Yes Solid bg GSAP globe hero globeImage , dashboardImage , accentColor No Native Framer Motion hero section title , badge , primaryCTA , accentColor Yes Stars CSS Either bento grid children (card layout) No Native CSS or Framer dashboard widgets value , change , trend[] No Native Framer Motion terminal logs[] , title No Native CSS preloader onComplete , messages[] Optional CSS version GSAP glass components Various No Native CSS mesh gradient hero uses @paper design/shaders react (Canvas, not WebGL) Template Playbooks (Start Grounded, Layer Wow Intentionally) Goal Baseline (Clarity first) Optional Wow Upgrade Kill It If Marketing / Waitlist mesh gradient hero + glass components + bento grid value props Swap hero for cppn hero or add wave hero band for social proof Copy is long form or the product is compliance heavy AI / Research Landing cppn hero + dashboard widgets (metrics) + terminal logs Add holographic shader sections or globe

premium-frontend-design