System Requirements Document for underground-house

1. Introduction

underground-house is a kid-friendly, cinematic 3D animation experience: a small, cozy underground house is built in sequence inside a soft brown soil cutaway, presented as a real-time, playable toy world rather than a flat film page. The product delivers one crafted, high-quality 3D animated sequence in which a small, cute shovel digs soft brown soil, wooden walls are placed, and tiny colorful furniture is arranged inside — all under warm, magical lighting, in a colorful, bright, friendly children's-cartoon style, at a 4k quality target with smooth motion.

The audience is children and their grown-ups watching together, plus animation-curious adults. The experience is designed to be delighted in, safe, wonder-struck, and tactile — a toy box you are allowed to reach into, not a film you sit still for. The animation is the product; the interface exists only to present it, let the viewer start it, and let the viewer move through its three chapters.

2. System Overview

The current product is a two-destination, first-party web experience:

• Landing — an anonymous public entry surface that introduces the cute underground-house animation and directs the viewer to watch it.
• Animation Player — an anonymous surface that presents the finished 4k animation, showing digging, wall placement, and furniture arrangement in sequence.

Both destinations are owned by the application and require no account. The single accepted active human actor is the Animation Viewer, who plays and enjoys the finished kid-friendly animation. There is no account creation, no sign-in, no saved profile, and no differentiated permissions — the animation is the same for every viewer, and nothing durable is bound to a viewer identity.

The defining visual and behavioral commitment is that the 3D scene is the page: a full-viewport low-poly cutaway diorama of the underground house under a cream sky, with a minimal floating HUD of rounded labels instead of a navigation bar. The shovel is an interactive mascot, the three-chapter rail (Dig / Walls / Furnish) both scrubs the animation and acts as the site's navigation, and section transitions are camera moves rather than scroll jumps.

Narrow exclusions. This document does not add adjacent capabilities. There is no user-generated content, no upload, no commenting, no sharing or social feed, no account management, no analytics dashboard, no e-commerce, no multi-language content authoring, and no admin or moderation surface. The animation itself is a fixed, authored sequence; the viewer can control playback and chapter position but cannot alter the house, the props, or the sequence of construction.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The animation experience is delivered entirely as a first-party application surface. The application owns the Landing and Animation Player destinations, the real-time 3D scene, the chapter rail, and the playback controls. No provider-owned or external destination is required for the accepted behavior; there is no third-party video host, no external gallery, and no outbound handoff in the current scope.

Access ownership. Both destinations are anonymous and publicly reachable. The accepted outcome — watching a short, cute, cinematic 3D animated sequence — creates no durable relationship, obligation, entitlement, value transfer, or commitment that must remain bound to a particular viewer. Because nothing must be privately owned or resumed by a specific person, application-owned identity is not required and is not introduced. There is no first-use identity establishment, no returning verification, and no protected destination in the current scope.

Current versus future boundary. Everything in this document is current: the two destinations, the three-chapter sequence, the interactive shovel mascot, the scrub and play/pause controls, the orbitable diorama, and the camera-move section transitions. No future-horizon requirements were accepted in the authoritative thread; the future section is therefore intentionally empty of commitments and records only that nothing beyond the current scope has been accepted.

2b. Source Content Inventory

No reference directive in this project declares content_source authority, so no source content inventory is included.

2c. Page Content and Component Coverage

Landing

Information and state. The Landing presents the product's first impression: a full-bleed real-time 3D cutaway diorama of the underground house under a cream sky, with the oversized headline "A cozy house is being built underground" stacked flush-left across the cream sky band, a small teal HUD label reading "Chapter 01 — Digging" above it, and a single coral capsule control labeled "Watch it build" pinned bottom-centre over the soil. The shovel is mid-scoop at the left trench edge, throwing a small arc of soil crumbs. The page holds no account state, no viewer-specific state, and no data beyond the scene and its labels.

Primary action. Start watching the animation — the "Watch it build" capsule takes the viewer into the Animation Player at the beginning of the sequence.

Supporting actions. Orbit the diorama by dragging, to inspect the cutaway from another angle. Hover or tap the shovel mascot to make it scoop and toss a small arc of soil crumbs. Scroll to re-frame the same diorama through camera moves (trench level, wall level, interior level) rather than jumping to new pages.

Domain entities. The underground house (half-built wooden structure with a rounded doorway), the soil block with its stepped trench, the cute shovel, the hanging lanterns, the tiny colorful furniture props (coral armchair, teal rug, lemon lamp, leaf-green plant), and the three chapters (Dig, Walls, Furnish).

Component responsibilities.

