This file provides specialized guidance for Claude Code when working with the Visual Codex Gallery system.
The Visual Codex is an advanced interactive gallery showcasing 37 unique visual effects and style demonstrations. It serves as a comprehensive library of holographic, parallax, and interactive CSS/WebGL systems.
- Screenshot Analysis: Analyze user-provided images to identify shiny reactive elements
- Source Mining: Extract holographic/parallax systems from VIB3 project files
- Style Isolation: Create focused demos from complex full-page applications
- Variation Generation: Build multiple unique versions of discovered patterns
- Interactive Enhancement: Add mouse/scroll reactivity and state management
- Gallery Integration: Automatically catalog new effects in the gallery system
- Main Gallery:
gallery.html
- Interactive grid showcasing all 37 effects
- Demos Directory:
demos/
- Individual style component demonstrations
- Effects Directory:
effects/
- Complex visualizer systems
- Holographic Parallax: Multi-layer blend mode systems with depth transforms
- Neoskeuomorphic Cards: Advanced shadow/highlight card styling
- Chaos Overlays: Interference patterns and digital glitch effects
- Progress Indicators: Holographic progress bars, circles, and segmented displays
- State Controls: Interactive dot systems for navigation and status
- 4D Visualizers: WebGL hypercube and polytopal projection systems
- Mouse Reactivity: Subtle parallax movement based on mouse position
- Scroll Effects: Rotation, scale, or transform changes on scroll
- Click Interactions: State changes, zoom effects, color shifts
- Hover States: Scale transforms, glow effects, focus highlighting
- Random Variations: Multiple activation states with random durations
- Brightness Levels: Ensure sufficient visibility and contrast
- Blend Mode Usage: Strategic layering with screen, overlay, color-dodge
- Depth Systems: Proper translateZ positioning for 3D depth
- Animation Quality: Smooth transitions with cubic-bezier easing
- Responsive Design: Mobile-optimized grid layouts and scaling
# Add new effect to gallery
claude "Extract [component] and add to Visual Codex gallery"
# Create variation set
claude "Generate 35 variations of [effect] with different blend modes"
# Enhance existing demo
claude "Improve [demo] with better brightness and hover effects"
# Extract from source files
claude "Find holographic systems in /mnt/c/Users/millz/vib3-framework-production/"
# Create focused demo
claude "Extract individual style faces from NEOSKEUOMORPHIC_HOLOGRAPHIC_UI.html"
# Generate interactive version
claude "Add mouse/scroll reactivity to [component]"
[component-name]-demo.html
- Individual style demonstrations[system-name]-mega-demo.html
- Large variation collections[effect-type]-variations-demo.html
- Multiple versions of single effect
- Create demo file in
demos/
directory
- Add entry to
effects
array in gallery.html
- Include appropriate tags, interactive features, and descriptions
- Test preview iframe functionality
- Verify mobile responsiveness
- Layer 1: Background pattern (screen/multiply blend)
- Layer 2: Mid-ground detail (overlay/soft-light blend)
- Layer 3: Foreground accents (color-dodge/hard-light blend)
- Each layer with different translateZ depths and mouse reactivity
/* Effective holographic combinations */
mix-blend-mode: screen; /* Brightening overlay */
mix-blend-mode: color-dodge; /* Intense glow effects */
mix-blend-mode: overlay; /* Balanced color mixing */
mix-blend-mode: soft-light; /* Subtle enhancement */
mix-blend-mode: difference; /* High contrast effects */
- Click states with random color/zoom variations
- Hover states with scale transforms and glow
- Mouse tracking for subtle parallax movement
- Scroll-based rotation and scaling effects
- Auto-cycling random activations
The Visual Codex operates on the principle of "Extract, Enhance, Catalog" - taking complex visual systems and distilling them into focused, interactive demonstrations that showcase specific CSS and WebGL techniques. Each effect should be production-ready and serve as both inspiration and implementation reference.
This specialized workflow integrates with the root
CLAUDE.md
agentic development environment, focusing specifically on visual effect development, style extraction, and interactive demonstration creation within the broader experimental coding laboratory framework.
- Touch-First Architecture: ZingTouch integration for advanced gesture recognition
- Performance Optimization: Adaptive quality system with real-time FPS monitoring
- Device Detection: Automatic capability detection and mobile-specific optimizations
- Battery Consciousness: Automatic quality reduction on low battery
- Progressive Loading: Memory management with smart card lifecycle
- Haptic Feedback: Navigator.vibrate integration for tactile responses
# Create mobile-optimized demo
claude "Create mobile version of [demo] with 56px touch targets and ZingTouch"
# Audit mobile compatibility
claude "Audit [demo] for mobile compatibility and create optimization report"
# Deploy mobile gallery
claude "Deploy mobile gallery to GitHub Pages with performance testing"
- Minimum Touch Targets: 44px (Apple) / 56px (optimal)
- Touch Events: touchstart, touchmove, touchend with passive optimization
- Gesture Support: Swipe, tap, long-press, pinch with ZingTouch
- Haptic Feedback: Navigator.vibrate for all interactions
- Performance Monitoring: Real-time FPS tracking with adaptive quality
/* Touch-optimized sizing */
:root {
--touch-target: 56px;
--safe-area-top: env(safe-area-inset-top, 0);
--safe-area-bottom: env(safe-area-inset-bottom, 0);
--font-size-base: 16px; /* Prevents iOS zoom */
}
/* Touch interaction optimization */
.touch-element {
min-width: var(--touch-target);
min-height: var(--touch-target);
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
// Device capability detection
class MobilePerformanceDetector {
detectDevice() {
return {
isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
isLowEnd: (navigator.deviceMemory || 4) <= 2,
supportsWebGL: this.detectWebGL(),
connectionType: navigator.connection?.effectiveType || 'unknown'
};
}
}
// Adaptive quality system
class AdaptiveQualityController {
adjustQuality() {
if (this.avgFrameTime > this.targetFrameTime * 1.5) {
this.reduceQuality();
}
}
}
- Neoskeuomorphic cards with touch interactions
- State control dots with 56px targets
- Progress indicators with haptic feedback
- Glassmorphic UI with reduced backdrop blur
- Reduced particle counts for mobile GPUs
- Simplified shader complexity
- Battery-conscious animations
- Touch gesture replacements for mouse interactions
- WebGL demos with mobile presets
- Simplified rendering pipelines
- Touch-optimized control interfaces
- Progressive enhancement from basic to advanced
# Deploy mobile gallery
git add gallery-mobile-native.html demos/*-mobile.html
git commit -m "🚀 Mobile-native gallery with touch optimization"
git push origin main
# Test deployment
open https://domusgpt.github.io/visual-codex/gallery-mobile-native.html
MOBILE_COMPATIBILITY_AUDIT.md
: Comprehensive mobile assessmentMOBILE_GALLERY_ARCHITECTURE.md
: Complete mobile-first architecture- Individual demo mobile optimization guides
- Performance benchmarking reports
- Touch-First Design: All interactions must work without hover
- Performance-First: Target 60fps on 2-year-old mid-range devices
- Battery-Conscious: Implement power management features
- Accessibility-First: Full screen reader and high contrast support
- Progressive Enhancement: Basic functionality → Advanced features
This mobile-first workflow represents a revolutionary approach to creating world-class mobile web visualization experiences.
Reference Document:
SYSTEMATIC_FIX_PLAN.md
- Main Gallery Tactile Scroll - Restore momentum physics with threshold triggering
- Hover State Management - Fix translucent cards, return to normal visibility
- Card Expansion Enhancement - Larger scaling (1.3x) with live effect previews
- Demo Content Restoration - Bring back all 35 demos with 5-item pagination
- Click-to-Expand Rebuild - Proper modal system with infinite scroll
- Parameter-Only Scroll - Prevent actual scrolling, map to parameters only
- Nothing Lost: All original demos and functionality preserved
- Enhanced Not Simplified: Every change adds capability
- Smooth Transitions: No jagged flips or sudden changes
- Tactile Feel: Physical-like scroll behavior with momentum
- Visual Clarity: Clear states for normal, hover, and expanded views
- Performance: Smart canvas loading/unloading during transitions
- ✅ Tactile scroll physics like original system
- ✅ Cards fully visible by default, enhanced on hover
- ✅ All demos accessible (nothing lost)
- ✅ Working click-to-expand with infinite scroll
- ✅ Parameter-only scroll without page movement