Implementation Plan: "Hanging It All Out to Dry"

Concept Summary

A sequential fabric-reveal experience showcasing radical transparency. Users pull down fabric panels one by one, each revealing a piece of your "aired out" self — starting with the confession that you used AI to research this application.

Core Metaphor: Laundry hanging on a line. You're not hiding anything — it's all out to dry.

Panel Content Structure

Based on the Google Creative Fellowship research and your vision:

Panel #	Content	Visual
1	"I asked Gemini how to apply to this fellowship"	Bold confession text, Gemini logo
2	"Here's what it told me..."	Screenshot/summary of the research advice
3	"Show, don't tell"	Brief text + your strongest project visual
4	"Be distinctive"	Your fashion-tech + physical computing blend
5	"Use Google tools visibly"	Icons/logos of tools you used
6	"Make it delightful"	Meta: this experience IS the delight
7	"Show your process"	This whole experience IS the process
FINAL	Portfolio landing page	Interactive HTML (existing portfolio)

Total: 7 fabric panels + final portfolio page

Architecture Overview

┌─────────────────────────────────────────────────────────┐
│                    SCENE STRUCTURE                       │
├─────────────────────────────────────────────────────────┤
│                                                          │
│   Camera (moves forward as panels fall)                  │
│      │                                                   │
│      ▼                                                   │
│   [Panel 1] z=0     ← Active, interactive               │
│   [Panel 2] z=-1.5  ← Visible but blocked               │
│   [Panel 3] z=-3.0  ← Visible but blocked               │
│   [Panel 4] z=-4.5  ← Visible but blocked               │
│      ...                                                 │
│   [Panel 7] z=-9.0  ← Visible but blocked               │
│   [Portfolio HTML]  ← Behind all panels                  │
│                                                          │
└─────────────────────────────────────────────────────────┘

Technical Implementation

Phase 1: Project Structure Setup

Files to create:

googleProject/
├── index.html              # Main entry (multi-cloth scene)
├── css/
│   └── style.css           # Minimal styles for portfolio behind
├── assets/
│   ├── panel-1-confession.png
│   ├── panel-2-advice.png
│   ├── panel-3-show.png
│   ├── panel-4-distinctive.png
│   ├── panel-5-tools.png
│   ├── panel-6-delight.png
│   └── panel-7-process.png
├── js/
│   ├── cloth-manager.js    # Multi-cloth orchestration
│   └── camera-controller.js # Camera movement logic
└── portfolio/
    └── (existing portfolio content)

Phase 2: Multi-Cloth Manager

Key components (all USING existing physics, not modifying):

class ClothManager {
    constructor(scene, camera, panelConfigs) {
        this.cloths = [];           // Array of Cloth instances
        this.activeIndex = 0;       // Which cloth is interactive
        this.camera = camera;
        this.scene = scene;
        this.panelConfigs = panelConfigs;
        this.zSpacing = 1.5;        // Distance between panels
    }

    // Create all cloth instances with their textures
    createPanels() { ... }

    // Update all cloths physics (using existing Cloth.update)
    update(dt) { ... }

    // Check if active cloth has fallen out of view
    checkFallComplete() { ... }

    // Advance to next panel, trigger camera move
    advanceToNext() { ... }

    // Only allow grabbing the active (front) cloth
    getActiveCloth() { ... }
}

Phase 3: Camera Controller

class CameraController {
    constructor(camera, initialZ) {
        this.camera = camera;
        this.targetZ = initialZ;
        this.currentZ = initialZ;
        this.lerpSpeed = 2.0;
    }

    // Smoothly move camera forward by given amount
    moveForward(distance) {
        this.targetZ -= distance;
    }

    // Call each frame for smooth interpolation
    update(dt) {
        this.currentZ += (this.targetZ - this.currentZ) * this.lerpSpeed * dt;
        this.camera.position.z = this.currentZ;
    }
}

Phase 4: Panel Configuration

const PANEL_CONFIGS = [
    {
        id: 1,
        texture: 'assets/panel-1-confession.png',
        title: 'The Confession'
    },
    {
        id: 2,
        texture: 'assets/panel-2-advice.png',
        title: 'The Advice'
    },
    // ... etc
];

Phase 5: Modified Grabber Logic

// In Grabber.start(), only interact with active cloth:
start(x, y) {
    // Instead of raycasting all objects:
    const activeCloth = gClothManager.getActiveCloth();
    if (!activeCloth) return;

    // Only raycast against active cloth's mesh
    const intersects = this.raycaster.intersectObject(activeCloth.triMesh);
    // ... rest of grab logic
}

Phase 6: Fall Detection & Progression

// In update loop:
function update() {
    gClothManager.update(dt);
    gCameraController.update(dt);

    // Check if active cloth fell out
    if (gClothManager.checkFallComplete()) {
        gClothManager.advanceToNext();
        gCameraController.moveForward(gClothManager.zSpacing);
    }

    // Check if all panels cleared
    if (gClothManager.isComplete()) {
        showPortfolio();
    }
}

