monkey-turtle

byOrpiana, Reynier O.

Generate a monkey and turtle running

Landing
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirements Document for monkey-turtle

1. Introduction

monkey-turtle is a single-purpose generative toy delivered as a web page. An anonymous visitor opens the app, presses one control, and watches a low-poly monkey and a low-poly turtle run through a procedurally scrolling jungle. The product intent is joyful, toy-like discovery: the world itself is the hero, the two characters are the only subjects, and the run is real motion in a real space rather than an illustration on a card.

The audience is anyone with a browser and thirty seconds of curiosity — kids, parents, and people sharing a link. There is no account, no dashboard, no configuration, and no utility workflow. The entire product is: open the page, press RUN, watch the monkey and the turtle run.

Page 1 of 27

2. System Overview

The current delivery is a single anonymous, first-party custom page — Landing — that renders a full-bleed real-time low-poly 3D jungle scene and hosts the one primary control that starts the run. The scene is the page: a side-on chase camera at ground level, a scrolling ground plane, three parallax jungle depth layers, and the monkey (coral) and turtle (mint) standing mid-stride at the left third, impatient.

Actors:

  • Visitor (accepted human persona) — the only supported human actor. Opens the page anonymously, presses the run control, watches the run, and may press again.
  • System process (non-persona) — the in-page real-time render and run simulation that advances the characters, spawns dust puffs, scrolls the parallax layers, counts the speed meter, and settles the scene to a still diorama when the run ends.

Accepted behavior in scope: generating a visual output depicting a monkey and a turtle running, presented as a playable low-poly jungle where the two characters actually run.

Narrow exclusions: no accounts, no sign-in, no saved history, no sharing controls, no score persistence, no leaderboards, no skeuomorphic game chrome (health bars, score popups, joystick overlays), no photorealistic or stock imagery of real animals, and no motion that continues after the run ends.

Page 2 of 27

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The product is delivered entirely as a first-party web page. The 3D scene, the characters, the jungle, the HUD, the caption card, and the speed meter are all built and owned by this application. There is no provider-owned surface, no external destination, and no headless-only delivery path: the visitor's whole experience happens inside the Landing page.

Access ownership. Access is anonymous and public. The accepted planning contract records the Landing surface with access_requirement: none, and the accepted persona is a Visitor with no account. Nothing in the accepted behavior requires the application to privately own or resume durable actor-specific state, and no commitment, decision, entitlement, or value transfer must remain bound to a particular participant. Therefore no identity establishment, no sign-in, and no session continuity are introduced. The run is ephemeral by design: it starts on press, plays out, and settles.

Current vs. future boundary. Current scope is exactly the accepted requirement: generate a visual output depicting a monkey and a turtle running, on the anonymous Landing page. Everything else — additional characters, additional scenes, saved runs, sharing, or any account-bound feature — is out of current scope and is not implemented, not planned into current pages, and not part of current acceptance.

2b. Source Content Inventory

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

2c. Page Content and Component Coverage

Page 3 of 27

Landing

The anonymous public entry surface and the only page. It is the world: a full-bleed low-poly jungle canvas at every breakpoint, with a floating HUD over it.

Information and state

  • Scene state: idle (both characters standing mid-stride and impatient at the left third), running (characters accelerating and running, ground scrolling right-to-left, dust puffs spawning, speed meter counting up), settled (run complete, scene still, both characters mid-stride, control reads AGAIN).
  • Run state: elapsed run progress, metres run (lemon speed-meter value), and the one-beat overtake state in which the turtle passes the monkey on a downhill and the meter flips to TURTLE LEADS.
  • Reduced-motion state: static diorama with both characters mid-stride, and a stepped four-pose stride sequence advanced by the same button.
  • Identity state: none. The page is anonymous and holds no visitor-specific durable state.

Primary action

  • The single oversized coral RUN pill with a hard ink offset shadow. It physically depresses 4px on press and triggers the squash-and-stretch launch from both characters. After the run ends it reads AGAIN and starts a fresh run. In reduced-motion mode the same button advances the four hand-posed strides.

Supporting actions and controls

  • None beyond the primary control. There is no secondary navigation, no settings, no character picker, and no share control.
Page 4 of 27

