System Requirements Document for meta-rising

1. Introduction

meta-rising is a small web landing page built around a single cinematic moment: a ten-second race animation in which ChatGPT falls downward and Claude overtakes it. The product intent is spectacle-first — an AI-curious tech audience arrives at a public page, the race plays out as the dominant element of the first screen, and the viewer sees the full ten-second sequence without needing an account or any other workflow.

The audience is the Visitor: anyone who opens the page to watch the short race. The deliverable is a web app or landing page with the animation built into the page — not a standalone video file.

2. System Overview

meta-rising is delivered as a single public landing page. The page hosts a built-in, roughly ten-second race animation: a dimming teal ChatGPT marker drifts downward while a bright magenta Claude marker surges up the same vertical lane and crosses above it, framed by HUD chrome (model names, a live countdown, position readouts) and a right-hand rail of floating glass telemetry panels.

Actors

• Visitor (active human persona): opens the page and watches the race animation. No account, sign-in, or other workflow is required.

Accepted behavior

• A landing page that contains the requested ten-second race animation.
• The animation shows ChatGPT falling downward and Claude overtaking it.
• The animation runs for about ten seconds.

Ownership and exclusions

• The animation is built into the page itself; it is not delivered as a standalone video file.
• There is no account system, no data entry, no backend workflow, and no other product capability beyond presenting the page and its race animation.

2a. Product Interpretation and Delivery Boundary

The product is a public, no-account landing page whose centerpiece is a ten-second race animation. Delivery is first-party and browser-based: the page and its animation are served as a web app, and the animation is rendered inside the page rather than exported as a video file. Access is public — the Visitor reaches the page anonymously and immediately sees the race; there is no identity establishment, sign-in, or protected state.

The current horizon covers only the landing page and its race animation. Nothing beyond that — additional pages, interactive controls beyond replaying the race, accounts, or data services — is part of the current product.

2b. Source Content Inventory

Not applicable. No reference directive supplies a content_source; the reusable design-system skill is a visual/style reference only and does not contribute product facts, copy, or capabilities to meta-rising.

2c. Page Content and Component Coverage

Landing

Purpose and information/state

• Public entry surface. Presents the product and hosts the built-in ten-second race animation of ChatGPT falling and Claude overtaking it.
• Primary state: the race animation playing (approximately ten seconds), with a live countdown and position readouts.
• Final state: the completed race — Claude ahead/above, ChatGPT below — remains legible on screen.

Primary actions

• Watch the race animation play on load.
• Replay the race (replay control below the fold / after completion).

Supporting actions

• Read the short caption strip describing the race.
• In reduced-motion mode, use the explicit Play race control to start the animation manually.

Domain entities

• Race: a ten-second sequence with two participants.
• Participant — ChatGPT: dimming teal marker that falls downward.
• Participant — Claude: bright magenta marker that accelerates upward and overtakes ChatGPT.
• Countdown / position readouts: HUD data reflecting race progress.

Component responsibilities

• Top HUD bar: model names "CHATGPT" and "CLAUDE", a live 10.0s countdown, and position/lap readouts in uppercase wide-tracked micro-labels with monospace numerals.
• Race stage: full-bleed dark arena with a vertical luminous race lane; ChatGPT orb drifting downward with a flickering, dimming glow; Claude orb surging upward past it with a magenta light trail; faint particle field and topographic lane lines behind.
• Right telemetry rail: floating glass panels with 1px low-opacity luminous borders and counting monospace numerals.
• Caption strip: short text describing the race, below the fold.
• Replay control: restarts the ten-second race.
• Reduced-motion control: a Play race button shown when prefers-reduced-motion is active, presenting a static final-frame composition (Claude ahead, ChatGPT below) until pressed.

States

• Loading: the page and race stage initialize; HUD shows the countdown at its starting value.
• Playing: the ten-second race runs; countdown counts down; markers move; telemetry numerals count.
• Success/completion: the race finishes with Claude overtaken above ChatGPT; the final composition remains visible and the replay control is available.
• Reduced-motion: static final-frame composition with a manual Play race control.
• Error/recovery: if the animation cannot run (e.g., rendering failure), the static final-frame composition remains visible so the overtake is still legible, and the replay/play control allows retrying.