• Diorama scene — renders the full-viewport low-poly cutaway, the cream sky band, the soil block, the half-built house, the lanterns, and the drifting dust motes; owns the slow orbiting crane camera and the scroll-linked re-framing.
• Headline block — renders the oversized Fredoka headline and the teal chapter HUD label over the sky band, kept whole and inside the viewport at every breakpoint.
• Watch-it-build capsule — the single primary control, coral, capsule-shaped, pinned bottom-centre over the soil; navigates to the Animation Player.
• Shovel mascot — the interactive prop at the left trench edge; responds to hover and tap with a scoop and a small arc of soil crumbs.
• Chapter rail — the three-chapter floating rail of chunky rounded chips (Dig / Walls / Furnish) that doubles as the site's navigation; on Landing it presents the chapters and their labels.

States.

• Loading — the diorama and its props stream in; the headline and the "Watch it build" capsule remain readable and usable throughout.
• Empty — not applicable; the Landing always presents the authored scene and its labels.
• Success — the diorama is composed, the headline and HUD label are legible, the shovel is mid-scoop, and the "Watch it build" capsule is available.
• Error — if the real-time scene cannot initialize, the headline, the chapter HUD label, and the "Watch it build" capsule remain whole and readable, and the viewer can still proceed to the Animation Player.
• Recovery — the viewer can retry by reloading, or continue into the Animation Player; no viewer state is lost because none is held.
• Reduced motion — the scene holds a single composed hero frame per chapter and chapters advance by explicit tap on the rail.

Animation Player

Information and state. The Animation Player presents the finished 4k animation at full bleed, keeping the same diorama as the Landing but with playback chrome: a floating chapter rail (Dig / Walls / Furnish) on the right and a chunky play/pause plus scrub capsule along the bottom, with a tabular scene clock. The scene shows the sequence in order — the shovel digging soft brown soil, then wooden walls being placed, then tiny colorful furniture being arranged inside — under warm, magical lantern light.

Primary action. Play and watch the animation through its three chapters.

Supporting actions. Pause and resume playback. Scrub to any position using the spring-eased scrub track, whose filled portion is coral and whose remaining track is soil brown. Select a chapter from the floating rail to jump to Dig, Walls, or Furnish. Orbit the diorama by dragging. Hover or tap the shovel, which reappears as the playhead handle on the scrub bar, to make it scoop and toss a small arc of soil crumbs.

Domain entities. The three chapters (Dig, Walls, Furnish), the scene clock, the playhead (rendered as the shovel), the scrub track, the play/pause control, and the same scene entities as the Landing (house, soil block and trench, shovel, lanterns, furniture props).

Component responsibilities.

• Diorama scene — renders the animation at full bleed with the slow orbiting crane camera that never cuts: it drifts left over the trench, rises to the wall line, then dips inside for the furniture pass.
• Chapter rail — the floating rail of chunky rounded chips (Dig / Walls / Furnish) on the right; selecting a chip scrubs the animation to that chapter.
• Playback capsule — the chunky bottom capsule containing play/pause, the tabular scene clock, and the spring-eased scrub track with its coral filled portion and soil-brown remainder.
• Shovel playhead — the shovel rendered as the scrub handle; hovering or tapping it triggers the scoop-and-toss gesture.
• Lantern light and dust — the warm magical bloom that pulses gently and the drifting dust motes that accompany the scene.

States.

• Loading — the animation and its props stream in; the chapter rail, the play/pause control, and the scene clock remain readable and usable.
• Empty — not applicable; the Player always presents the authored sequence.
• Success — the sequence plays smoothly through Dig, Walls, and Furnish with warm magical lighting, and the viewer reaches the end of the build.
• Error — if the real-time scene cannot initialize or playback stalls, the chapter rail, the play/pause control, the scene clock, and the scrub track remain whole and readable so the viewer can retry or reposition.
• Recovery — the viewer can retry playback, scrub to another position, or select a chapter to resume from a known point.
• Reduced motion — the scene holds a single composed hero frame per chapter; chapters advance by explicit tap on the rail, and the scrub bar remains fully usable.

3. Functional Requirements

FR-1 — Watch the finished animation. As an Animation Viewer, I should be able to play the finished cute, cinematic, high-quality 3D animation of a small, cozy underground house being built, so that I can enjoy the complete sequence.

• Provenance: explicit.
• Lifecycle: initiated by the Animation Viewer on the Animation Player; input is the play action; observable result is the animation playing through its sequence; access state is anonymous and public; material failure is the scene failing to initialize or playback stalling, recovered by retrying playback or scrubbing to a known position; continuation is watching through to the end of the build.
• Acceptance: the animation plays as a continuous, smooth-motion sequence of the underground house being built.

FR-2 — See the colorful, bright, friendly children's-cartoon style. As an Animation Viewer, I should see the animation rendered in a colorful, bright, and friendly style like a children's cartoon, so that the experience feels warm and approachable.

• Provenance: explicit.
• Lifecycle: presented by the application on both Landing and Animation Player; observable result is the scene's saturated toy palette and rounded, friendly forms; access state is anonymous and public; failure is the scene not rendering, recovered by retry; continuation is the same viewing session.
• Acceptance: the rendered scene reads as colorful, bright, and friendly, with no austere, dark, or high-contrast editorial treatment.

