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.
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:
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.
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.
Not applicable. No reference directive in this project declares content_source authority, so no source content inventory is produced.
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
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).TURTLE LEADS.static diorama with both characters mid-stride, and a stepped four-pose stride sequence advanced by the same button.Primary action
Supporting actions and controls
Domain entities
#FF6B4A, long curled tail, long arms, capsule limbs, flat-shaded face.#3ECF8E, faceted hexagon shell, stubby legs.#F7D046 particles spawned at each footfall.Component responsibilities
#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.TURTLE LEADS flip.Responsive behavior
States
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.
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.
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.
FR-4 — Start another run (explicit) As a Visitor, I should be able to start another run after the first one ends.
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.
prefers-reduced-motion preference is set, and the Visitor presses the same button.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.
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.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.
#F7D046 with tabular Baloo 2 numerals, counting up during the run and flipping to TURTLE LEADS for one beat during the overtake.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.
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.
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.
#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.monkey-turtle in Fredoka at up to 112px, with one line beneath it in Baloo 2 describing the run.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.
prefers-reduced-motion set in their browser.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.
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)
| Role | Hex | Use |
|---|---|---|
| Background / sky ground | #BFE6F2 | The world's atmosphere, not a page background |
| Surface | #FDF6E3 | The only UI surface: HUD panel, play-button plate, caption card |
| Text | #1B2A33 | All readable text, at 4.5:1+ on cream and on sky |
| Primary | #FF6B4A | The monkey and the primary action |
| Accent | #3ECF8E | The turtle and the "running" state |
| Lemon | #F7D046 | Sun, dust puffs, and the speed meter fill |
| Muted | #7C93A0 | Secondary 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
-0.01em) so it reads like toy packaging. Display sizes are huge and friendly, never condensed.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.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.
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.
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:
prefers-reduced-motion.This concept recomposes only accepted content, states, and controls. It introduces no new behavior, page, or destination.
Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: webgl
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.
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.
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.
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.
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.
[Default — not specified by user]clamp() type scale, the 24px panel radius, the 999px pill, the 3px ink outlines, and the hard offset shadows. [Default — not specified by user][Default — not specified by user]Assumptions
TURTLE LEADS flip and the two-second lag are the accepted scripted gag, not a loop and not a scoring system. (explicit.)Constraints
access_requirement: none. No page may be added, removed, merged, split, renamed, or reordered. (explicit.)monkey-turtle in Fredoka with one line beneath it in Baloo 2.TURTLE LEADS for one beat during the overtake.prefers-reduced-motion is set.
Ready
Two friends, one clearing: the monkey bolts, the turtle lags a beat, then sneaks past on the downhill.

Ready
Two friends, one clearing: the monkey bolts, the turtle lags a beat, then sneaks past on the downhill.
No comments yet. Be the first!