Implementation Steps (Detailed)

Step 1: Create project structure

Create index.html with multi-layer setup
Create css/style.css for portfolio styling
Create assets/ folder
Copy physics code from reveal copy.html (untouched)

Step 2: Create placeholder panel textures

Design 7 panel textures (can be simple text-on-color initially)
Save as PNG files in assets/

Step 3: Implement ClothManager class

Create js/cloth-manager.js
Implement createPanels() - instantiates multiple Cloth objects
Implement update() - runs physics on all cloths
Implement checkFallComplete() - detects when cloth is gone
Implement advanceToNext() - removes fallen cloth, activates next

Step 4: Implement CameraController class

Create js/camera-controller.js
Implement smooth lerp movement
Integrate with ClothManager progression

Step 5: Modify Grabber for single-cloth interaction

Restrict raycasting to active cloth only
Ensure only front panel responds to input

Step 6: Implement fall detection

Check if all particles below viewport
Remove cloth mesh from scene when fallen
Trigger next panel activation

Step 7: Create portfolio landing content

Simple HTML behind all cloths
Becomes visible when all panels cleared

Step 8: Polish & Test

Test sequential progression
Tune camera movement speed
Test on different screen sizes
Add subtle visual feedback (cursor changes, etc.)

Critical Constraints

DO NOT MODIFY PHYSICS CODE - The Cloth class, Hash class, vector math, and simulation loop from Ten Minute Physics are sacred. Only orchestrate multiple instances.
Sequential only - User must clear front panel before interacting with next.
Clean disappearance - Fallen cloths are removed from scene, not piled up.
Performance - With 7 cloths, only run physics on active cloth + 1-2 nearby. Others can be static until active.

Asset Requirements

Asset	Description	Priority
`panel-1-confession.png`	"I asked Gemini..." text	HIGH
`panel-2-advice.png`	Research summary screenshot	HIGH
`panel-3-show.png`	"Show don't tell" + project	HIGH
`panel-4-distinctive.png`	Fashion-tech blend	MEDIUM
`panel-5-tools.png`	Google tools used	MEDIUM
`panel-6-delight.png`	Meta delight message	MEDIUM
`panel-7-process.png`	Process reveal	MEDIUM

Lint Requirements

Every implementation step must pass:

ESLint (if using modules)
No console errors
Three.js warnings addressed
Physics stability verified

Risk Mitigation

Risk	Mitigation
Performance with 7 cloths	Only simulate active cloth; others static
Camera jank	Use lerp with tuned speed
Cloth occlusion issues	Proper Z-ordering, render order
Mobile touch issues	Use existing touch handlers from reveal copy

Success Criteria

User can pull down each panel sequentially
Camera smoothly advances with each reveal
All 7 panels display their content correctly
Final portfolio page is accessible and functional
No physics code modified
Experience is delightful from first interaction
Meta-narrative of transparency is clear

Next Steps After Approval

Create project structure
Copy physics code (verbatim)
Create ClothManager class
Create CameraController class
Integrate into main HTML
Create placeholder textures
Test full flow
Polish and iterate

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implementation Plan: "Hanging It All Out to Dry"

Concept Summary

Panel Content Structure

Architecture Overview

Technical Implementation

Phase 1: Project Structure Setup

Phase 2: Multi-Cloth Manager

Phase 3: Camera Controller

Phase 4: Panel Configuration

Phase 5: Modified Grabber Logic

Phase 6: Fall Detection & Progression

Implementation Steps (Detailed)

Step 1: Create project structure

Step 2: Create placeholder panel textures

Step 3: Implement ClothManager class

Step 4: Implement CameraController class

Step 5: Modify Grabber for single-cloth interaction

Step 6: Implement fall detection

Step 7: Create portfolio landing content

Step 8: Polish & Test

Critical Constraints

Asset Requirements

Lint Requirements

Risk Mitigation

Success Criteria

Next Steps After Approval

FilesExpand file tree

PLAN.md

Latest commit

History

PLAN.md

File metadata and controls

Implementation Plan: "Hanging It All Out to Dry"

Concept Summary

Panel Content Structure

Architecture Overview

Technical Implementation

Phase 1: Project Structure Setup

Phase 2: Multi-Cloth Manager

Phase 3: Camera Controller

Phase 4: Panel Configuration

Phase 5: Modified Grabber Logic

Phase 6: Fall Detection & Progression

Implementation Steps (Detailed)

Step 1: Create project structure

Step 2: Create placeholder panel textures

Step 3: Implement ClothManager class

Step 4: Implement CameraController class

Step 5: Modify Grabber for single-cloth interaction

Step 6: Implement fall detection

Step 7: Create portfolio landing content

Step 8: Polish & Test

Critical Constraints

Asset Requirements

Lint Requirements

Risk Mitigation

Success Criteria

Next Steps After Approval