The Secret Self Behind the Suit
The story behind The Daydream
Inspired by Daydream on Wikipedia
Built with Pure WebGL2 (no Three.js) · GLSL Fragment Shaders · FAL.AI Image Generation
Techniques Multi-Pass FBO Pipeline · Liquid Brush Stamp Erosion · Self-Healing Mask · RGBA8 Mask Texture · Ping-Pong Framebuffers
Direction Four corporate headshots in a comic book panel grid, each hiding a hyper-colorful dream self underneath — cursor-driven liquid erosion reveals the fantasy, but reality heals back over
Result An interaction where you can erode reality to see who people secretly want to be, but you can’t hold all four dreams open at once — you have to choose which to look at
The Story
You spend 47% of your waking hours somewhere else. Not physically — you’re still at your desk, still in the meeting, still nodding at the right moments. But your mind has slipped its leash. You’re an astronaut. A firefighter. A rockstar on stage. A diver in open water.
The Wikipedia article on daydreaming describes it as “involuntary detachment from one’s immediate surroundings, during which a person’s contact with reality is blurred and partially substituted by a visionary fantasy.” Nearly half your conscious life. Gone. Replaced by something better.
What fascinated me was the word “involuntary.” You don’t choose to daydream. It happens to you. Reality loosens its grip and something vivid bleeds through — then snaps back just as suddenly. You don’t notice you’ve left. The return is what you notice.
Everyone carries a secret self beneath their professional exterior. The fluorescent-lit headshot. The lanyard. The grey. Underneath all of it: color.
The Take
Four faces in a 2x2 comic book panel grid. Grey. Desaturated. Corporate lighting, slight grain — the visual language of the office headshot wall. Each one stares back at you from behind the glass of professional presentation.
Underneath each one is a completely different person. An astronaut floating in deep space, electric blue spacesuit reflecting galaxies. A firefighter in full turnout gear, dramatic firelight behind them. A rockstar on stage, hot pink and purple spotlights, guitar in hand. A deep-sea diver surrounded by bioluminescent coral. Not the same face filtered — entirely different AI-generated portraits. The dream is not a version of who they are. It’s someone else entirely.
Your cursor is a brush. Move it across a panel and liquid erosion pours through the grey surface, dissolving reality to reveal the color underneath. The erosion is soft and organic — Gaussian stamps with noise perturbation, slightly randomized radius, drip particles that fall under gravity and leave tiny trails of revelation behind them.
But move your cursor away, and the grey heals back over. Exponential healing, a slow fade from dream back to office. The mask reasserts itself. Reality wins.
Here is the quiet cruelty: you can’t hold all four open at once. While you’re revealing one dream, the other three are healing. You can see one person’s secret self at a time. The astronaut fades while you look at the rockstar. The diver disappears while you attend to the firefighter. Attention is finite. Daydreams are temporary.
When enough of a panel is eroded, a label fades in — ASTRONAUT, FIREFIGHTER, ROCKSTAR, DIVER — floating over the color in bold type. The childhood declaration. “When I grow up, I want to be…”
Nobody tells you when to stop growing up. Nobody tells you when the dream expires.
The Tech
Multi-Pass FBO Pipeline. Three shader passes per frame: brush stamp, heal, composite. Two RGBA8 framebuffer objects ping-pong the mask state between passes. The mask is a single-channel value in the R component — 1.0 means fully office (grey reality), 0.0 means fully dream (color). The composite shader reads the mask and mixes between the two textures per pixel.
Liquid Brush Erosion. When the cursor is inside a panel, six overlapping Gaussian stamps are placed around the cursor position with random angular offset and distance. Each stamp erodes the mask toward 0.0 with a soft falloff: exp(-d*d / (r*r * 0.5)). Noise perturbation (hash(uv * 50 + center * 10 + seed) * 0.3) breaks up the circular shape into organic edges. Brush radius scales dynamically with cursor speed — faster movement means a wider brush.
Drip Particles. Fast cursor movement spawns drip particles that fall under gravity within their panel. Each drip is a tiny brush stamp (radius 0.008) that continues eroding the mask as it falls, leaving trails of revealed dream beneath it. Drips are clipped to panel bounds and fade over time.
Self-Healing Mask. The heal shader lerps each pixel’s mask value back toward 1.0 (office) at a configurable rate. Healing only activates per-panel — if the cursor is currently in panel 2, panels 0, 1, and 3 heal while panel 2 stays eroded. A quarter-second delay prevents healing from fighting the brush during active painting.
AI-Generated Image Pairs. All 8 images are generated with FAL.AI through a three-step pipeline. Step one: flux-realism generates the office headshots — grey suits, fluorescent lighting, neutral expressions. Step two: flux-general with depth ControlNet generates dream base portraits using each office headshot as a depth reference (conditioning scale 0.3), preserving the exact head angle and body position while replacing the costume and background — astronaut spacesuit in deep space, firefighter turnout gear in firelight, rockstar leather jacket under concert spots, marine biologist wetsuit underwater. Step three: fal-ai/face-swap transplants each office worker’s face onto their corresponding dream portrait, ensuring the same person appears in both layers. The 8 final images are loaded as WebGL textures and composited per-pixel based on the mask.
Panel Layout. The 2x2 grid is computed in JavaScript and passed to shaders as UV-space bounds arrays. Panels have portrait aspect ratio (1:1.15), centered in the viewport with a title area above. CSS-positioned labels sit on a transparent HTML layer above the WebGL canvas, toggled by sampling the mask at panel centers every 10 frames.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.