FR-3 — See the shovel dig soft brown soil. As an Animation Viewer, I should see a small, cute shovel digging soft brown soil as the first part of the sequence, so that the build begins with the digging chapter.

• Provenance: explicit.
• Lifecycle: initiated by the Animation Viewer starting or scrubbing to the Dig chapter; observable result is the cute shovel scooping with an arc while soil crumbs tumble and settle with toy gravity; access state is anonymous and public; failure is the chapter not rendering, recovered by retrying or re-selecting the chapter; continuation is the Walls chapter.
• Acceptance: the Dig chapter shows the small, cute shovel digging soft brown soil before any walls are placed.

FR-4 — See wooden walls being placed. As an Animation Viewer, I should see wooden walls being placed after the digging, so that the house takes shape in the accepted order.

• Provenance: explicit.
• Lifecycle: initiated by the Animation Viewer continuing playback or selecting the Walls chapter; observable result is wooden wall panels dropping and clicking into place with a soft squash; access state is anonymous and public; failure is the chapter not rendering, recovered by retrying or re-selecting the chapter; continuation is the Furnish chapter.
• Acceptance: the Walls chapter shows wooden walls being placed after the digging and before the furniture.

FR-5 — See tiny colorful furniture being arranged inside. As an Animation Viewer, I should see tiny colorful furniture being arranged inside the house after the walls are placed, so that the cozy interior is completed.

• Provenance: explicit.
• Lifecycle: initiated by the Animation Viewer continuing playback or selecting the Furnish chapter; observable result is tiny saturated furniture sliding in on eased springs; access state is anonymous and public; failure is the chapter not rendering, recovered by retrying or re-selecting the chapter; continuation is the completed house.
• Acceptance: the Furnish chapter shows tiny colorful furniture being arranged inside the finished wooden walls.

FR-6 — Experience warm, magical lighting. As an Animation Viewer, I should see the scene lit with warm, magical lighting, so that the underground house feels cozy and enchanted.

• Provenance: explicit.
• Lifecycle: presented by the application throughout the sequence; observable result is hanging lanterns rendered as glowing spheres with soft bloom and a gently pulsing lantern light; access state is anonymous and public; failure is the lighting not rendering, recovered by retry; continuation is the same viewing session.
• Acceptance: the scene's lighting reads as warm and magical, with lantern bloom and drifting dust motes.

FR-7 — Experience smooth motion. As an Animation Viewer, I should experience smooth motion throughout the animation, so that the build reads as gentle and pleasant rather than snappy.

• Provenance: explicit.
• Lifecycle: presented by the application throughout the sequence; observable result is long, spring-based easing (600–1200ms) on the shovel scoop, the tumbling soil, the dropping walls, and the sliding furniture, with a slow orbiting crane camera that never cuts; access state is anonymous and public; failure is stuttering or abrupt motion, recovered by retry; continuation is the same viewing session.
• Acceptance: motion reads as smooth and continuous, with no snappy or abrupt transitions.

FR-8 — Watch at the 4k quality target. As an Animation Viewer, I should watch the animation at the 4k quality target, so that the scene is high-quality and detailed.

• Provenance: explicit.
• Lifecycle: presented by the application on the Animation Player; observable result is the animation rendered at the 4k quality target; access state is anonymous and public; failure is the scene rendering below the quality target, recovered by retry; continuation is the same viewing session.
• Acceptance: the animation is delivered at the 4k quality target.

FR-9 — Start watching from the Landing. As an Animation Viewer, I should be able to start watching from the Landing by using the "Watch it build" control, so that I can move from the first impression into the animation.

• Provenance: required_inference.
• Lifecycle: initiated by the Animation Viewer on the Landing; input is the "Watch it build" capsule; observable result is arrival at the Animation Player at the beginning of the sequence; access state is anonymous and public; failure is the control not responding, recovered by retrying; continuation is playback of the animation.
• Acceptance: activating "Watch it build" opens the Animation Player at the start of the sequence.

FR-10 — Move through the three chapters. As an Animation Viewer, I should be able to select Dig, Walls, or Furnish from the floating chapter rail, so that I can jump to the part of the build I want to see.

• Provenance: required_inference.
• Lifecycle: initiated by the Animation Viewer on the Animation Player; input is a chapter chip; observable result is the animation scrubbing to that chapter; access state is anonymous and public; failure is the chip not responding, recovered by retrying or using the scrub track; continuation is playback from the selected chapter.
• Acceptance: selecting a chapter chip moves the animation to that chapter.

FR-11 — Control playback with play/pause and scrub. As an Animation Viewer, I should be able to pause, resume, and scrub the animation using the bottom capsule, so that I can watch at my own pace.

• Provenance: required_inference.
• Lifecycle: initiated by the Animation Viewer on the Animation Player; input is the play/pause control or the scrub track; observable result is playback pausing, resuming, or repositioning, with the tabular scene clock reflecting the position; access state is anonymous and public; failure is the control not responding, recovered by retrying; continuation is playback from the chosen position.
• Acceptance: play/pause and scrub both change playback state, and the scene clock reflects the current position.

