Volumetric Layer Forge Lite

A depth-aware visual construction tool that preserves AI-generated images as editable layers with prompts, parameters, and Codex-ready file mappings.

Comment

Inspiration

Inspiration

AI image generation is excellent at producing a coherent final image, but that image usually arrives as one flattened result.

The background, atmosphere, subject, interface structure, lighting, particles, and visual effects may all be present, but their construction identities are lost. Editing one part often means regenerating the entire image or manually rebuilding it.

Volumetric Layer Forge Lite began with a simple question:

What if an AI-generated image preserved the editable spatial stack behind it?

Instead of trying to recover layers after generation, the project treats the image as six depth-aware construction layers from the beginning.

What it does

Volumetric Layer Forge Lite represents one final composition as six editable visual layers:

  1. Base Environment
  2. Secondary Depth
  3. Atmosphere
  4. Subject
  5. UI Structure
  6. Glow Particles

Each layer retains its own:

  • identity and visual role
  • visibility and lock state
  • opacity and blend mode
  • depth and thickness
  • position and scale
  • prompt and negative prompt
  • parameters and folder mapping

The Forge workspace keeps four views synchronized:

  • Front Output — the final six-layer composite
  • Depth Stack — an exploded glass-layer view
  • Layer Parameters — live controls for each layer
  • VS Code Mapping — prompt, parameter, metadata, and stack.json documents

The prototype also includes:

  • Hold to Compare
  • Restore Hero Preset
  • layer modification and lock states
  • local project persistence
  • JSON and Markdown document generation
  • Construction Pack export
  • a simulated single-layer regeneration workflow
  • a provider-ready architecture for future image API integration

How we built it

The project was created through an iterative collaboration between Alex, GPT-5.6, and Codex.

Alex originated the concept, drew the first layer-stack sketch, defined the product boundaries, reviewed every iteration, and made the final product decisions.

GPT-5.6 translated the original idea into the six-layer product grammar, system architecture, visual language, interaction model, construction documents, and implementation specifications. It also generated and refined the visual reference assets and reviewed screenshots and demo recordings throughout development.

Codex implemented the working Next.js application, built the React and TypeScript components, created the CSS 3D Depth Stack, synchronized project state across the interface, implemented exports and persistence, fixed layout and ordering issues, and prepared the project for GitHub and Vercel deployment.

The project was not created from one prompt. It emerged through repeated cycles of:

human direction → GPT-5.6 product reasoning → Codex implementation → testing → visual review → correction

Challenges we ran into

The most difficult challenge was preserving the feeling of one coherent image while allowing every visual layer to remain independently editable.

If every layer behaves too independently, the result looks like a collage. If everything is flattened together, the construction structure disappears again.

Other challenges included:

  • keeping six assets aligned inside one shared coordinate system
  • making Depth Stack interaction feel spatial without using a heavy 3D engine
  • keeping layer order consistent across every view and export
  • preventing responsive layouts from cropping the final composition
  • translating visual changes into readable prompt, parameter, and folder documents
  • clearly separating the simulated generation provider from future real API functionality

Accomplishments that we're proud of

The prototype demonstrates that an image can be treated as more than a final visual result.

A user can change one layer and immediately see the effect across:

  • the final composite
  • the spatial stack
  • the parameter inspector
  • the project documents
  • the exported construction structure

We are especially proud that the prototype does not only show a visual concept. It produces a structured, Codex-readable construction artifact.

Every visual decision has an address.

What we learned

We learned that GPT-5.6 and Codex are strongest when they perform different roles.

GPT-5.6 helped define what should be built, why the system should work this way, how the interaction should remain coherent, and where the product boundary should stop.

Codex turned that specification into working software, tested the implementation, repaired layout and state problems, and prepared the result for deployment.

The project also showed that a lightweight Web prototype can communicate a much larger future system without pretending that every future capability is already complete.

What's next

The current generation provider is simulated. No live image-generation API is connected in v0.1.

Future directions may include:

  • an OpenAI image-generation provider
  • masked or regional layer regeneration
  • true transparent-layer generation
  • cross-layer optical reconciliation
  • expanded layer version history
  • image-to-layer reconstruction
  • React, CSS, SVG, and design-system export
  • a private desktop construction environment
  • an AI construction bridge that can inspect and modify approved layers safely

The long-term goal is simple:

AI should not only generate the visible image.
It should preserve the editable construction anatomy behind it.

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for Volumetric Layer Forge Lite

Built With

Share this project:

Updates