Domain entities

  • Monkey — low-poly character, coral #FF6B4A, long curled tail, long arms, capsule limbs, flat-shaded face.
  • Turtle — low-poly character, mint #3ECF8E, faceted hexagon shell, stubby legs.
  • Jungle — cone trees, box rocks, triangular ferns, flat-shaded with soft directional light and soft contact shadows, arranged in three parallax depth layers.
  • Ground plane — scrolling right-to-left beneath the runners, with a downhill segment that carries the scripted overtake.
  • Dust puffs — lemon #F7D046 particles spawned at each footfall.
  • Speed meter — lemon fill, tabular Baloo 2 numerals, showing metres run.

Component responsibilities

  • Scene canvas — full-bleed WebGL/R3F canvas at every breakpoint; owns the camera, lighting, ground, parallax layers, characters, dust, and the run simulation. The camera is fixed in a side-on chase view and never cuts away.
  • Caption card (top-left, cream #FDF6E3, ink outline) — carries monkey-turtle in Fredoka at clamp(40px, 9vw, 112px) with one line beneath it in Baloo 2 describing the run rather than the app.
  • HUD panel (bottom-left, cream, ink outline, 24px radius) — holds the single primary control.
  • Speed meter (bottom-right) — lemon fill, metres run, and the one-beat TURTLE LEADS flip.
  • Reduced-motion controller — swaps the physics run for the four-pose stepped stride sequence driven by the same button.

Responsive behavior

Page 5 of 27
  • 375px: the HUD collapses to a full-width bottom bar with the pill spanning it; the caption card stacks above the canvas edge.
  • 768px: the HUD floats as a compact panel.
  • 1280px: the canvas breathes with wide margins and the caption sits in the upper-left third.
  • All readable text and controls stay whole and inside their containers and the viewport at every width.

States

  • Loading — the canvas mounts and the low-poly scene builds; the caption card and HUD are present and readable while the scene initializes.
  • Empty — not applicable; the scene always contains the two characters and the jungle.
  • Idle/success-ready — both characters standing mid-stride, control reading RUN.
  • Running — characters accelerating and running, parallax scrolling, dust spawning, meter counting.
  • Success — the run completes, the scene settles to a still diorama, the control reads AGAIN.
  • Error/recovery — if the real-time scene cannot initialize or the render context is lost, the page presents the static diorama arrangement (both characters mid-stride in the jungle) with the control still present and usable, so the visitor can still advance the four-pose stride sequence; the page never presents a blank canvas with no control.
  • Reduced motion — static diorama plus stepped four-pose strides advanced by the same button.
Page 6 of 27

3. Functional Requirements

FR-1 — Generate a visual output depicting a monkey and a turtle running (explicit) As a Visitor, I should be able to generate a visual output depicting a monkey and a turtle running, so that I see the monkey and the turtle actually run.

  • Trigger/input: the Visitor opens the Landing page and presses the primary RUN control.
  • Observable result: the low-poly monkey (coral) and turtle (mint) launch from a standstill with a squash-and-stretch launch and run through the scrolling jungle; the ground scrolls right-to-left beneath them, dust puffs spawn at each footfall, the three parallax jungle layers scroll at different speeds, and the speed meter counts up in metres.
  • Access state: anonymous, no account, no sign-in.
  • Failure/recovery: if the real-time scene cannot run, the page falls back to the static diorama with both characters mid-stride and the control still usable.
  • Continuation: when the run ends the scene settles to a still diorama and the control reads AGAIN, which starts a fresh run.
Page 7 of 27

FR-2 — Watch the monkey and the turtle run as real motion in a real space (explicit) As a Visitor, I should watch the run as real motion in a real space rather than an illustration on a card.

  • Trigger/input: the run started by FR-1.
  • Observable result: a full-bleed real-time low-poly 3D jungle with a side-on chase camera at ground level that never cuts away; the characters' arms and legs cycle on a low-poly rig; easing is spring-like with overshoot on landings and no linear tweens.
  • Access state: anonymous.
  • Failure/recovery: as FR-1.
  • Continuation: the run plays to completion and settles.

FR-3 — See the scripted overtake gag (explicit) As a Visitor, I should see the turtle lag a beat behind the monkey and then overtake it on a downhill.

  • Trigger/input: the run started by FR-1.
  • Observable result: for the first two seconds the turtle lags the monkey; on a downhill the turtle passes the monkey, and the lemon speed meter flips to TURTLE LEADS for one beat before the run ends. This is a small scripted gag, not a loop.
  • Access state: anonymous.
  • Failure/recovery: if the run is interrupted or the scene falls back to the static diorama, the gag is not shown and the visitor can start a fresh run with the same control.
  • Continuation: after the one-beat flip the run ends and the scene settles.
Page 8 of 27

FR-4 — Start another run (explicit) As a Visitor, I should be able to start another run after the first one ends.

  • Trigger/input: the Visitor presses the control, which now reads AGAIN.
  • Observable result: a fresh run begins from the settled diorama with the same launch, run, and overtake behavior.
  • Access state: anonymous.
  • Failure/recovery: as FR-1.
  • Continuation: the run plays to completion and settles again.

FR-5 — Use the toy with reduced motion (explicit) As a Visitor who prefers reduced motion, I should be able to use the toy without continuous animation.

  • Trigger/input: the Visitor's prefers-reduced-motion preference is set, and the Visitor presses the same button.
  • Observable result: the scene renders as a static diorama with both characters mid-stride, and the run becomes a stepped frame-by-frame sequence of four hand-posed strides that the Visitor advances with the same button, with no tweening.
  • Access state: anonymous.
  • Failure/recovery: if the stepped sequence cannot advance, the static diorama remains fully visible and the control remains present.
  • Continuation: the Visitor advances through the four poses and may restart the sequence with the same button.
Page 9 of 27

FR-6 — Read the product identity and the run description on the page (explicit) As a Visitor, I should be able to read what this is while the scene is on screen.

  • Trigger/input: the Visitor opens the Landing page.
  • Observable result: a cream caption card top-left carries monkey-turtle in Fredoka at clamp(40px, 9vw, 112px) with one line beneath it in Baloo 2 describing the run rather than the app; the text stays whole and inside its container and the viewport at 375px, 768px, and 1280px.
  • Access state: anonymous.
  • Failure/recovery: the caption card is present and readable even while the scene is initializing or has fallen back to the static diorama.
  • Continuation: the Visitor reads the caption and presses the control.

FR-7 — Read the speed meter during the run (explicit) As a Visitor, I should be able to read how far the characters have run.

  • Trigger/input: the run started by FR-1.
  • Observable result: a small speed meter bottom-right shows metres run in lemon #F7D046 with tabular Baloo 2 numerals, counting up during the run and flipping to TURTLE LEADS for one beat during the overtake.
  • Access state: anonymous.
  • Failure/recovery: if the run does not start, the meter shows its resting value and remains readable.
  • Continuation: the meter stops when the run ends and resets on the next run.
Page 10 of 27

FR-8 — Have the scene settle when the run ends (explicit) As a Visitor, I should see the scene come to rest when the run is over.

  • Trigger/input: the run reaches its end.
  • Observable result: all motion stops, the scene settles to a still diorama with both characters mid-stride, and the control reads AGAIN.
  • Access state: anonymous.
  • Failure/recovery: if the run is interrupted, the scene settles to the same still diorama.
  • Continuation: the Visitor presses AGAIN to start a fresh run.

4. User Personas

Page 11 of 27

Visitor

Product context. The Visitor arrives at monkey-turtle anonymously, usually from a shared link, with a browser and about thirty seconds of curiosity. They may be a kid, a parent, or anyone who clicked something funny. They have no account, no profile, and no prior state in the product, and they expect to understand the page within a second of it loading.

Primary goal. To see a monkey and a turtle running — a visual output depicting the two characters actually running, not a description of one.

Distinct accepted responsibilities. The Visitor is the sole initiator of the product's only capability. They press the single RUN control to generate the run, watch the monkey and the turtle run through the jungle, watch the turtle lag and then overtake the monkey on the downhill, read the speed meter, and press AGAIN to start another run. If they prefer reduced motion, they advance the four-pose stride sequence with the same button instead.

Relevant inputs and decisions. One decision: press the control or not. One preference that changes the experience: prefers-reduced-motion, which the Visitor sets in their browser rather than in the product. The Visitor supplies no text, no configuration, no character selection, and no data.

Interactions with other accepted participants. The Visitor is the only accepted human participant. The other actor in the experience is the system process that renders and simulates the run; the Visitor initiates it and observes its result. There is no handoff to another human, no counterparty, and no recipient whose state changes.

Page 12 of 27

Observable success. The Visitor sees the monkey and the turtle launch from a standstill, run through a scrolling low-poly jungle with dust at their feet and parallax layers moving behind them, sees the turtle overtake the monkey on the downhill with the meter flipping to TURTLE LEADS, sees the scene settle to a still diorama, and can press AGAIN for another run. In reduced-motion mode, success is advancing through the four hand-posed strides with the same button.

What makes this role different. The Visitor has no role to perform, no data to enter, and nothing to manage. Their entire relationship with the product is a single press and the run that follows. This is why the product has no account, no dashboard, and no second control: adding any of those would change what the Visitor is.

5. Core User Flows

Page 13 of 27

Flow 1 — The Visitor generates and watches the run

  1. The Visitor opens the Landing page anonymously from a link. No sign-in is requested.
  2. The page renders the full-bleed low-poly jungle: a #BFE6F2 sky, a side-on chase camera at ground level, cone trees, box rocks, and triangular ferns in three parallax depth layers, with the coral monkey and the mint turtle standing at the left third, mid-stride and impatient, at roughly 40% of viewport height.
  3. The Visitor reads the cream caption card top-left: monkey-turtle in Fredoka at up to 112px, with one line beneath it in Baloo 2 describing the run.
  4. The Visitor presses the oversized coral RUN pill in the cream HUD panel bottom-left. The pill physically depresses 4px on its hard ink offset shadow.
  5. Both characters launch from a standstill with a squash-and-stretch launch. Their arms and legs cycle on a low-poly rig, dust puffs spawn at each footfall, the ground scrolls right-to-left beneath them, the three parallax jungle layers scroll at different speeds, and the speed meter bottom-right counts up in lemon with tabular numerals.
  6. For the first two seconds the turtle lags a beat behind the monkey.
  7. On a downhill the turtle passes the monkey. The speed meter flips to TURTLE LEADS for one beat.
  8. The run ends. All motion stops and the scene settles to a still diorama with both characters mid-stride. The control now reads AGAIN.
  9. Continuation: the Visitor presses AGAIN and a fresh run begins from the settled diorama with the same launch, run, and overtake behavior.
Page 14 of 27

Failure and recovery. If the real-time scene cannot initialize or the render context is lost, the page presents the static diorama arrangement — both characters mid-stride in the jungle — with the control still present and usable, so the Visitor can still advance the four-pose stride sequence. The page never presents a blank canvas with no control.

Flow 2 — The Visitor uses the toy with reduced motion

  1. The Visitor opens the Landing page with prefers-reduced-motion set in their browser.
  2. The page renders the scene as a static diorama with both characters mid-stride. No continuous animation runs.
  3. The Visitor presses the same coral pill in the HUD panel.
  4. The run becomes a stepped frame-by-frame sequence of four hand-posed strides, with no tweening. Each press advances one pose.
  5. Continuation: after the fourth pose the Visitor may press the same button to restart the sequence, or leave the page.

Failure and recovery. If the stepped sequence cannot advance, the static diorama remains fully visible and the control remains present, so the Visitor still sees the monkey and the turtle mid-stride in the jungle.

Page 15 of 27

6. Visuals Colors and Theme

The creative direction is authoritative for this section. Muse: Bruno Simon — playable low-poly worlds, toy-like physics, bouncy easing, bright toy colours on a soft ground, and a minimal HUD floating over the scene. Headline: A playable low-poly jungle where the monkey and the turtle actually run.

Colour tokens (light mode)

RoleHexUse
Background / sky ground#BFE6F2The world's atmosphere, not a page background
Surface#FDF6E3The only UI surface: HUD panel, play-button plate, caption card
Text#1B2A33All readable text, at 4.5:1+ on cream and on sky
Primary#FF6B4AThe monkey and the primary action
Accent#3ECF8EThe turtle and the "running" state
Lemon#F7D046Sun, dust puffs, and the speed meter fill
Muted#7C93A0Secondary labels

No blue-indigo anywhere; the only blue is the pale sky ground. The generic indigo/blue-on-white SaaS template is forbidden for this project.

Typography

Page 16 of 27
  • Headings: Fredoka SemiBold, rounded terminals, wide and chunky, sentence case, slight negative tracking (-0.01em) so it reads like toy packaging. Display sizes are huge and friendly, never condensed.
  • Body and labels: Baloo 2 Regular/Medium, 1.6 line-height, so paragraphs feel like a picture-book caption.
  • Scale: 1.25 modular, fluid — display clamp(40px, 9vw, 112px); h2 clamp(28px, 4.5vw, 52px); h3 clamp(20px, 2.4vw, 28px); body 17px/1.6 (16px mobile); label 13px uppercase +0.08em; numerals in Baloo 2 tabular for the speed meter.
  • Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui are excluded for all text.

Shape language. Low-poly geometry everywhere: faceted planes, chunky triangular leaves, capsule-limbed characters with flat-shaded faces. UI follows the same toy logic — 24px radius on panels, 999px pill buttons, 3px ink outlines, hard offset shadows (0 4px 0 #1B2A33) instead of soft blur, so buttons look pressable. No glassmorphism, no gradient blobs, no soft blurred shadows, no neon glows.

Layout. The 3D scene is the page: a full-bleed canvas at every breakpoint, with the camera fixed in a side-on chase view so the ground scrolls right-to-left beneath the runners. One floating HUD panel bottom-left (cream, ink outline) holds the single primary control — a coral pill reading RUN that becomes AGAIN after the run. A caption card top-left carries the title and one line of copy; a small speed meter bottom-right shows metres run in lemon. At 375px the HUD collapses to a full-width bottom bar with the pill spanning it and the caption card stacking above the canvas edge; at 768px the HUD floats as a compact panel; at 1280px the canvas breathes with wide margins and the caption sits in the upper-left third. All readable text and controls stay inside their containers and the viewport at every width.

Page 17 of 27

Imagery. Everything is low-poly 3D built in code: a monkey with a long curled tail and long arms, a turtle with a faceted hexagon shell and stubby legs, a jungle of cone trees, box rocks and triangular ferns, all flat-shaded with soft directional light and soft contact shadows. No photography, no stock illustration, no emoji-as-art. The characters are the only subjects; the world is scenery for their run.

Page 18 of 27

7. Signature Design Concept

The first screen is the world, not a headline.

The public entry is a full-bleed low-poly jungle clearing under a #BFE6F2 sky, camera side-on at ground level, with the monkey (coral #FF6B4A) and the turtle (mint #3ECF8E) standing at the left third, mid-stride and impatient. The dominant element is the pair at roughly 40% of viewport height, with the scrolling ground plane leading the eye right. A cream HUD panel sits bottom-left with the coral RUN pill; a cream caption card top-left carries monkey-turtle in Fredoka at clamp(40px, 9vw, 112px) with one line beneath it in Baloo 2.

There is no centred headline stack, no subtext-plus-button arrangement, and no gradient blob. The composition is a game frame with two characters about to move. The signature moves that carry it:

  • A real-time low-poly jungle canvas as the entire page: the ground scrolls right-to-left under the runners with three parallax depth layers, and the camera never cuts away.
  • One oversized coral RUN pill with a hard ink offset shadow that physically depresses 4px on press and triggers a squash-and-stretch launch from both characters.
  • A scripted overtake gag: the turtle lags the monkey for the first two seconds, then passes it on a downhill and the speed meter in lemon flips to TURTLE LEADS for one beat before the run ends.
  • Character-first HUD: the cream caption card top-left uses the product name set in Fredoka at up to 112px, with the second line describing the run rather than the app.
  • Frame-by-frame reduced-motion fallback: the same button advances four hand-posed strides with no tweening, so the scene is fully usable with prefers-reduced-motion.
Page 19 of 27

This concept recomposes only accepted content, states, and controls. It introduces no new behavior, page, or destination.

8. Interaction Model & Motion Direction

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

Page 20 of 27

Landing Hero Motion Brief

Focal subject. The monkey (coral #FF6B4A) and the turtle (mint #3ECF8E) at the left third of a full-bleed low-poly jungle clearing, mid-stride and impatient, at roughly 40% of viewport height, with the scrolling ground plane leading the eye right.

Input → transformation → outcome thesis. The Visitor presses the coral RUN pill → the pill depresses 4px on its hard ink offset shadow and both characters launch from a standstill with a squash-and-stretch launch, arms and legs cycling on a low-poly rig, dust puffs spawning at each footfall, the ground scrolling right-to-left with three parallax jungle layers at different speeds, and the lemon speed meter counting up → the turtle lags a beat, overtakes the monkey on a downhill, the meter flips to TURTLE LEADS for one beat, and the run ends with the scene settling to a still diorama and the control reading AGAIN.

Motion vocabulary. Physics-driven and bouncy. Spring-like easing with overshoot on landings; no linear tweens. Squash-and-stretch on launch. Dust puffs at footfalls. Parallax depth scrolling. A counting meter. A scripted one-beat gag rather than a loop. No motion continues after the run ends — the scene settles to a still diorama.

Composed first frame. A full-bleed low-poly jungle clearing under a #BFE6F2 sky, camera side-on at ground level. The monkey and the turtle stand at the left third, mid-stride and impatient. The cream caption card top-left carries monkey-turtle in Fredoka at up to 112px with one line beneath it in Baloo 2. The cream HUD panel bottom-left holds the coral RUN pill with its hard ink offset shadow. The lemon speed meter sits bottom-right at its resting value. Nothing is centred; the ground plane leads the eye right.

Page 21 of 27

Reduced-motion state. The scene renders as a static diorama with both characters mid-stride. The run becomes a stepped frame-by-frame sequence of four hand-posed strides that the Visitor advances with the same button, with no tweening. The caption card, HUD panel, pill, and speed meter remain present and readable.

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 scene shows the product's defining state: a low-poly jungle clearing with a scrolling ground plane and three parallax depth layers, containing exactly two subjects — a monkey with a long curled tail and long arms, and a turtle with a faceted hexagon shell and stubby legs — both flat-shaded with soft directional light and soft contact shadows, standing mid-stride at the left third under a #BFE6F2 sky. The scene's defining state is the pair about to move: the camera is fixed side-on at ground level and never cuts away, and the single coral control in the cream HUD panel is the only thing that changes that state.

Page 22 of 27

9. Non-Functional Requirements

NFR-1 — Real-time rendering performance (explicit) The low-poly jungle scene must render as real-time motion at a smooth frame rate on a typical browser, because the accepted behavior is that the monkey and the turtle actually run rather than being shown as an illustration. Rationale: the creative direction specifies a real-time WebGL/R3F hero subject and physics-driven motion.

NFR-2 — Anonymous, no-account access (explicit) The Landing page must be reachable and fully usable without an account, sign-in, or any identity establishment. Rationale: the accepted planning contract records access_requirement: none for the Landing surface and the accepted persona is an anonymous Visitor.

NFR-3 — Reduced-motion support (explicit) The product must honor prefers-reduced-motion by rendering a static diorama with both characters mid-stride and replacing the physics run with a four-pose stepped sequence advanced by the same button, with no tweening. Rationale: stated in the creative direction's motion and signature-move sections.

NFR-4 — Readable text and controls at every viewport (explicit) Headlines, wordmarks, labels, numbers, cards' text, and controls must 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 may cover any part of them. Imagery, decoration, and motion 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. Rationale: stated as a project-wide readability constraint.

Page 23 of 27

NFR-5 — Text contrast (explicit) All readable text must meet at least 4.5:1 contrast on cream #FDF6E3 and on sky #BFE6F2. Rationale: stated in the palette definition for ink #1B2A33.

NFR-6 — No motion after the run ends (explicit) No motion may continue after the run ends; the scene must settle to a still diorama. Rationale: stated in the creative direction's avoid list and motion section.

NFR-7 — No skeuomorphic game chrome (explicit) Health bars, score popups, and joystick overlays must not be added, because they compete with the run. Rationale: stated in the creative direction's avoid list.

NFR-8 — No photorealistic or stock imagery of real animals (explicit) All imagery must be low-poly 3D built in code. Rationale: stated in the creative direction's imagery and avoid sections.

Page 24 of 27

10. Tech Stack

  • React with React Three Fiber and Drei for the full-bleed real-time WebGL scene, the low-poly characters, the jungle, the parallax layers, and the run simulation. (Source-backed: the creative direction specifies a real-time WebGL/R3F hero subject and low-poly 3D built in code.)
  • Three.js as the underlying renderer beneath R3F. (Source-backed by the WebGL/R3F direction.)
  • Vite for the front-end build and dev server. [Default — not specified by user]
  • CSS with custom properties for the palette tokens, the fluid clamp() type scale, the 24px panel radius, the 999px pill, the 3px ink outlines, and the hard offset shadows. [Default — not specified by user]
  • Fredoka and Baloo 2 loaded as web fonts. (Source-backed: named in the creative direction's typography.)
  • docker-compose.yml with a single front-end service serving the built static site. No backend service is required: the product has no server-side behavior, no persistence, no accounts, and no external API calls. [Default — not specified by user]
Page 25 of 27

11. Assumptions and Constraints

Assumptions

  • A1 — The Visitor has a browser capable of WebGL. If WebGL is unavailable or the render context is lost, the static-diorama fallback described in FR-1 and Flow 1 applies. (required_inference, needed to make the accepted run lifecycle recoverable.)
  • A2 — The run is ephemeral. No run result, metre count, or scene state is persisted or resumed, because no accepted behavior requires durable actor-specific state. (required_inference.)
  • A3 — The one-beat TURTLE LEADS flip and the two-second lag are the accepted scripted gag, not a loop and not a scoring system. (explicit.)
  • A4 — The product is delivered as a single anonymous page; no routing beyond the Landing page is needed. (explicit, from the accepted page contract.)

Constraints

  • C1 — The Landing page is the only page, and it is anonymous with access_requirement: none. No page may be added, removed, merged, split, renamed, or reordered. (explicit.)
  • C2 — The Visitor is the only accepted human persona. No additional persona may be introduced. (explicit.)
  • C3 — The palette, fonts, shape language, layout, motion tempo, and imagery rules in sections 6 and 8 are binding. (explicit.)
  • C4 — The generic indigo/blue-on-white SaaS template is forbidden. (explicit.)
  • C5 — No accounts, sign-in, saved history, sharing controls, score persistence, leaderboards, or skeuomorphic game chrome. (explicit.)
  • C6 — No motion continues after the run ends. (explicit.)
  • C7 — No photorealistic or stock imagery of real animals. (explicit.)
Page 26 of 27

12. Glossary

  • Visitor — The only accepted human persona. An anonymous person who opens the Landing page, presses the run control, and watches the monkey and the turtle run.
  • Run — One complete play of the accepted behavior: the characters launch from a standstill, run through the scrolling jungle, the turtle overtakes the monkey on the downhill, and the scene settles to a still diorama.
  • Landing — The single anonymous public page. It is the world: a full-bleed low-poly jungle canvas with a floating HUD over it.
  • HUD panel — The cream, ink-outlined panel bottom-left that holds the single primary control.
  • Caption card — The cream, ink-outlined card top-left carrying monkey-turtle in Fredoka with one line beneath it in Baloo 2.
  • Speed meter — The lemon-filled meter bottom-right showing metres run in tabular Baloo 2 numerals, which flips to TURTLE LEADS for one beat during the overtake.
  • Overtake gag — The scripted moment in which the turtle, having lagged a beat behind the monkey, passes it on a downhill. Not a loop.
  • Squash-and-stretch launch — The bouncy, spring-eased start in which both characters accelerate from a standstill with overshoot.
  • Static diorama — The settled, motionless scene with both characters mid-stride, shown when the run ends and whenever prefers-reduced-motion is set.
  • Stepped stride sequence — The reduced-motion replacement for the physics run: four hand-posed strides advanced one at a time by the same button, with no tweening.
  • Parallax layers — The three jungle depth layers that scroll at different speeds behind the runners.
Page 27 of 27
Landing design preview
Landing: Open page anonymously
Landing: Read caption card
Landing: Press RUN control
Landing: 1. Watch launch and run
Landing: 2. Watch overtake gag
Landing: 3. View run settle
Landing: 4. Press AGAIN restart
Landing: 1. View reduced-motion diorama
Landing: 2. Advance stride pose
Landing: View fallback diorama
Landing design preview
Landing: Open page anonymously
Landing: Read caption card
Landing: Press RUN control
Landing: 1. Watch launch and run
Landing: 2. Watch overtake gag
Landing: 3. View run settle
Landing: 4. Press AGAIN restart
Landing: 1. View reduced-motion diorama
Landing: 2. Advance stride pose
Landing: View fallback diorama