FR-12 — Orbit the diorama. As an Animation Viewer, I should be able to orbit the diorama by dragging, so that I can inspect the cutaway from another angle.

• Provenance: required_inference.
• Lifecycle: initiated by the Animation Viewer on either destination; input is a drag; observable result is the diorama re-framing around the scene; access state is anonymous and public; failure is the drag not responding, recovered by retrying; continuation is the same viewing session.
• Acceptance: dragging re-frames the diorama without leaving the current destination.

FR-13 — Interact with the shovel mascot. As an Animation Viewer, I should be able to hover or tap the shovel to make it scoop and toss a small arc of soil crumbs, so that the world feels tactile and playful.

• Provenance: required_inference.
• Lifecycle: initiated by the Animation Viewer on either destination; input is a hover or tap on the shovel; observable result is a scoop and a small arc of soil crumbs; access state is anonymous and public; failure is the gesture not responding, recovered by retrying; continuation is the same viewing session.
• Acceptance: hovering or tapping the shovel produces the scoop-and-toss gesture, and the shovel reappears as the playhead handle on the scrub bar.

FR-14 — Re-frame the scene by scrolling. As an Animation Viewer, I should experience section transitions as camera moves rather than scroll jumps, so that the same diorama is re-framed through trench level, wall level, and interior level.

• Provenance: required_inference.
• Lifecycle: initiated by the Animation Viewer scrolling on the Landing; observable result is the same diorama re-framed rather than new pages appearing; access state is anonymous and public; failure is the re-framing not occurring, recovered by scrolling again or using the chapter rail; continuation is arrival at the next framing.
• Acceptance: scrolling re-frames the existing diorama instead of navigating to a new page.

FR-15 — Watch with reduced motion. As an Animation Viewer who prefers reduced motion, I should get a usable static arrangement, so that I can still watch the build.

• Provenance: required_inference.
• Lifecycle: initiated by the Animation Viewer's reduced-motion preference; observable result is the scene holding a single composed hero frame per chapter, chapters advancing by explicit tap on the rail, and the scrub bar remaining fully usable; access state is anonymous and public; failure is the static arrangement not appearing, recovered by retry; continuation is the same viewing session.
• Acceptance: with reduced motion, each chapter presents a composed static frame, the rail advances chapters on tap, and the scrub bar works.

4. User Personas

Animation Viewer

Product context. The Animation Viewer is the sole accepted active human actor for underground-house. They arrive at an anonymous, publicly reachable experience — most often a child watching alongside a grown-up, or an animation-curious adult — with no account, no profile, and no prior state carried into the session. The product they meet is a real-time, playable toy world: a full-viewport low-poly cutaway diorama of a cozy underground house under a cream sky, with floating rounded labels instead of a navigation bar.

Primary goal. To play and enjoy the finished kid-friendly animation — a complete, pleasant viewing of the sequence in which a small, cute shovel digs soft brown soil, wooden walls are placed, and tiny colorful furniture is arranged inside, all under warm, magical lighting with smooth motion.

Distinct accepted responsibilities. The Animation Viewer is the only actor who initiates and controls the experience. Their responsibilities are: starting the animation from the Landing via the "Watch it build" capsule; watching the sequence through its three chapters; selecting Dig, Walls, or Furnish from the floating chapter rail; pausing, resuming, and scrubbing with the bottom capsule and its tabular scene clock; orbiting the diorama by dragging to inspect the cutaway; hovering or tapping the shovel mascot to trigger its scoop-and-toss gesture; scrolling to re-frame the same diorama through trench, wall, and interior levels; and, when they prefer reduced motion, advancing chapters by explicit tap while the scrub bar remains usable.

Relevant inputs and decisions. The viewer's inputs are the "Watch it build" capsule, the chapter chips, the play/pause control, the scrub track, drag gestures on the diorama, hover or tap on the shovel, and scroll. Their decisions are which chapter to watch, whether to pause or scrub, and from which angle to inspect the diorama. No viewer input changes the authored sequence, the house, the props, or the order of construction.

Interactions with other accepted participants. There are none. The Animation Viewer is the only accepted active human actor; the application renders the scene and responds to the viewer's controls, but no other human participant is affected, and no durable state, commitment, decision, or value transfer is produced for anyone else. Watching together with a grown-up is a shared social context, not a second product role.

Observable success. Success is a complete, pleasant viewing of the sequence: the viewer reaches the end of the build having seen the digging, the walls, and the furniture in order, under warm magical light, with smooth motion throughout — and, if they chose to, having orbited the diorama, poked the shovel, and scrubbed to the parts they wanted to see again.

5. Core User Flows

Flow 1 — First arrival and starting the animation

