Page Spec - Voxel Cutaway World Generator

Version: 0.2.0
Date: 2026-03-08
Author: Rens Roosloot / Codex collaboration

1. Purpose

This document defines the intended page structure, UI layout, and interaction behavior for the standalone Voxel Cutaway World Generator page.

2. Page Goal

The page should communicate one idea immediately:

this is a small procedural world slice floating in space, with both surface and underground visible

The page should feel like an interactive visual object, not a dashboard.

3. Page Sections

Recommended structure:

Hero / intro
Main 3D viewport
Minimal control bar
Short explanatory note

4. Content Structure

4.1 Hero / intro

Contents:

project title
one-line description

Recommended tone:

short
clear
slightly playful

Example direction:

Voxel Cutaway World
A floating slice of a procedural world. Regenerate it, rotate it, and look below the surface.

4.2 3D viewport

Requirements:

largest visual region on the page
centered and prominent
enough height on desktop and mobile
chunk visible without immediate user interaction

4.3 Control bar

Recommended controls:

Regenerate
Day / Night
optional Seed

Control bar rules:

compact
horizontally arranged on desktop
stacked or wrapped on small mobile screens
always readable against the page background

4.4 Explanatory note

Short supporting copy only.

Purpose:

explain that the visible sides are a cutaway into underground layers
hint that worlds are procedurally generated from a seed

5. UI Wireframe

Recommended wireframe:

+------------------------------------------------------+
| Title                                                |
| One-line description                                 |
|                                                      |
|                [ Large 3D viewport ]                 |
|                                                      |
| [ Regenerate ] [ Day/Night ] [ Seed: 48192 ]         |
|                                                      |
| A floating cutout of a larger procedural world.      |
+------------------------------------------------------+

Mobile direction:

+----------------------------------+
| Title                            |
| One-line description             |
|                                  |
|       [ 3D viewport ]            |
|                                  |
| [ Regenerate ] [ Day/Night ]     |
| [ Seed: 48192 ]                  |
|                                  |
| Short explanatory note           |
+----------------------------------+

6. Interaction Behavior

6.1 On load

page loads with one pre-generated chunk
default camera shows top and two sides
controls are visible without scrolling on typical desktop screens

6.2 Regenerate

creates a new seeded world
replaces the current chunk cleanly
retains camera framing unless a reset is needed

6.3 Theme toggle

switches between day and night mood
updates lighting and background
should not re-generate the world

6.4 Seed behavior

If seed is visible in MVP:

seed can be displayed as a value only, or
seed can be editable with a simple apply/generate action

Recommendation:

display seed first
editable seed can remain optional until regeneration and rendering are stable

7. Layout Rules

the viewport is the dominant element
UI should not compete visually with the chunk
spacing should remain airy and readable
controls should use existing button conventions where appropriate
all text should be available in Dutch and English

8. Visual Rules

keep the background subtle and atmospheric
avoid cluttered side panels
avoid exposing internal debug values in the user UI
use motion sparingly and only when it improves presentation
respect prefers-reduced-motion

9. Acceptance Criteria

PS-01: The page communicates the concept without a long explanation.
PS-02: The viewport is the primary visual focus.
PS-03: Controls remain minimal and readable on desktop and mobile.
PS-04: The page layout does not feel like a tool dashboard.
PS-05: Day and night presentation both remain legible.

Voxel Page Spec