GMW/docs/specs/2026-06-03-anime-ui-overhaul-design.md

Anime UI Overhaul — Frontend Redesign

Date: 2026-06-03 Status: Approved Author: Claude Code / brainstorm session Related: docs/specs/2026-06-01-frontend-major-refactor-design.md

Overview

Complete visual overhaul of the GMW frontend (/mnt/code/bete/services/frontend) from dark cyberpunk to light anime aesthetic with white + sky blue (#7EC8E3) as primary colors. Full "kawaii cyber" approach with Three.js particles, GSAP animations, Framer Motion transitions, and anime-style mascot/illustrations.

Mood Board

• Vibe: Fresh, cute, playful, clean — like an anime profile page meets monitoring dashboard
• Primary colors: White #FFFFFF + Sky Blue #7EC8E3 + Soft Pink accent #FF8FAB
• Typography: Rounded, light, airy — Inter with loose letter-spacing
• Shapes: Extra rounded corners (16-20px), soft shadows with sky-blue tint
• Animations: Bouncy spring transitions, floating particles, page fade/slide

Tech Stack Additions

Library	Purpose
three	3D particle background (sakura, sparkles)
@react-three/fiber	React wrapper for Three.js
@react-three/drei	Utility helpers for R3F
gsap	Page transitions, scroll-triggered effects, complex timelines
framer-motion	Component mount/unmount, card stagger, layout animations

All existing dependencies preserved (React 19, Tailwind 4, TanStack Query, Lucide, Radix).

Color System

:root {
  --bg: 0 0% 98%;
  --bg-secondary: 210 40% 96%;
  --fg: 222 20% 12%;
  --fg-muted: 215 20% 45%;
  --primary: 199 80% 50%;          /* #7EC8E3 sky blue */
  --primary-soft: 199 80% 90%;
  --primary-glow: 199 80% 70% / 0.25;
  --card: 0 0% 100%;
  --card-shadow: 0 8px 32px hsl(199 50% 60% / 0.1);
  --border: 199 30% 85%;
  --accent: 340 80% 65%;           /* soft pink */
  --accent-glow: 340 80% 70% / 0.2;
  --radius: 1rem;                  /* 16px base */
}

Layout

┌─────────┬─────────────────────────────────────────┐
│         │  Header (transparent, sticky)            │
│ Sidebar │  ┌─ tab title ──── [WS] [Voice] ──────┐ │
│ 64px    │  │ subtitle                            │ │
│ icon-   │  └─────────────────────────────────────┘ │
│ only    │                                           │
│         │  Main Content Area                        │
│ [🌟]    │  ┌───────────────────┬───────────────┐   │
│ [💬]    │  │ Card              │ Card           │   │
│ [📊]    │  │                   │                │   │
│         │  └───────────────────┴───────────────┘   │
│  🐱     │  ┌───────────────────────────────────┐   │
│ chibi   │  │ Card (full width)                  │   │
│ mascot  │  └───────────────────────────────────┘   │
└─────────┴─────────────────────────────────────────┘

Background: Three.js particle canvas (z-index: -1)
All content above particles

Component Tree

Sidebar (widgets/Sidebar.tsx)

• Collapsed by default (64px) — icon-only
• Icons: custom anime-style or Lucide icons
• Active tab: sky-blue soft bg + glow ring
• GSAP hover: translateX(2px) + spring scale
• Bottom: chibi mascot avatar (CSS art or SVG)
• Framer Motion layout animation when switching

Header (widgets/Header.tsx)

• Transparent, barely visible border-bottom
• Left: animated tab title + subtitle
• Right: status badges (WS green dot + Voice) — cute style
• Avatar placeholder with anime border

Cards (all shared/ui and feature components)

• White bg, sky-blue border, 16px radius
• Soft shadow with sky-blue tint
• GSAP hover: lift +4px, shadow deepens
• Framer Motion: stagger entrance when tab changes
• Inside: playful headings, pastel accents

Empty States

• Chibi mascot illustration (CSS-drawn character)
• Playful text: "No speakers yet... 🎤✨"
• Subtle bounce animation on the mascot

Three.js Particles

• Layer: z-index: -1, pointer-events: none, fixed position
• Elements: Floaty sakura petals (pink soft) + sparkles (white/sky blue)
• Behavior: Slow drift downward, slight mouse interaction (gentle pull)
• Performance: useFrame optimized, max ~50 particles, auto-pause when tab hidden
• Implementation: @react-three/fiber Canvas with custom Particles component

Animations (GSAP + Framer Motion)

GSAP

• Page transitions: tab switch → old content fades out (300ms) → new content slides up (400ms)
• Timeline: coordinated header + sidebar + content stagger
• Hover effects: card lift on onMouseEnter/onMouseLeave

Framer Motion

• Card stagger: each card enters with 80ms delay, spring physics
• Layout animations: sidebar width, list reorder
• AnimatePresence: smooth mount/unmount for sub-panels
• WhileHover: cards, buttons, badges

Features to Modify

1. Auth Page (features/auth/index.tsx)

• Center card with sky-blue gradient border
• Mascot next to lock icon
• Floating sparkle particles in background
• Input: rounded-xl, sky-blue focus ring
• GSAP entrance: card slides up + fade

2. Live Panel (features/live/index.tsx)

• VoiceConnectionCard: anime-styled select inputs, cute buttons with icons
• AudioVisualizer: keep but style with sky-blue/pink gradient bars
• ActiveSpeakers: avatar dengan anime-style border (double ring)
• NowPlaying: spinning record visual + anime equalizer bars
• Music/Screen/Recordings tabs: rounded cards with sky-blue accents

3. Messages Panel (features/messages/index.tsx)

• Search bar: rounded-full, sky-blue focus
• Filter buttons: pill-shaped, anime pastel colors
• MessageCard: avatar with anime border, content with rounded bg
• AI badges: cute tags (clean = green pastel, flagged = pink pastel)
• ImageGrid: masonry-like with sky-blue hover border

4. Analytics Panel (features/analytics/index.tsx)

• Summary cards: large number with sky-blue glow, small anime icon
• Charts: sky-blue + pink pastel gradients
• Tables: rounded rows, alternating pastel bg
• Loading skeletons: sky-blue shimmer animation

Implementation Phases

Phase 1: Foundation

1. Install new dependencies (three, @react-three/fiber, @react-three/drei, gsap, framer-motion)
2. Update tailwind.config.js with new color system
3. Rewrite styles.css with white/sky-blue theme
4. Create Three.js ParticleBackground component
5. Create shared animation hooks (useGsapTransition, useFramerStagger)

Phase 2: Layout

6. Redesign Sidebar.tsx (collapsed icon-only, anime icons, mascot)
7. Redesign Header.tsx (transparent, anime status badges)
8. Redesign DashboardLayout.tsx (white bg, particle layer)
9. Add GSAP page transitions between tabs

Phase 3: Components

10. Redesign shared UI: card.tsx, button.tsx, badge.tsx, input.tsx, select.tsx
11. Redesign AuthOverlay with anime styling
12. Redesign VoiceConnectionCard + ActiveSpeakers + NowPlaying
13. Redesign MessageFeed + MessageCard + ImageGrid
14. Redesign Analytics panel components

Phase 4: Polish

15. Add Framer Motion stagger animations to all lists
16. Add empty states with mascot illustrations
17. Add loading animations (skeleton shimmer, pulse)
18. Final color/contrast pass for readability
19. Responsive check on mobile

Edge Cases & States

Loading States

• Skeletons: sky-blue gradient shimmer, rounded-xl
• Three.js particles: render behind skeleton, visible from second 0
• GSAP entrance: content fades in after skeleton → real content swap

Empty States

• No messages: Chibi mascot waving "No messages yet~ 💬"
• No speakers: Mascot sleeping "Quiet in here... zzz 🌙"
• No analytics data: Mascot thinking "Not enough data, give me moar! 📊"
• Auth locked: Mascot peeking "Password please~ 🔒"

Error States

• Error boundaries: pastel pink/red card with chibi crying mascot
• Network error: toast with cute sad face
• Retry button: bouncy animation on hover

Edge Cases

• Tab not visible: Three.js pauses via document.hidden listener
• GSAP/Framer conflict: GSAP for page-level, Framer for component-level — never both on same element
• Reduced motion: prefers-reduced-motion disables all animations, static fallback
• Low-end devices: renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
• Mobile: Sidebar becomes bottom tab, particles reduced to 20 max

Accessibility

• All colors meet WCAG AA on white backgrounds (sky blue #7EC8E3 on white = 4.8:1 for large text)
• Reduced motion media query respected
• Keyboard navigation preserved in all anime-styled components
• Particle layer has aria-hidden="true" and pointer-events: none

Future Enhancements (Out of Scope)

• Custom anime character illustration as actual image
• Sound effects on tab switch (anime jingle)
• Seasonal themes (cherry blossom, summer, etc.)
• User avatar with anime filter

---

Design approved by user on 2026-06-03.