1. The Animation Viewer opens the Landing anonymously. The full-bleed low-poly cutaway diorama is composed under the cream sky, with the oversized headline "A cozy house is being built underground" stacked flush-left across the sky band and the teal HUD label "Chapter 01 — Digging" above it.
2. The viewer sees the half-built wooden house inside the stepped trench, lit by two glowing lanterns, with the cute shovel mid-scoop at the left trench edge throwing a small arc of soil crumbs.
3. The viewer optionally drags the diorama to orbit it and inspect the cutaway from another angle, and optionally hovers or taps the shovel to make it scoop and toss a small arc of soil crumbs.
4. The viewer activates the single coral capsule "Watch it build", pinned bottom-centre over the soil.
5. Observable result: the Animation Player opens at the beginning of the sequence, with the same diorama at full bleed, the floating chapter rail on the right, and the chunky play/pause plus scrub capsule along the bottom.
6. Continuation: the viewer begins watching the Dig chapter.

Failure and recovery: if the real-time scene cannot initialize on the Landing, the headline, the chapter HUD label, and the "Watch it build" capsule remain whole and readable, and the viewer can still proceed to the Animation Player or reload to retry.

Flow 2 — Watching the build through its three chapters

1. The Animation Viewer is on the Animation Player with the sequence at the start.
2. The viewer plays the animation. In the Dig chapter, the small, cute shovel scoops with an arc and soft brown soil crumbs tumble and settle with toy gravity.
3. The camera drifts left over the trench as the Dig chapter completes.
4. Observable result: the sequence advances to the Walls chapter, where wooden wall panels drop and click into place with a soft squash, and the camera rises to the wall line.
5. The sequence advances to the Furnish chapter, where tiny colorful furniture — coral armchair, teal rug, lemon lamp, leaf-green plant — slides in on eased springs, and the camera dips inside for the furniture pass.
6. Observable result: the viewer reaches the end of the build, having seen the digging, the walls, and the furniture in the accepted order, under warm magical lantern light with gently pulsing bloom and drifting dust motes, with smooth 600–1200ms spring-based motion throughout.
7. Continuation: the viewer can replay, scrub back, or select a chapter to watch a part again.

Failure and recovery: if playback stalls or the scene fails to initialize, the chapter rail, the play/pause control, the scene clock, and the scrub track remain whole and readable; the viewer retries playback, scrubs to a known position, or selects a chapter to resume from a known point.

Flow 3 — Navigating by chapter

1. The Animation Viewer is on the Animation Player and wants to see a specific part of the build.
2. The viewer selects a chip from the floating chapter rail — Dig, Walls, or Furnish — rendered as chunky rounded chips on the right.
3. Observable result: the animation scrubs to the selected chapter and the scene clock reflects the new position.
4. Continuation: the viewer watches from that chapter onward, or selects another chapter.

Failure and recovery: if a chip does not respond, the viewer retries or uses the scrub track to reach the same position.

Flow 4 — Controlling playback pace

1. The Animation Viewer is watching the animation and wants to pause, resume, or reposition.
2. The viewer uses the chunky bottom capsule: the play/pause control, or the spring-eased scrub track whose filled portion is coral and whose remaining track is soil brown.
3. Observable result: playback pauses, resumes, or repositions, and the tabular scene clock shows the current position. The shovel appears as the playhead handle on the scrub bar.
4. Continuation: the viewer resumes watching from the chosen position.

Failure and recovery: if a control does not respond, the viewer retries or uses the other control to reach the intended position.

Flow 5 — Playing with the toy world

1. The Animation Viewer is on either destination and wants to poke at the world.
2. The viewer drags the diorama to orbit it, re-framing the cutaway around the scene.
3. The viewer hovers or taps the shovel mascot.
4. Observable result: the shovel scoops and tosses a small arc of soil crumbs, and the diorama holds its new angle.
5. Continuation: the viewer returns to watching, or continues exploring the scene.

Failure and recovery: if a gesture does not respond, the viewer retries; no viewer state is lost because none is held.

Flow 6 — Scrolling through the scene on the Landing

1. The Animation Viewer is on the Landing and scrolls.
2. Observable result: the same diorama is re-framed as a camera move — trench level, then wall level, then interior level — rather than new pages appearing.
3. Continuation: the viewer reaches the framing they want, then starts the animation with "Watch it build" or selects a chapter from the rail.

Failure and recovery: if the re-framing does not occur, the viewer scrolls again or uses the chapter rail to reach the desired part of the build.

Flow 7 — Watching with reduced motion

1. The Animation Viewer has a reduced-motion preference set.
2. The viewer opens the Landing or the Animation Player.
3. Observable result: the scene holds a single composed hero frame per chapter instead of animating.
4. The viewer taps a chip on the chapter rail to advance to the next chapter.
5. Observable result: the composed frame for the selected chapter is shown, and the scrub bar remains fully usable.
6. Continuation: the viewer moves through Dig, Walls, and Furnish at their own pace by explicit tap, and can scrub to any position.

Failure and recovery: if the static arrangement does not appear, the viewer reloads to retry; the chapter rail and scrub bar remain available.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. The muse is Bruno Simon: playful worlds with toy physics and low-poly 3D scenes you explore. The headline idea is a playable toy world after Bruno Simon — the underground house gets built where you point.