3. Functional Requirements

FR-1 — Landing page with built-in race animation (explicit) As a Visitor, I should land on a web page that contains the requested race animation built into the page, so that I can watch the sequence directly in the browser.

• Trigger: Visitor opens the page.
• Observable result: the Landing page renders with the race animation embedded.
• Constraint: the deliverable is a web app or landing page with the animation built into the page, not a standalone video file.
• Access: public, no account required.
• Failure/recovery: if the animation cannot render, the static final-frame composition remains visible and the play/replay control allows retrying.
• Continuation: after the race completes, the Visitor can replay it.

FR-2 — ChatGPT falls downward (explicit) As a Visitor, I should see ChatGPT falling downward during the animation, so that the race's losing motion is clear.

• Trigger: the race animation plays.
• Observable result: the ChatGPT marker drifts downward with a flickering, dimming glow.
• Access: public.
• Failure/recovery: in reduced-motion or render failure, the static final frame still shows ChatGPT below Claude.
• Continuation: the race continues to the overtake.

FR-3 — Claude overtakes ChatGPT (explicit) As a Visitor, I should see Claude overtake ChatGPT during the animation, so that the dramatic overtake reads instantly.

• Trigger: the race animation plays.
• Observable result: the Claude marker accelerates upward past the falling ChatGPT marker, leaving a magenta light trail, and ends ahead/above it.
• Access: public.
• Failure/recovery: in reduced-motion or render failure, the static final frame shows Claude ahead of ChatGPT.
• Continuation: the race completes and the replay control becomes available.

FR-4 — Approximately ten-second duration (explicit) As a Visitor, I should see the animation run for about ten seconds, so that the full sequence plays out as a short cinematic moment.

• Trigger: the race animation starts.
• Observable result: the race plays for approximately ten seconds, with a live countdown reflecting progress.
• Access: public.
• Failure/recovery: if interrupted, the replay control restarts the full ten-second sequence.
• Continuation: on completion, the final composition remains and replay is offered.

FR-5 — Replay the race (required_inference) As a Visitor, I should be able to replay the ten-second race after it finishes, so that I can watch the overtake again without reloading the page.

• Trigger: Visitor activates the replay control after completion.
• Observable result: the race restarts from its beginning and plays the full sequence again.
• Access: public.
• Failure/recovery: if replay cannot start, the static final frame remains visible.
• Continuation: the race plays to completion again.

FR-6 — Reduced-motion legibility (required_inference) As a Visitor who prefers reduced motion, I should see a static final-frame composition with an explicit Play race control, so that the overtake is still legible without animation.

• Trigger: the page loads with prefers-reduced-motion active.
• Observable result: a static composition (Claude ahead, ChatGPT below) is shown with a Play race button.
• Access: public.
• Failure/recovery: if the manual play cannot run, the static composition remains.
• Continuation: pressing Play race runs the ten-second race.

4. User Personas

Visitor

Product context. The Visitor is an AI-curious tech viewer who arrives at meta-rising's public landing page, typically from a shared link, with no prior relationship to the product and no account. They are there for a short, dramatic moment rather than a workflow.

Primary goal. Watch the ten-second race in which ChatGPT falls downward and Claude overtakes it, and see the full sequence play out on the page.

Distinct accepted responsibilities.

• Open the public Landing page and watch the built-in race animation (FR-1).
• Observe ChatGPT falling downward (FR-2) and Claude overtaking it (FR-3) over roughly ten seconds (FR-4).
• Replay the race after completion (FR-5).
• If they prefer reduced motion, view the static final frame and optionally press Play race (FR-6).

Inputs or decisions. The Visitor makes no data inputs; the only decisions are whether to watch, replay, or (in reduced-motion mode) manually start the race.

Interactions with other accepted participants. None. The Visitor is the only active human persona; the two AI models are animated subjects, not participants.

Observable success. The Visitor sees the complete ten-second sequence — ChatGPT descending and Claude surging past — with the final composition legible, and can replay it at will. No account or other workflow is needed.

5. Core User Flows

Flow A — Visitor watches the race on first visit

