System Requirements Document for wild-html

1. Introduction

wild-html is a single-file creative web toy: one HTML page that renders a 2D animation, drawn entirely with SVG, of a pelican riding a bicycle. The page is the product. When a viewer opens it in a browser, the SVG scene plays immediately — no setup, no account, no configuration, no dependencies to install.

The intent is immediate, visible, playful motion. The audience is anyone who opens the page and wants to watch a pelican pedal a bicycle. The experience is closer to an interactive web experiment than to a product page: the animation is the hero, the chrome is minimal, and the scene reads clearly at any viewport.

The requester explicitly asked for no tests and no restrictions; this document honors both. There is no test suite, no gating, and no artificial limitation on how the animation is drawn or how the viewer interacts with it.

2. System Overview

2a. Product Interpretation and Delivery Boundary

The product is delivered as a single HTML page containing an inline SVG 2D animation of a pelican riding a bicycle. The page is publicly reachable and anonymous: any viewer can open it and immediately see the animation playing. There is no sign-in, no account, no personal data, and no server-side state required for the core experience.

The animation is the product. The page's job is to present the SVG scene clearly, let it play automatically on open, and give the viewer a small, honest set of controls (play/pause and a speed interaction) that make the motion legible and delightful without competing with it. All drawing, motion, and interaction logic live in the single HTML file; the SVG is authored as vector geometry and animated procedurally.

Current scope is the single page and its animation. There is no future roadmap beyond that; anything not described here is out of scope.

2b. Source Content Inventory

Not applicable — no reference directive with content_source was supplied.

2c. Page Content and Component Coverage

Landing

Information and state