Color tokens (light mode).

Rough proportion: 55% cream ground, 20% soil browns, 12% coral, 8% teal, 5% toy accents. Soil browns are used as large flat colour fields, never gradients.

Typography. Headings use Fredoka (SemiBold/Bold) — rounded terminals and a slightly bouncy baseline; sentence case, tight-but-friendly tracking (-0.01em), never all-caps for long lines. Display sizes are big and chunky because they read as toy signage, not editorial type. Body uses Nunito. Scale is a 1.333 modular scale: hero display clamp(44px, 11vw, 128px); section display clamp(30px, 6vw, 56px); subhead clamp(20px, 3vw, 26px); body 17/28; label 14/20 with 0.08em tracking for small caps-ish HUD labels; numerals tabular for the scene clock.

Shape language. Toy-box geometry: chunky rounded rectangles (18–28px radii), capsule buttons, soft offset drop shadows that sit under elements like plastic blocks on a table, and low-poly 3D primitives (box, cylinder, cone) for the house, shovel, and furniture. Hard 90° corners appear only where the soil is cut open — the trench edge is a crisp step, everything man-made is soft.

Layout. The 3D scene is the page: a full-viewport low-poly diorama of the underground house under a cream sky, with a minimal HUD of floating rounded labels rather than a nav bar. The Landing uses one dominant left-of-centre scene with the oversized headline stacked over the sky area and a single capsule "Watch it build" control pinned bottom-centre. The Animation Player keeps the same diorama at full bleed with a floating chapter rail (Dig / Walls / Furnish) on the right and a chunky play/pause plus scrub capsule along the bottom. At 375px the headline wraps to three lines and the chapter rail becomes a horizontal scrollable row of chips above the scrub bar; at 768px the rail moves to the right edge as a vertical stack; at 1280px the diorama widens and the chapter rail floats with generous margin.

Imagery. One crafted low-poly 3D scene rendered in real time: a cross-section diorama where the soil is a soft brown block with a stepped trench, the house is warm wood planks with a rounded doorway, and the furniture is tiny saturated toys (coral armchair, teal rug, lemon lamp, leaf-green plant). No stock photography, no gradient blobs, no flat clip art — every visual is the scene itself or a low-poly prop cut from it. Warm magical light comes from hanging lanterns rendered as glowing spheres with soft bloom, plus a cream sky gradient behind the cutaway.

Avoid. Centred headline + subtext + blue button + gradient blob hero of any kind; flat stock illustration of houses or cartoon clip-art pasted onto a page; dark, austere, or high-contrast editorial treatment; sharp-cornered enterprise cards, hairline data grids, or dashboard tiles; photorealistic textures, film grain, or anything that reads as adult/cinematic-gritty; marquee tickers or bouncy text effects that fight the smooth, gentle motion asked for; any readable text or control placed inside the soil block or cropped by the diorama edge; generic blue/indigo accents or system-ui / Inter / Roboto typography. The generic indigo/blue-on-white SaaS template is forbidden for this project.

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 may be cropped, bled off an edge, rotated, overlapped, or cut exactly as the direction asks, as long as they cover no readable text or control. Moving and scrollable content — including the chapter rail when it becomes a horizontally scrollable row of chips — may cross the viewport or container edge by design, judged by whether it actually moves or scrolls and whether every item becomes fully readable as it passes. With prefers-reduced-motion, the rail wraps into rows or allows horizontal scrolling so each chip can be brought fully into view.

7. Signature Design Concept

The public entry is a single real-time low-poly cutaway diorama of the underground house that the visitor can orbit by dragging, with the oversized headline stacked over the cream sky band rather than centred on a card.

Composed first frame. A soft brown soil block occupies the lower two-thirds of the viewport with a stepped trench cut into it, and the half-built wooden house sits inside, lit by two glowing lanterns. The oversized Fredoka headline "A cozy house is being built underground" is stacked flush-left across the cream sky band at clamp(44px, 11vw, 128px), spanning roughly 9 of 12 columns, with a small teal HUD label "Chapter 01 — Digging" above it. The single coral capsule "Watch it build" sits bottom-centre over the soil, and the cute shovel is mid-scoop at the left trench edge, throwing a small arc of soil crumbs. Nothing is centred-and-blue; the dominant element is the diorama itself, with type as toy signage over the sky.

Signature moves.

• The hero is a single real-time low-poly cutaway diorama of the underground house that the visitor can orbit by dragging, with the oversized headline stacked over the cream sky band rather than centred on a card.
• A three-chapter floating rail (Dig / Walls / Furnish) rendered as chunky rounded chips that both scrub the animation and act as the site's navigation — there is no traditional top nav bar.
• The shovel is an interactive mascot: hovering or tapping it makes it scoop and toss a small arc of soil crumbs, and it re-appears as the playhead handle on the scrub bar.
• A chunky bottom capsule control with a tabular scene clock and a spring-eased scrub track whose filled portion is coral and whose remaining track is soil brown.
• Section transitions are camera moves, not scroll jumps: as the visitor scrolls, the same diorama is re-framed (trench level, wall level, interior level) instead of new pages appearing.