1. The Visitor opens the public Landing page (no sign-in, no account).
2. The page renders the dark arena with the vertical race lane, the top HUD bar showing "CHATGPT" and "CLAUDE" with a live 10.0s countdown, and the right telemetry rail.
3. The race animation begins: the ChatGPT marker drifts downward with a flickering, dimming teal glow (FR-2).
4. The Claude marker accelerates upward past the falling ChatGPT marker, leaving a magenta light trail, and crosses above it (FR-3).
5. The countdown reaches zero at approximately ten seconds (FR-4); the final composition — Claude ahead, ChatGPT below — remains visible.
6. The Visitor reads the caption strip and, if desired, continues to Flow B.

Failure/recovery: if the animation cannot render, the static final-frame composition remains visible so the overtake is still legible, and the play/replay control allows retrying.

Flow B — Visitor replays the race

1. From the completed race on the Landing page, the Visitor activates the replay control.
2. The race restarts from its beginning and plays the full ten-second sequence again (FR-5).
3. The Visitor watches the overtake repeat and the final composition return.

Failure/recovery: if replay cannot start, the static final frame remains visible.

Flow C — Reduced-motion Visitor views the race

1. The Visitor opens the Landing page with prefers-reduced-motion active.
2. The page shows a static final-frame composition (Claude ahead, ChatGPT below) with an explicit Play race button (FR-6).
3. The Visitor reads the static composition to understand the overtake.
4. Optionally, the Visitor presses Play race; the ten-second race runs (FR-2–FR-4) and the final composition returns.

Failure/recovery: if manual play cannot run, the static composition remains legible.

6. Visuals Colors and Theme

Muse and headline. Gleb Kuznetsov — "Cinematic future-tech descent: a dark arena where ChatGPT drops and Claude surges past."

Mode. Dark mode only.

Color tokens (exact hex by role)

• Background (arena ground): #05070F
• Surface (glass panels): #0D1220
• Text (primary): #EDF1FF
• Primary (ChatGPT lane, cool teal-white glow): #22D3EE at low opacity
• Accent (Claude lane, electric magenta-violet): #F042FF
• Muted (HUD micro-labels): #7C89A8

Glows are used sparingly at low opacity. The ground is near-black navy; accents are luminous. No blue-on-white template look.

Typography

• Headings: Space Grotesk — wide geometric techno sans; uppercase micro-labels with wide tracking for HUD readouts; large display weights for the race headline.
• Body: Space Grotesk.
• Data voice: Space Mono for lap/percent numerals.
• Scale (1.25 modular): display 40/64/96 (mobile→desktop); headline 28/40/56; HUD label 11/12/13 uppercase tracked +0.2em; body 15/16/18; mono data 14/16/20.

Shape language. Full-bleed dark arena with a vertical race lane; thin luminous strokes for lane guides; floating glass HUD panels with 1px low-opacity borders; radial gauge rings around each model marker; hard-edged data ticks. No rounded friendly cards — glass panels and luminous lines.

Layout. Immersive full-viewport hero where the race plays; a top HUD bar with model names, a live 10s countdown and position readouts; the race stage occupies the center-left with a vertical track; a slim right rail of floating glass telemetry panels; below the fold, a replay control and a short caption strip. Anchored to a 12-column grid at 1280px, collapsing to a single stacked column at 375px with the race stage full-bleed.

Imagery. Abstract 3D-feeling glowing markers and volumetric light trails, a faint particle field and topographic lane lines; no flat clip art, no stock photography. The two AI models are rendered as luminous geometric sigils/orbs rather than logos.

Readability constraint. Headlines, wordmarks, labels, numbers, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (e.g., clamp(...)) to fit; no other element covers any part of them. Decoration and motion may bleed or crop; readable text and controls may not.

7. Signature Design Concept

