Visual Codex Gallery Development

A specialized skill for developing, extracting, and cataloging advanced interactive visual effects including holographic parallax systems, neoskeuomorphic cards, chaos overlays, and WebGL visualizers.

What This Skill Does

This skill guides you through creating and managing an advanced visual effects gallery with 37+ unique interactive demonstrations. It focuses on extracting visual systems from complex applications, creating focused demos, and building mobile-optimized interactive galleries with touch controls and performance monitoring.

Visual Effect Development Workflow

1. Screenshot Analysis & Source Mining

2. Create Focused Demonstrations

3. Interactive Enhancement Standards

**Required Interactive Features:**

**Visual Quality Requirements:**

4. Multi-Layer Parallax Architecture

Create three-layer depth systems:

```css

/* Layer 1: Background */

.layer-1 {

mix-blend-mode: screen;

transform: translateZ(-100px);

}

/* Layer 2: Mid-ground */

.layer-2 {

mix-blend-mode: overlay;

transform: translateZ(0px);

}

/* Layer 3: Foreground */

.layer-3 {

mix-blend-mode: color-dodge;

transform: translateZ(100px);

}

```

Apply different mouse reactivity to each layer for depth parallax.

5. Gallery Integration

**Add to Main Gallery (`gallery.html`):**

1. Create demo file in `demos/` directory

2. Add entry to `effects` array with:

- Unique ID

- Descriptive title

- Category tags (holographic, neoskeuomorphic, chaos, progress, state, 4d)

- Interactive feature flags

- Clear description

3. Test preview iframe functionality

4. Verify mobile responsiveness

**Gallery File Structure:**

```

visual-codex/

├── gallery.html # Main interactive grid (37 effects)

├── gallery-mobile-native.html # Touch-optimized mobile gallery

├── demos/ # Individual demonstrations

│ ├── [component]-demo.html

│ ├── [system]-mega-demo.html

│ └── [effect]-variations-demo.html

└── effects/ # Complex visualizer systems

```

Mobile-First Development

Mobile-Native Gallery System

**Key Features:**

**Mobile Optimization Standards:**

```css

/* Touch-optimized sizing */

:root {

--touch-target: 56px; /* Optimal touch target size */

--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-element {

min-width: var(--touch-target);

min-height: var(--touch-target);

touch-action: manipulation;

-webkit-tap-highlight-color: transparent;

}

```

**Performance Detection Pattern:**

```javascript

// 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();

}

}

}

```

Mobile Optimization Tiers

**Tier 1: Mobile-Ready (CSS-Based)**

**Tier 2: Mobile-Adapted (Performance Optimized)**

**Tier 3: Mobile-Simplified (Lite Versions)**

Effect Categories & Techniques

Holographic Parallax Systems

Multi-layer blend modes with depth transforms, mouse reactivity, subtle color shifts

Neoskeuomorphic Cards

Advanced shadow/highlight systems, embossed surfaces, soft 3D depth

Chaos Overlays

Interference patterns, digital glitch effects, scan line systems

Progress Indicators

Holographic progress bars, segmented displays, circular indicators with glow

State Controls

Interactive dot systems for navigation, status indicators with hover states

4D Visualizers

WebGL hypercube projections, polytopal systems, interactive rotation controls

Holographic Blend Mode Guide

```css

/* Brightening overlay */

mix-blend-mode: screen;

/* Intense glow effects */

mix-blend-mode: color-dodge;

/* Balanced color mixing */

mix-blend-mode: overlay;

/* Subtle enhancement */

mix-blend-mode: soft-light;

/* High contrast effects */

mix-blend-mode: difference;

```

Development Commands

Gallery Management

```bash

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"

```

Style Extraction

```bash

Extract from source files

claude "Find holographic systems in [source-directory]"

Create focused demo

claude "Extract individual style faces from [complex-file].html"

Generate interactive version

claude "Add mouse/scroll reactivity to [component]"

```

Mobile Development

```bash

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"

```

Critical System Fixes (Phase 1)

When restoring or fixing gallery functionality, follow these principles:

**URGENT Priorities:**

1. **Tactile Scroll Physics** - Momentum-based scroll with threshold triggering

2. **Hover State Management** - Cards fully visible by default, enhanced on hover

3. **Card Expansion** - Larger scaling (1.3x) with live effect previews

4. **Demo Content Restoration** - All 35+ demos accessible with 5-item pagination

5. **Click-to-Expand Modal** - Proper modal system with infinite scroll

6. **Parameter-Only Scroll** - Map scroll to parameters without page movement

**Implementation Principles:**

Mobile Testing Checklist

Documentation Standards

Create these documents for each major system:

Visual Codex Philosophy

**"Extract, Enhance, Catalog"** - Take complex visual systems and distill 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.

Example Usage

**Create a new holographic card demo:**

1. Extract card component from source file

2. Create `holographic-card-demo.html` in `demos/`

3. Implement three-layer parallax with blend modes

4. Add mouse tracking for subtle movement

5. Add hover state with scale transform and glow

6. Add click interaction with random color variations

7. Test on mobile with touch optimization

8. Add entry to `gallery.html` effects array

9. Document in README with preview image

**Mobile-optimize an existing demo:**

1. Audit touch target sizes (minimum 56px)

2. Add ZingTouch gesture support

3. Implement device capability detection

4. Add adaptive quality controller

5. Test on low-end devices

6. Document battery impact

7. Create mobile-specific version if needed