This concept only recomposes accepted content, states, and controls — the diorama, the headline, the chapter HUD label, the "Watch it build" capsule, the shovel mascot, the chapter rail, and the playback capsule. It introduces no new behaviour, page, or destination.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: webgl

Landing Hero Motion Brief

Focal subject. The low-poly cutaway diorama of the underground house: the soft brown soil block with its stepped trench, the half-built wooden house with its rounded doorway, the two glowing lanterns, and the cute shovel mid-scoop at the left trench edge.

Input → transformation → outcome thesis. As the visitor drags, the diorama orbits around the scene, re-framing the cutaway from a new angle; as the visitor scrolls, the same diorama is re-framed through trench level, wall level, and interior level as a camera move rather than a page jump; as the visitor hovers or taps the shovel, it scoops and tosses a small arc of soil crumbs. The outcome is a toy world the visitor can reach into, with the oversized headline held whole over the cream sky band throughout.

Motion vocabulary. Physics-driven and smooth: the shovel scoops with an arc, soil crumbs tumble and settle with toy gravity, wooden wall panels drop and click into place with a soft squash, furniture slides in on eased springs. The camera is a slow orbiting crane that never cuts — it drifts left over the trench, rises to the wall line, then dips inside for the furniture pass. Lantern light bloom pulses gently; dust motes drift. All easing is long (600–1200ms) and spring-based so motion reads as smooth, never snappy.

Composed first frame. The soil block fills the lower two-thirds of the viewport with the stepped trench cut into it; the half-built house sits inside under two glowing lanterns; the headline is stacked flush-left across the cream sky band with the teal "Chapter 01 — Digging" HUD label above it; the coral "Watch it build" capsule is pinned bottom-centre over the soil; the shovel is mid-scoop at the left trench edge with a small arc of soil crumbs in the air.

Reduced-motion state. With prefers-reduced-motion, the scene holds a single composed hero frame per chapter and the chapters advance by explicit user tap on the rail, with the scrub bar still fully usable. The chapter rail wraps into rows or allows horizontal scrolling so each chip can be brought fully into view.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED

The direction's hero dimensionality is webgl, so a real-time 3D hero is expected. One crafted real-time object: a low-poly cross-section diorama of the underground house — a soft brown soil block with a crisp stepped trench edge, a half-built warm-wood house with a rounded doorway inside it, two hanging lanterns rendered as glowing spheres with soft bloom, and a small cute shovel resting mid-scoop at the left trench edge. The scene shows the product's defining state: the cozy underground house being built, in the moment between digging and wall placement. It is orbitable by drag, re-framed by scroll through trench, wall, and interior levels, and lit by warm magical lantern light with gently drifting dust motes. All readable text and controls — the headline, the chapter HUD label, and the "Watch it build" capsule — sit over the cream sky band and outside the soil block, whole and uncropped at every viewport.

9. Non-Functional Requirements

NFR-1 — Style constraint. The style must be colorful, bright, and friendly, like a children's cartoon. Provenance: explicit. Rationale: explicit hard constraint in the authoritative user evidence; the emotional register is delighted, safe, and wonder-struck.

NFR-2 — Aesthetic constraint. The aesthetic must be kid-friendly. Provenance: explicit. Rationale: explicit hard constraint; the audience is children and their grown-ups watching together.

NFR-3 — Lighting constraint. The lighting must be warm and magical. Provenance: explicit. Rationale: explicit hard constraint; warm magical light comes from hanging lanterns rendered as glowing spheres with soft bloom.

NFR-4 — Motion constraint. Motion must be smooth. Provenance: explicit. Rationale: explicit hard constraint; all easing is long (600–1200ms) and spring-based so motion reads as smooth, never snappy.

NFR-5 — Quality target. The quality target is 4k. Provenance: explicit. Rationale: explicit hard constraint in the authoritative user evidence.

NFR-6 — Readable text and controls stay whole. Headlines, wordmarks, labels, numbers, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering any part of them. Provenance: explicit (creative direction). Rationale: the direction's readability rule takes precedence over any cropping gesture; imagery and decoration may be cropped instead.

NFR-7 — Reduced-motion support. With prefers-reduced-motion, the scene holds a single composed hero frame per chapter, chapters advance by explicit user tap on the rail, and the scrub bar remains fully usable; the chapter rail wraps into rows or allows horizontal scrolling so each chip can be brought fully into view. Provenance: explicit (creative direction). Rationale: the direction specifies a usable static arrangement.

NFR-8 — No traditional top nav bar. The three-chapter floating rail (Dig / Walls / Furnish) both scrubs the animation and acts as the site's navigation; there is no traditional top nav bar. Provenance: explicit (creative direction). Rationale: the direction's signature move defines the navigation model.