The Arena Descent. The first screen is a full-bleed dark arena, not a centered headline-and-button hero. A vertical luminous race track runs down the center-left of the viewport. ChatGPT is a dimming teal orb near the top, slowly losing altitude with a flickering glow; Claude is a bright magenta orb surging up the same lane, leaving a light trail, and crossing above it. A floating glass HUD bar across the top shows "CHATGPT" and "CLAUDE" with a live 10.0s countdown and position readouts, while a right-side rail of thin glass telemetry panels pulses with counting monospace numerals. The race itself is the dominant element, framed by HUD chrome; a short caption strip and replay control sit below the fold. The concept recomposes only accepted content — the race, its countdown, its readouts, and the replay/play controls — into a cinematic composition.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the vertical race lane with the dimming teal ChatGPT orb falling and the bright magenta Claude orb surging upward past it.
• Input → transformation → outcome thesis: on page load (input), the race animation starts; ChatGPT drifts downward while Claude accelerates upward (transformation); at approximately ten seconds Claude has overtaken ChatGPT and the final composition — Claude ahead, ChatGPT below — remains visible (outcome).
• Motion vocabulary: continuous slow parallax on the background particle field; light sweeps across glass panels; counting HUD numerals; a flickering, dimming glow on the ChatGPT marker; a magenta light trail behind the Claude marker; scroll-scrubbed camera tilt on the stage.
• Composed first frame: dark arena ground #05070F, vertical luminous lane center-left, ChatGPT teal orb near the top, Claude magenta orb below it beginning its surge, top HUD bar with "CHATGPT" / "CLAUDE" and a 10.0s countdown, right telemetry rail with counting numerals.
• Reduced-motion state: static final-frame composition (Claude ahead, ChatGPT below) with an explicit Play race button; pressing it runs the ten-second race.

9. Non-Functional Requirements

• NFR-1 — Delivery shape (explicit): the deliverable is a web app or landing page with the animation built into the page, not a standalone video file. Rationale: explicit user constraint.
• NFR-2 — Duration fidelity (explicit): the race animation runs for approximately ten seconds. Rationale: explicit user requirement.
• NFR-3 — Public access (required_inference): the Landing page is publicly reachable with no account or sign-in; no protected state exists. Rationale: the Visitor's accepted goal requires only viewing the animation.
• NFR-4 — Reduced-motion accessibility (required_inference): with prefers-reduced-motion, a usable static arrangement is provided with a manual Play race control. Rationale: the overtake must remain legible without animation.
• NFR-5 — Readable text and controls (explicit direction constraint): headlines, labels, numbers, and controls stay whole and inside the viewport and their container at 375px, 768px, and 1280px. Rationale: readability requirement from the creative direction.
• NFR-6 — Responsive layout (explicit direction constraint): 12-column grid at 1280px collapsing to a single stacked column at 375px with the race stage full-bleed. Rationale: creative direction layout.

10. Tech Stack

• Frontend: React (single-page landing) with CSS animations / requestAnimationFrame-driven motion for the ten-second race; prefers-reduced-motion media query handling.
• Fonts: Space Grotesk (headings/body) and Space Mono (data numerals), loaded as web fonts.
• Delivery: static web app served as a public landing page; no backend, database, or authentication service is required by the accepted behavior.
• Containerization: docker-compose.yml with a single static-serving frontend service (e.g., a lightweight web server serving the built build). No additional services are needed.

11. Assumptions and Constraints

• A-1 (assumption): "About ten seconds" means the race animation's total runtime is approximately 10 seconds; exact frame timing may vary slightly by device.
• A-2 (assumption): The race plays automatically on page load for visitors without reduced-motion preference; replay is available after completion.
• A-3 (constraint, explicit): The animation is embedded in the page; no standalone video file is produced as the deliverable.
• A-4 (constraint, explicit): No accounts, data entry, backend workflows, or additional pages are part of the current product.
• A-5 (assumption): The two AI models are depicted as abstract luminous sigils/orbs, not official logos.

12. Glossary

• Race animation — the built-in ten-second sequence on the Landing page in which ChatGPT falls and Claude overtakes it.
• ChatGPT marker — the dimming teal orb representing ChatGPT, drifting downward during the race.
• Claude marker — the bright magenta orb representing Claude, surging upward past ChatGPT.
• HUD — the heads-up-display chrome: top bar with model names, countdown, and position readouts, plus the right telemetry rail.
• Countdown — the live 10.0s timer in the top HUD reflecting race progress.
• Reduced-motion mode — the state when prefers-reduced-motion is active, showing a static final frame with a Play race control.
• Final-frame composition — the static end state of the race: Claude ahead/above, ChatGPT below.