misty-hey is a playable voxel sandbox game built as a 1-1 clone of Minecraft. The product intent, taken directly from the authoritative requirement thread, is threefold and non-negotiable:
The audience is gaming-native players who already know Minecraft's textures, HUD, hotbar, and inventory, and who expect fidelity rather than a reinterpretation. The emotional register is playful, tactile, toy-like, and nostalgic: this is not an enterprise tool, it is a world you enter and manipulate.
misty-hey is delivered as a browser-playable voxel game with a custom first-party UI. The current delivery consists of two application-owned surfaces:
The single active human actor is the Player. There are no other accepted human personas. The game world itself, its terrain generation, mobs, physics, and simulation are system processes that support the player's interaction but are not human actors.
Delivery ownership. Both accepted surfaces are owned by the application and are reachable without an account. The source establishes no account, login, profile, or identity requirement, and none is indispensable: the accepted journeys are a single-player sandbox experience where the player's world state lives in the game session and the local world, not behind a private account boundary. Access to both Landing and Game is therefore anonymous and open, exactly as the page contract states.
Current boundary. The current product is the playable game itself: the voxel world, its visual fidelity to Minecraft, and its mechanics. Everything the player does — entering the world, mining, placing, crafting, surviving — happens inside the two accepted surfaces.
Future boundary. No future-horizon requirements were stated in the authoritative thread. Anything not named in the accepted requirements (multiplayer servers, account systems, marketplaces, mod distribution, or other adjacent platform capabilities) is out of scope for the current generation and is not implemented.
v1.0 — seed 42069 sits bottom-centre in VT323 12px. The scene is the content; there are no feature cards, no pricing, no testimonials.#5B8731 with a 2px inset border — sits bottom-right. Activating it begins play and transitions into the Game surface.#FF5555) above it, 10 hunger drumsticks (#FFAA00), a hot pink (#FF55FF) XP bar that fills as the player mines, a pixel-perfect crosshair (a 2px white plus sign with a 1px black outline) dead-centre at all times, a minimap top-right, and a chat box bottom-left in VT323 14px with a dark translucent background. The inventory screen is a full-screen modal with a 9×3 grid of 40×40px slots, each with a 2px inset border, and a 3×3 crafting grid to the right that snaps items into place with a click.MistyHey joined the game in white, player messages in yellow); read health, hunger, and XP state; read the minimap; manage inventory contents.#5B8731, dirt #8B5A2B, stone #7A7A7A, water and sky #79A6FF), the 16×16 texture atlas, blocks and items, the player's inventory and hotbar, the crafting grid and its recipes, health, hunger, experience and level, mobs (including the pig), day/night cycle, water and lava, block-break particles, and the chat log.FR-1 — Playable voxel sandbox game (explicit) As a Player, I should enter and play a voxel sandbox game, so that I can explore and manipulate a block world.
FR-2 — Visual fidelity to Minecraft (explicit) As a Player, I should see a world that looks exactly like Minecraft, so that the experience matches the game I already know.
#79A6FF to #B3D9FF with a blocky sun and moon; flat white voxel cloud planes; a first-person camera; and a HUD matching Minecraft's layout and styling.FR-3 — All of Minecraft's mechanics (explicit) As a Player, I should use the full set of Minecraft's mechanics, so that the clone is a true 1-1 experience.
FR-4 — First-person block-break and block-place loop (explicit) As a Player, I should break and place blocks in first person, so that I can shape the world.
FR-5 — Hotbar and inventory management (explicit) As a Player, I should manage items in a 9-slot hotbar and a 9×3 inventory grid, so that I can carry and select what I use.
FR-6 — Crafting grid (explicit) As a Player, I should craft items in a 3×3 crafting grid, so that I can turn materials into tools, blocks, and other items.
FR-7 — Survival HUD: health, hunger, and experience (explicit) As a Player, I should see and be affected by health, hunger, and experience, so that survival has stakes and progress is visible.
#FF5555) and 10 hunger drumsticks (#FFAA00) above the hotbar reflect current state, and the hot pink (#FF55FF) XP bar fills as the player mines.FR-8 — Chat and system messages (explicit) As a Player, I should see chat and system messages, so that I know what is happening in the world.
MistyHey joined the game in white and player messages in yellow.FR-9 — Minimap and world orientation (explicit) As a Player, I should see a minimap, so that I can orient myself in the world.
FR-10 — Mobs and world simulation (explicit) As a Player, I should encounter mobs and a living world, so that the sandbox behaves like Minecraft.
Product context. The Player is the single active human actor in misty-hey. They are gaming-native and already know Minecraft's textures, HUD, hotbar, and inventory. They arrive at the Landing surface, see a live orbiting voxel diorama, and expect that clicking into it will put them in a world that behaves and looks like the game they know.
Primary goal. To enter a voxel world and play a 1-1 Minecraft experience — one that looks exactly like Minecraft and includes all of its mechanics.
Distinct accepted responsibilities.
Relevant inputs and decisions. Which block to target and whether to break or place it; which hotbar slot to select; which items to move in the inventory; which recipe to arrange in the crafting grid; when to eat and when to fight or avoid a mob.
Interactions with other accepted participants. The Player is the only accepted human participant. Their counterparties are system processes — terrain generation, mob simulation, physics, and the world's day/night and fluid systems — which respond to the Player's actions and produce the observable results the Player sees.
Observable success. The Player moves through a world that looks exactly like Minecraft, breaks and places blocks with particle and snap feedback, crafts in the grid, sees health, hunger, and XP update in the HUD, and can keep playing without the experience breaking.
v1.0 — seed 42069 bottom-centre.MistyHey joined the game in white; player messages appear in yellow.The creative direction is authoritative for this section. The muse is Bruno Simon, whose language is literally "playable worlds": low-poly 3D scenes you explore, toy-like physics, joyful discovery, and a 3D scene as the page itself. The headline idea is that the world IS the hero — the first screen is a live, orbiting 3D voxel island rendered in WebGL, not a screenshot, not a video, an actual playable scene you can click into.
Color tokens (dark mode).
| Role | Hex | Use |
|---|---|---|
| Background | #1A1A1A | The dark void of the game viewport |
| Surface | #2B2B2B | Dark grey UI panels |
| Text | #F2F2F2 | Primary readable text |
| Primary | #5B8731 | Grass green; the PLAY button |
| Accent | #FF55FF | Hot pink XP/level accent, used sparingly like Minecraft's own XP bar |
| Muted | #7A7A7A | Stone grey; anchors UI chrome |
| Sky blue | #79A6FF | Reserved for the skybox and water |
| Dirt brown | #8B5A2B | Dominant world colour alongside grass green |
| Health red | #FF5555 | HUD hearts only |
| Hunger orange | #FFAA00 | HUD hunger drumsticks only |
The background is the dark void of the game viewport; UI surfaces are dark grey panels with 1px light borders. Sky blue #79A6FF is reserved for the skybox and water; grass green #5B8731 and dirt brown #8B5A2B are the dominant world colours; stone grey #7A7A7A anchors UI chrome. Health red and hunger orange are used only in the HUD.
Typography. Headings use Silkscreen — all-caps pixel display, 2px blocky rendering, tight letter-spacing — for the game title and HUD labels. Body copy uses VT323, monospace terminal-style at generous size for readability. The scale is a 1.25 modular scale: 64/48/32/24/16/12. HUD labels sit at 12px, menu headings at 32px, and the landing hero title at 64px mobile to 128px desktop.
Shape language. Sharp 90-degree corners everywhere — no border-radius, no soft shadows. Blocks are literal cubes. Buttons are flat rectangles with 2px inset borders (top/left light, bottom/right dark) to mimic Minecraft's own GUI. Panels are dark grey with a 2px lighter border. The hotbar is a row of 40×40px squares, each a flat slot with a 2px border. No rounded corners anywhere except the circular crosshair and the compass.
Layout. A full-viewport 3D canvas is the page. The HUD is absolutely positioned: hotbar bottom-centre, health/hunger above it, crosshair dead-centre, minimap top-right, chat bottom-left. The landing page is a single full-bleed scene with the title block bottom-left, a PLAY button bottom-right, and a version/seed footer bottom-centre. The inventory screen is a modal grid overlay, 9×3 slots, with the crafting grid to the right. No cards, no grid of features — the world is the content.
Imagery. Low-poly voxel terrain generated procedurally — no photography, no illustrations. Every surface is a 16×16 pixel texture atlas rendered on cube faces. The skybox is a gradient from #79A6FF to #B3D9FF with a blocky sun and moon. Clouds are flat white voxel planes. The only "imagery" is the world itself, plus pixel-art mob sprites and item icons drawn from the atlas.
Readable text and controls. Headlines, wordmarks, labels, numbers, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Imagery, decoration, and motion follow the creative direction and may be cropped, bled off an edge, rotated, overlapped, or cut as the direction asks, as long as they cover no readable text or control. With prefers-reduced-motion, a usable static arrangement is provided.
The world is the hero. The public entry is not a marketing page — it is a live, orbiting 3D voxel island rendered in WebGL. A small floating island with a grass top, dirt sides, a single oak tree, a water pool, and a pig standing on the edge sits against a skybox gradient from #79A6FF to #B3D9FF, with a blocky sun and moon and flat white voxel cloud planes drifting past. The camera slowly orbits the island at a 15-degree downward angle, so the first thing the Player sees is the game's own visual grammar in motion.
The title MISTY HEY is rendered in Silkscreen, 64px on mobile to 128px on desktop, bottom-left, in white with a 2px dark drop-shadow, sitting over the sky. A PLAY button — flat green #5B8731 with a 2px inset border — sits bottom-right. A version tag v1.0 — seed 42069 sits bottom-centre in VT323 12px. There are no gradient blobs, no centred headline, no blue CTA. The island is clickable: clicking it dives the camera into first-person and fades in the HUD, carrying the Player straight into the Game surface. The concept recomposes only accepted content, states, and controls — it introduces no new behaviour, page, or destination.
Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: webgl
Landing Hero Motion Brief. The focal subject is the live orbiting voxel island — grass top, dirt sides, a single oak tree, a water pool, and a pig on the edge — rendered in real-time WebGL against the skybox gradient. The input→transformation→outcome thesis: the camera's slow orbit presents the world as a playable object; on click, the camera dives into first-person and the HUD fades in, transforming the orbiting diorama into the world the Player now stands in. The motion vocabulary is physics-driven and playful — block break particles, block place snap, camera head-bob, water flow, lava bubbles, mob idle animations — all frame-based and snappy, never eased with cubic-bezier curves. The composed first frame shows the island centred at a 15-degree downward angle, the title bottom-left, the PLAY button bottom-right, and the version tag bottom-centre, with the sky gradient and voxel clouds behind. The reduced-motion state presents the same island as a still composed frame with the title, PLAY control, and version tag fully readable and inside the viewport, and the entry path into the Game surface intact.
Landing Hero 3D Scene Brief — DIRECTION-DERIVED. The direction's hero dimensionality is webgl, so the hero is a crafted real-time object: a compact voxel diorama — a small floating island with a grass top, dirt sides, a single oak tree, a water pool, and a pig standing on the edge — built from the 16×16 texture atlas on cube faces, lit against a #79A6FF to #B3D9FF skybox with a blocky sun and moon and flat white voxel cloud planes. The scene shows the product's defining state: a Minecraft-like world, live and manipulable, orbiting slowly until the Player clicks into it.
NFR-1 — Visual fidelity is a hard constraint (explicit) The visual appearance must match Minecraft exactly. This governs the texture atlas, block rendering, skybox, HUD layout and styling, and the overall look of the world. Rationale: the authoritative thread states the clone must look exactly like Minecraft.
NFR-2 — Mechanical completeness is a hard constraint (explicit) Mechanics must cover all of Minecraft's mechanics (1-1 clone). Rationale: the authoritative thread states the clone must include all of Minecraft's mechanics.
NFR-3 — Real-time rendering performance (required_inference) The world and HUD must render in real time at a playable frame rate, since the accepted behaviour is a first-person game with continuous motion, block interaction, and mob animation. Rationale: a playable voxel game is not usable without real-time rendering.
NFR-4 — Readable text and controls at every viewport (explicit) Headlines, wordmarks, labels, numbers, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, and no other element covers any part of them. Rationale: stated in the creative direction's readability rule.
NFR-5 — Reduced-motion support (explicit)
With prefers-reduced-motion, a usable static arrangement is provided so that the hero and any moving content remain usable. Rationale: stated in the creative direction's readability rule.
NFR-6 — Anonymous access (explicit)
Both accepted surfaces are reachable without an account. Rationale: the page contract assigns access_requirement: none to both Landing and Game, and no account requirement appears in the authoritative thread.
No source-specified technology choices conflict with these; the stack is the practical set needed to deliver the accepted behaviour.
Assumptions.
Constraints.
#FF55FF) experience bar that fills as the Player mines.#79A6FF to #B3D9FF with a blocky sun and moon.No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No comments yet. Be the first!