NFR-9 — Anonymous, publicly reachable destinations. Both Landing and Animation Player are reachable without an account, and no durable viewer-specific state is created or resumed. Provenance: required_inference. Rationale: the accepted outcome creates no durable relationship, obligation, entitlement, value transfer, or commitment that must remain bound to a particular viewer, so application-owned identity is not required.

NFR-10 — Real-time rendering. The scene is rendered in real time as a low-poly 3D diorama rather than delivered as flat imagery or stock photography. Provenance: explicit (creative direction). Rationale: the direction specifies one crafted low-poly 3D scene rendered in real time, with no stock photography, gradient blobs, or flat clip art.

10. Tech Stack

• React — the application framework for the two first-party destinations (Landing, Animation Player).
• React Three Fiber / WebGL — the real-time 3D rendering layer for the low-poly cutaway diorama, the orbitable camera, the lantern bloom, and the drifting dust motes. The creative direction specifies webgl hero dimensionality and a real-time rendered scene.
• CSS with clamp() type scaling and prefers-reduced-motion media queries — the responsive type scale, the toy-box shape language, and the reduced-motion static arrangement.
• Fredoka and Nunito — the heading and body typefaces specified by the creative direction.

No backend, database, or deployment infrastructure is required by the accepted current scope: the experience is a fixed, authored animation with no durable viewer state, no accounts, and no server-side data. No technology choice beyond the above is specified by the user.

11. Assumptions and Constraints

Assumptions.

• The animation is a fixed, authored sequence. The viewer can control playback and chapter position but cannot alter the house, the props, or the order of construction. (Assumption — consistent with the accepted requirement that the sequence is digging, then walls, then furniture.)
• The 4k quality target is a rendering and delivery target for the animation; the exact encoding and delivery mechanism are not specified by the user and are left to implementation. (Assumption — the user specified the target, not the pipeline.)
• The three chapters are named Dig, Walls, and Furnish, matching the accepted sequence order. (Assumption — names taken from the creative direction's chapter rail.)
• The shovel mascot's scoop-and-toss gesture is a playful interaction on the diorama and does not change the authored sequence. (Assumption — consistent with the direction's description of the shovel as an interactive mascot.)

Constraints.

• The style must be colorful, bright, and friendly, like a children's cartoon. (Explicit.)
• The aesthetic must be kid-friendly. (Explicit.)
• The lighting must be warm and magical. (Explicit.)
• Motion must be smooth. (Explicit.)
• The quality target is 4k. (Explicit.)
• The sequence order is fixed: the shovel digs soft brown soil, then wooden walls are placed, then tiny colorful furniture is arranged inside. (Explicit.)
• Readable text and controls stay whole at every viewport; imagery and decoration may be cropped instead. (Explicit — creative direction.)
• The generic indigo/blue-on-white SaaS template is forbidden for this project. (Explicit — creative direction.)
• No account, sign-in, or differentiated permissions are introduced; both destinations are anonymous and publicly reachable. (Required inference — no durable viewer-bound state is created by the accepted outcome.)

Future requirements. No future-horizon requirements were accepted in the authoritative thread. Nothing beyond the current scope — the two destinations, the three-chapter sequence, the interactive shovel mascot, the playback controls, the orbitable diorama, and the camera-move section transitions — is committed.

12. Glossary

• Animation Viewer — the sole accepted active human actor; the person who plays and enjoys the finished kid-friendly animation.
• Chapter — one of the three parts of the build sequence: Dig (the shovel digs soft brown soil), Walls (wooden walls are placed), Furnish (tiny colorful furniture is arranged inside).
• Chapter rail — the floating rail of chunky rounded chips (Dig / Walls / Furnish) that both scrubs the animation and acts as the site's navigation.
• Cutaway diorama — the full-viewport low-poly 3D scene showing the underground house in cross-section, with the soil block, the stepped trench, the half-built house, the lanterns, and the props.
• Diorama — see cutaway diorama.
• Landing — the anonymous public entry surface that introduces the animation and directs the viewer to watch it.
• Animation Player — the anonymous surface that presents the finished 4k animation with the chapter rail and playback capsule.
• Playhead — the current position indicator on the scrub track, rendered as the shovel.
• Reduced motion — the prefers-reduced-motion state in which the scene holds a single composed hero frame per chapter, chapters advance by explicit tap on the rail, and the scrub bar remains fully usable.
• Scene clock — the tabular numeral display of the current playback position in the bottom capsule.
• Scrub track — the spring-eased playback track whose filled portion is coral and whose remaining track is soil brown.
• Shovel mascot — the small, cute shovel that digs soft brown soil in the Dig chapter, responds to hover or tap with a scoop-and-toss gesture, and reappears as the playhead handle on the scrub bar.
• Toy gravity — the soft, playful physics with which soil crumbs tumble and settle.
• Watch it build — the single coral capsule control on the Landing that starts the animation.