excalidraw/docs/brainstorming-session.md

Liquid Glass Effects Brainstorming Session

Session Date: December 19, 2024 Facilitator: Mary (Business Analyst) Topic: Liquid glass effects for Vite app

Session Setup

Topic: Liquid glass effects for Vite application Goal: Generate creative approaches and implementation strategies Output: Structured document for future reference

Session Context

Project: Excalidraw monorepo enhancement Tech Stack: React 19 + TypeScript + Vite 5.x + SCSS/CSS modules Goal: Implement liquid glass effects for UI components Focus: Implementation approaches and visual effect analysis Approach: Technical Deconstruction Reference: liquid-glass-react library analysis Implementation Goal: Enhance existing Excalidraw components with optical glass effects

Session Notes

Technical Deconstruction: Liquid Glass Visual Properties

Core Optical Phenomena Identified:

1. Refractive Index Simulation - Light bending through glass material
2. Edge vs Center Distortion - More warping at edges, blur in center
3. Layered Frosting Effects - Varying opacity and texture layers
4. Spatial Layering - Glass components exist ON TOP of content, not embedded
5. Morphic Interaction - Water droplet-like deformation on hover/interaction
6. Chromatic Aberration - RGB channel displacement for realistic light splitting

Implementation Techniques:

• Displacement Mapping - Shader-based refraction simulation (performant alternative to ray tracing)
• RGB Channel Aberration - Per-channel displacement intensity control

Session Notes

Technical Deconstruction: Liquid Glass Visual Properties

Core Optical Phenomena Identified:

1. Refractive Index Simulation - Light bending through glass material
2. Edge vs Center Distortion - More warping at edges, blur in center
3. Layered Frosting Effects - Varying opacity and texture layers
4. Spatial Layering - Glass components exist ON TOP of content, not embedded
5. Morphic Interaction - Water droplet-like deformation on hover/interaction
6. Chromatic Aberration - RGB channel displacement for realistic light splitting

Implementation Techniques:

• Displacement Mapping - Shader-based refraction simulation (performant alternative to ray tracing)
• RGB Channel Aberration - Per-channel displacement intensity control

Target Component: AppMainMenu.tsx - MainMenu wrapper with nested items

Dynamic Glass Container Architecture

Unified Surface with Dynamic Separation:

• Default state: Single glass container wrapping entire MainMenu
• Interactive state: Individual menu items become detachable "droplets"
• Surface tension physics: Items float back to main container
• onClick integration: Droplet separation triggers menu actions

Technical Approach: Three.js for shader-based displacement and physics simulation Browser Compatibility: WebGL fallback considerations needed

Generated Ideas - Dynamic Glass Behavior

Container Architecture:

1. Unified Glass Wrapper - Single container around entire MainMenu
2. Mercury-like Physics - Quick, fluid return behavior for separated items
3. Surface Tension Model - Items connected by invisible elastic forces

Droplet Separation Triggers:

1. Hover Proximity - Items bulge outward as cursor approaches
2. Click Preparation - Item separates slightly before click registers
3. Drag Interaction - Physical pulling of items away from container
4. Active State Separation - Highlighted items naturally separate

Generated Ideas - Implementation Progression

Phase 1: CSS-Based Prototype

1. Basic Glassmorphism Wrapper - backdrop-filter, blur, transparency layers
2. Simple Displacement Effect - CSS transforms and distortions
3. Hover Interactions - transition-based morphing effects
4. Integration with AppMainMenu - maintain existing functionality

Phase 2: Three.js Library Exploration

1. React Three Fiber - React bindings for Three.js
2. Drei Components - Pre-built effects and helpers
3. React Spring Three - Physics-based animations
4. Shader Material Libraries - Glass/liquid effect implementations

Prototype Development:

• Working CSS glass effect for AppMainMenu component
• Three.js integration roadmap with specific libraries