• The page is a single full-bleed viewport with a warm paper ground (#F2EFE6).
• An oversized flush-left headline "PELICAN ON A BICYCLE" in ink (#111111) occupies the upper third.
• A 12px letterspaced micro-label "SVG · 2D · LIVE" sits beneath the headline.
• The SVG scene — a white pelican with a vermilion beak pouch pedalling a vermilion bicycle along a mint horizon line — spans the lower two-thirds, edge-to-edge, bleeding off the right edge.
• A thin bottom rail holds a tabular speed readout (0–100), a thin speed bar that fills in vermilion as speed rises, and a play/pause toggle.
• A single vermilion pill button labelled "Pedal faster" sits under the headline.
• The animation plays automatically on open. The current speed value is reflected in the readout and the speed bar.

Primary actions

• Move the cursor horizontally (or scroll on touch) to modulate the speed value 0–100, which scales the pelican's leg-pedal cadence and the wheel rotation in real time.
• Press the "Pedal faster" pill button to trigger a 600ms burst: the pelican rises off the saddle, the road dashes accelerate, and a mint speed-line streaks behind the rear wheel.
• Toggle play/pause on the bottom rail to freeze or resume the animation loop.

Supporting actions

• Read the speed value from the tabular readout.
• Observe the speed bar filling in vermilion as speed rises.

Domain entities

• The SVG scene: pelican (body, head, beak pouch, wings, legs), bicycle (frame, wheels, handlebars, pedals), horizon line, road line, dashed lane markers.
• The speed value (0–100) driving pedal and wheel cadence.
• The play/pause state.
• The burst state (600ms, triggered by the pill button).

Component responsibilities

• Headline block: renders the oversized headline and micro-label; scales with clamp(56px, 11vw, 148px) and stays whole at 375px, 768px, and 1280px.
• SVG scene: draws the pelican, bicycle, horizon, and road; animates legs, wheels, head bob, beak, and road dashes; reacts to the speed value and burst state.
• "Pedal faster" pill button: triggers the 600ms burst; vermilion fill, capsule shape.
• Bottom rail: hosts the speed readout, speed bar, and play/pause toggle; stays reachable and whole at all three breakpoints.
• Speed controller: maps cursor horizontal position (or scroll on touch) to the speed value 0–100 and drives the scene.

States

• Loading: not applicable — the page is a single static HTML file with inline SVG; there is no asynchronous load.
• Empty: not applicable — the scene is always present.
• Success: the animation plays on open; the speed readout and bar reflect the current speed; the pill button triggers the burst; the play/pause toggle freezes and resumes the loop.
• Error: not applicable in the normal case; if the browser cannot render SVG, the page shows the headline and controls but no scene. No recovery flow is required.
• Recovery: pressing play after pause resumes the loop; releasing the cursor returns the speed to its resting value; the burst ends after 600ms and the pelican returns to the saddle.
• Reduced motion: when prefers-reduced-motion is set, the loop freezes into a single composed still with a visible play button; the viewer can press play to start the animation.

3. Functional Requirements

FR-1 — Single HTML page delivery (explicit) As an Animation Viewer, I should open a single HTML page that contains the entire experience, so that I can see the animation without any setup.

• Trigger: the viewer opens the HTML file or URL in a browser.
• Observable result: the page renders with the headline, the SVG scene, the pill button, and the bottom rail.
• Access: anonymous, no account.
• Failure/recovery: if the browser cannot render SVG, the headline and controls still render; no recovery flow is required.
• Continuation: the viewer proceeds to watch the animation.

FR-2 — SVG-drawn 2D animation (explicit) As an Animation Viewer, I should see a 2D animation drawn with SVG, so that the scene is crisp vector art rather than raster imagery.

• Trigger: the page loads.
• Observable result: the pelican, bicycle, horizon, and road are rendered as SVG vector geometry with flat fills and ink strokes.
• Access: anonymous.
• Failure/recovery: not applicable in the normal case.
• Continuation: the animation plays continuously.

FR-3 — Pelican riding a bicycle (explicit) As an Animation Viewer, I should see a pelican riding a bicycle, so that the scene matches what I came for.

• Trigger: the page loads.
• Observable result: a white pelican with a vermilion beak pouch sits on and pedals a vermilion bicycle; the legs pedal in a loop and the wheels rotate at the same cadence.
• Access: anonymous.
• Failure/recovery: not applicable in the normal case.
• Continuation: the loop continues until paused.

FR-4 — Automatic playback on open (required_inference) As an Animation Viewer, I should see the animation playing immediately when the page opens, so that I do not have to press anything to start it.

• Trigger: the page loads.
• Observable result: the pedalling loop, wheel rotation, head bob, beak motion, and road-dash scroll begin automatically.
• Access: anonymous.
• Failure/recovery: if prefers-reduced-motion is set, the loop freezes into a single composed still with a visible play button; pressing play starts the animation.
• Continuation: the viewer can pause and resume at will.

FR-5 — Cursor-reactive speed (required_inference) As an Animation Viewer, I should be able to modulate the animation's speed with my cursor's horizontal position (or scroll on touch), so that the motion responds to me in real time.

• Trigger: the viewer moves the cursor horizontally across the page, or scrolls on a touch device.
• Observable result: the speed value 0–100 changes; the leg-pedal cadence and wheel rotation scale accordingly; the tabular readout and the vermilion speed bar update.
• Access: anonymous.
• Failure/recovery: releasing the cursor returns the speed to its resting value.
• Continuation: the viewer can keep modulating the speed.

FR-6 — "Pedal faster" burst (required_inference) As an Animation Viewer, I should be able to press a "Pedal faster" pill button to trigger a short burst, so that the scene briefly speeds up and the pelican rises off the saddle.

• Trigger: the viewer presses the vermilion pill button labelled "Pedal faster".
• Observable result: for 600ms, the pelican rises off the saddle, the road dashes accelerate, and a mint speed-line streaks behind the rear wheel; then the pelican returns to the saddle.
• Access: anonymous.
• Failure/recovery: the burst ends automatically after 600ms; the scene returns to its prior state.
• Continuation: the viewer can press the button again.

FR-7 — Play/pause toggle (required_inference) As an Animation Viewer, I should be able to pause and resume the animation, so that I can freeze the scene or restart it.

• Trigger: the viewer presses the play/pause toggle on the bottom rail.
• Observable result: the loop freezes (paused) or resumes (playing); the toggle reflects the current state.
• Access: anonymous.
• Failure/recovery: pressing play after pause resumes the loop from where it stopped.
• Continuation: the viewer can toggle again.

FR-8 — Reduced-motion still (required_inference) As an Animation Viewer with prefers-reduced-motion set, I should see a single composed still with a visible play button, so that the page respects my motion preference while still letting me start the animation if I choose.

• Trigger: the page loads with prefers-reduced-motion set.
• Observable result: the loop is frozen into a single composed still; a visible play button is shown.
• Access: anonymous.
• Failure/recovery: pressing play starts the animation.
• Continuation: the viewer can pause again.

FR-9 — No tests (explicit) As the requester, I should receive the page without any test suite, so that the deliverable is exactly the single HTML file.

• Trigger: delivery of the page.
• Observable result: no test files, no test runner, no test configuration.
• Access: not applicable.
• Failure/recovery: not applicable.
• Continuation: not applicable.

FR-10 — No restrictions (explicit) As the requester, I should receive the page without artificial limitations on how the animation is drawn or how the viewer interacts with it, so that the creative direction is not constrained by unnecessary rules.

• Trigger: delivery of the page.
• Observable result: the page is free of artificial gating, feature flags, or restrictions beyond what the browser enforces.
• Access: not applicable.
• Failure/recovery: not applicable.
• Continuation: not applicable.

4. User Personas

Animation Viewer

Product context. The Animation Viewer opens a single HTML page in a browser — desktop or mobile — with no prior knowledge of the project and no expectation of setup. They arrive curious, often from a link or a shared file, and want to see something playful immediately.

Primary goal. Watch a 2D SVG animation of a pelican riding a bicycle, playing visibly in the browser without any setup.

Distinct accepted responsibilities.

• Opens the page and observes the animation playing automatically.
• Moves the cursor horizontally (or scrolls on touch) to modulate the speed of the pedalling and wheel rotation.
• Presses the "Pedal faster" pill button to trigger a short burst.
• Presses the play/pause toggle to freeze or resume the loop.
• If prefers-reduced-motion is set, sees a composed still with a visible play button and may press play to start the animation.

Relevant inputs or decisions.

• Cursor horizontal position (or scroll on touch) → speed value 0–100.
• Press of the "Pedal faster" pill button → 600ms burst.
• Press of the play/pause toggle → freeze or resume.
• Press of the play button in reduced-motion mode → start the animation.

Interactions with other accepted participants. None — the Animation Viewer is the only active human persona. The page is anonymous and has no other human participant.

Observable success. The animation plays on open; the speed readout and bar reflect the current speed; the pill button triggers the burst; the play/pause toggle freezes and resumes the loop; the reduced-motion still shows a visible play button.

5. Core User Flows

Flow 1 — Open the page and watch the animation

1. The Animation Viewer opens the single HTML page in a browser.
2. The page renders the headline "PELICAN ON A BICYCLE", the micro-label "SVG · 2D · LIVE", the SVG scene, the "Pedal faster" pill button, and the bottom rail.
3. The animation begins automatically: the pelican pedals, the wheels rotate, the head bobs, the beak opens on a slow sine, and the road dashes scroll leftward.
4. The viewer observes the scene. Success: the animation is visibly playing.

Flow 2 — Modulate speed with the cursor

1. The viewer moves the cursor horizontally across the page (or scrolls on a touch device).
2. The speed value 0–100 changes; the leg-pedal cadence and wheel rotation scale in real time.
3. The tabular readout and the vermilion speed bar update to reflect the current speed.
4. The viewer releases the cursor; the speed returns to its resting value. Success: the motion responded to the viewer in real time.

Flow 3 — Trigger the "Pedal faster" burst

1. The viewer presses the vermilion pill button labelled "Pedal faster".
2. For 600ms, the pelican rises off the saddle, the road dashes accelerate, and a mint speed-line streaks behind the rear wheel.
3. After 600ms, the pelican returns to the saddle and the scene returns to its prior state. Success: the burst played and ended cleanly.

Flow 4 — Pause and resume

1. The viewer presses the play/pause toggle on the bottom rail.
2. The loop freezes; the toggle reflects the paused state.
3. The viewer presses the toggle again; the loop resumes from where it stopped. Success: the viewer controlled the playback state.

Flow 5 — Reduced-motion still

1. The viewer opens the page with prefers-reduced-motion set.
2. The loop is frozen into a single composed still; a visible play button is shown.
3. The viewer presses play; the animation starts. Success: the page respected the motion preference while still allowing the viewer to start the animation.

6. Visuals Colors and Theme

Muse: Yugo Nakamura. Headline: "PELICAN ON A BICYCLE".

Palette (light mode)

• Background: #F2EFE6 (warm paper ground)
• Surface: #FFFFFF
• Text: #111111 (ink)
• Primary: #FF4D1F (hot vermilion — bike frame, CTA, kinetic type)
• Accent: #1FBF8F (mint — road line, feathers, secondary UI)
• Muted: #8A8578 (warm grey — micro-labels and rules)

No blue anywhere. Colour is flat and poster-crisp so motion reads instantly.

Typography

• Headings: Space Grotesk, very large, tight-tracked, mixed-case grotesk; headline at clamp(56px, 11vw, 148px) with leading 0.92 and tracking -0.03em.
• Secondary line: all-caps 12px, letterspaced 0.18em, as a micro-label.
• Body: Space Grotesk.
• Scale (1.5 modular): 148 / 96 / 56 / 32 / 20 / 16 / 12 — display, sub-display, section, lead, body, label, micro-label.
• Numerals: tabular for the speed readout.

Shape language

• Full-viewport flat stage with a hard horizon rule.
• Bicycle and pelican drawn as clean 2D vector silhouettes with 3px ink strokes and flat fills.
• Circular wheels, capsule handlebars, triangular beak.
• UI chrome reduced to a single pill toggle and a thin speed bar.
• No rounded-corner cards, no shadows — crisp flat geometry so the motion is the ornament.

Layout

• Single full-bleed viewport: the SVG scene occupies the lower two-thirds edge-to-edge; the oversized headline sits flush-left in the upper third; a thin bottom rail holds the speed readout and the play/pause control.
• Mobile: headline stacks above the scene at 56px; the scene scales to fit width.
• 768px: headline and rail share one row above the scene.
• 1280px: headline spans 9 of 12 columns with the scene bleeding off the right edge.

Motion

• Continuous, cursor- and scroll-reactive: the pelican's legs pedal in a loop whose tempo is driven by a speed value the cursor's horizontal position (or scroll) modulates; the wheels rotate at the same cadence; the road dashes scroll leftward; the pelican's head bobs and its beak opens on a slow sine.
• A click toggles a burst where the pelican stands on the pedals and the scene briefly speeds up.
• prefers-reduced-motion freezes the loop into a single composed still with a visible play button.

Motion tempo: expressive. Hero dimensionality: flat. Hero drama: bold.

Imagery

• The imagery is the SVG scene itself: a hand-tuned pelican (white body, ink outline, mint wing shading, vermilion beak pouch) on a vermilion bicycle, with a flat mint horizon, ink road line, and dashed lane markers.
• No photography, no gradients, no stock art — every mark is vector and procedural.

Avoid

• Blue or indigo accents; any gradient-blob hero; rounded-corner hover-lift cards or dashboard tiles; stock photography or 3D-rendered props competing with the SVG; Inter, Roboto, Arial, Helvetica, Open Sans, Lato, or Poppins anywhere; centred headline + subtext + button SaaS composition; decorative animation that hides or covers the pelican or any readable label; autoplay motion that ignores prefers-reduced-motion; marketing copy that presents or links to any planning document.

Readable text and controls stay whole at every viewport: 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.

7. Signature Design Concept

The public entry is a full-bleed flat poster, not a SaaS hero. On a warm paper ground #F2EFE6, an oversized Space Grotesk headline "PELICAN ON A BICYCLE" is set flush-left at clamp(56px, 11vw, 148px) in ink #111111, occupying the top third. Beneath it, a 12px letterspaced micro-label "SVG · 2D · LIVE" sits as a quiet counterpoint. The SVG scene below — a white pelican with a vermilion beak pouch pedalling a vermilion bicycle along a mint horizon line — spans the full width and bleeds off the right edge. A single vermilion pill button labelled "Pedal faster" sits under the headline. A thin ink rule with a tabular speed readout anchors the bottom. Nothing is centred; the composition is a poster with a living lower half.

The signature move is cursor-reactive pedalling: the horizontal cursor position (or scroll on touch) drives a speed value 0–100 that scales the leg-pedal and wheel-rotation cadence in real time, shown as a tabular readout on the bottom rail. The "Pedal faster" pill button triggers a 600ms burst where the pelican rises off the saddle, the road dashes accelerate, and a mint speed-line streaks behind the rear wheel. The bottom rail holds a play/pause toggle and a thin speed bar that fills in vermilion as the speed value rises, keeping every control whole and reachable at 375px, 768px, and 1280px.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: flat

Landing Hero Motion Brief

• Focal subject: the SVG pelican on the vermilion bicycle, drawn as clean 2D vector silhouettes with 3px ink strokes and flat fills, riding along a mint horizon line with dashed lane markers.
• Input → transformation → outcome thesis: the viewer's horizontal cursor position (or scroll on touch) sets a speed value 0–100; that value scales the leg-pedal cadence and wheel rotation in real time; the tabular readout and vermilion speed bar reflect the current speed. Pressing the "Pedal faster" pill button triggers a 600ms burst in which the pelican rises off the saddle, the road dashes accelerate, and a mint speed-line streaks behind the rear wheel; the pelican then returns to the saddle.
• Motion vocabulary: continuous loop (pedalling legs, rotating wheels, head bob, beak opening on a slow sine, leftward-scrolling road dashes); cursor- and scroll-reactive tempo; a 600ms burst with a mint speed-line; a play/pause toggle that freezes and resumes the loop.
• Composed first frame: warm paper ground #F2EFE6; flush-left oversized headline "PELICAN ON A BICYCLE" in ink #111111 at clamp(56px, 11vw, 148px); micro-label "SVG · 2D · LIVE" beneath it; the SVG scene spanning the lower two-thirds edge-to-edge with the pelican mid-pedal on the vermilion bicycle along the mint horizon; the vermilion "Pedal faster" pill button under the headline; a thin ink rule with a tabular speed readout and play/pause toggle anchoring the bottom.
• Reduced-motion state: the loop freezes into a single composed still with a visible play button; pressing play starts the animation.

9. Non-Functional Requirements

• Single-file delivery (explicit): the entire experience is one HTML file with inline SVG and inline CSS/JS; no external assets are required for the core scene.
• No tests (explicit): no test suite, test runner, or test configuration is delivered.
• No restrictions (explicit): no artificial gating, feature flags, or limitations beyond what the browser enforces.
• Anonymous access (required_inference): the page is publicly reachable with no sign-in, account, or personal data.
• Reduced-motion respect (required_inference): prefers-reduced-motion freezes the loop into a single composed still with a visible play button.
• Readable text and controls (required_inference): headlines, labels, numbers, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px; no other element covers any part of them.
• No blue or indigo accents (explicit, from creative direction): the palette is warm paper, ink, vermilion, mint, and warm grey only.
• No forbidden fonts (explicit, from creative direction): Inter, Roboto, Arial, Helvetica, Open Sans, Lato, and Poppins are not used anywhere; Space Grotesk is used for headings and body.

10. Tech Stack

• Frontend: a single HTML file with inline SVG, inline CSS, and inline JavaScript. No framework, no build step, no bundler.
• Fonts: Space Grotesk (headings and body), loaded via a standard web font mechanism or a system fallback that preserves the grotesk character.
• Animation: SVG geometry animated procedurally with JavaScript (requestAnimationFrame) and/or CSS animations; the speed value drives the cadence.
• No backend, no database, no container orchestration is required for the core experience. The initial scaffold services (FastAPI backend, MariaDB, React frontend) are not needed to deliver the single HTML page and are not part of the current product scope.

11. Assumptions and Constraints

• Assumption: the viewer has a modern browser that renders SVG and supports prefers-reduced-motion.
• Assumption: the page is opened directly as a file or served as a static asset; no server-side rendering is required.
• Constraint (explicit): no tests are delivered.
• Constraint (explicit): no restrictions are applied beyond what the browser enforces.
• Constraint (explicit, from creative direction): no blue or indigo accents; no forbidden fonts; no gradient-blob hero; no rounded-corner hover-lift cards; no stock photography or 3D-rendered props competing with the SVG; no centred SaaS composition; no decorative animation that hides or covers the pelican or any readable label; no autoplay motion that ignores prefers-reduced-motion; no marketing copy that presents or links to any planning document.
• Constraint (explicit, from creative direction): readable text and controls stay whole at 375px, 768px, and 1280px.

12. Glossary

• SVG: Scalable Vector Graphics — the XML-based vector image format used to draw the pelican, bicycle, horizon, and road.
• 2D animation: motion in two dimensions (horizontal and vertical) rendered as a sequence of frames or procedural transforms.
• Speed value: a number from 0 to 100 that drives the leg-pedal cadence and wheel rotation, set by the cursor's horizontal position or by scroll on touch.
• Burst: a 600ms event triggered by the "Pedal faster" pill button, during which the pelican rises off the saddle, the road dashes accelerate, and a mint speed-line streaks behind the rear wheel.
• Reduced motion: the prefers-reduced-motion media query, which freezes the loop into a single composed still with a visible play button.
• Micro-label: a 12px all-caps letterspaced line of text used as a quiet counterpoint to the headline.