System Requirements Document for cyberpunk-mecha-robot

1. Introduction

cyberpunk-mecha-robot is a cinematic, single-subject showcase site built around one authoritative visual brief: a futuristic cyberpunk mecha robot rendered as a photoreal, 8K, Unreal Engine 5-grade cinematic medium shot. The product intent is to present that machine — dark metallic carbon-fiber armor plating, glowing blue neon circuit grids overlaying the body, a bright circular energy core reactor glowing intensely on its chest, bright white-blue light beams shooting from its mechanical eyes, wireframe holographic lines, high-tech engineering aesthetic, hyper-detailed mechanical parts, studio lighting — as the entire experience, delivered through a real-time WebGL hero and a HUD-style engineering readout rather than as a generated image asset.

The audience is sci-fi, gaming, and concept-art viewers who arrive to feel the machine power on: they want awe, voltage, and precision danger from a dark, high-tech engineering showcase. The site is a public, anonymous, browse-only experience — there is no account, no submission, and no transactional purpose stated or implied.

The product does not generate images or renders. The mecha visual is delivered as a real-time WebGL hero subject, CSS light layers, or a supplied pre-rendered still — never as an AI-generated asset.

2. System Overview

cyberpunk-mecha-robot is a custom-UI web experience with exactly one page: Landing. It is anonymously reachable and requires no identity, no session, and no stored user state. The page is a full-viewport cinematic stage: a dark carbon void (#04070D) in which a real-time WebGL mecha subject occupies the right two-thirds of the viewport, cropped at the right and bottom edges, with its chest reactor as the single brightest point on screen. Flush-left, a typographic HUD column carries the wordmark CYBERPUNK MECHA, tracked micro-labels, and one cyan call to action. Below the fold, the page continues as a sequence of full-bleed dark bands: a horizontal reactor-telemetry rail, a three-panel systems readout (power / armour / optics), a wireframe-schematic strip, and a closing spec sheet set as a ruled data table.

Actors. The only active human actor is the Site Visitor, who browses the mecha showcase and its engineering readouts. There are no other human roles. The WebGL renderer, the shader-driven reactor core, the telemetry ticker, and the scroll-driven HUD count-ups are system processes that support the visitor's experience; they are not actors and they do not own any human-facing responsibility.

Accepted behavior. The visitor can view the cinematic hero, read the wordmark and micro-labels, follow the reactor-telemetry rail, inspect the three systems panels, view the wireframe-schematic strip, read the closing spec sheet, and follow the single call to action. Hovering a system panel raises its luminous rim and slides in a data ticker. Scrolling acts as a camera dolly across the bands.

Ownership. All accepted behavior is owned by the single first-party page, Landing. No provider surface, external destination, or system process owns any visitor-facing responsibility.

Narrow exclusions. Image and render generation is explicitly out of scope. There is no account system, no authentication, no user-generated content, no commerce, no dashboard, and no multi-page navigation. The site is not a SaaS product and must not adopt a SaaS template look.

2a. Product Interpretation and Delivery Boundary

The authoritative brief is a visual brief, and the confirmed product commitment is to build a website or app around it. The correct reading is therefore: the mecha description is the theme and hero visual direction of the site, not a request to produce the image. The delivery boundary follows directly — the machine is rendered live in the browser as a WebGL subject with shader-driven light, with CSS light layers and a supplied pre-rendered still as fallbacks where WebGL is unavailable or motion is reduced. No image-generation capability exists anywhere in the product.

Access is fully public and anonymous. The Landing page is the anonymous entry surface; nothing on it is gated, and no identity is established, stored, or resumed. There is no protected destination, so no first-use identity establishment or returning verification is required or permitted.

Everything described in this document is current. No future-horizon capabilities were accepted by the user, and none are proposed here.

2b. Source Content Inventory

The authoritative reference directive declares uses: ["visual_inspiration", "content_source"] with authority: authoritative over the following source text:

Cinematic medium shot of a futuristic cyberpunk mecha robot, dark metallic carbon fiber armor plating, glowing blue neon circuit grids overlaying the body, a bright circular energy core reactor glowing intensely on its chest, bright white-blue light beams shooting out from its mechanical eyes, wireframe holographic lines, high-tech engineering aesthetic, photorealistic, 8k resolution, Unreal Engine 5 render, hyper-detailed mechanical parts, studio lighting

Verified factual entities and attributes carried into the product:

The directive's instruction is explicit: use this as the theme and hero visual direction for the site, and do not attempt to generate the image itself. The inventory above is therefore delivered as rendered light, geometry, and typographic HUD content — not as a generated asset.

2c. Page Content and Component Coverage

Landing

Information and state. The page presents a single cinematic subject and its engineering readout. There is no user-specific state, no persisted state, and no server-fetched state; all displayed values are presentational readouts authored as part of the page. The page has one meaningful state — the live hero — plus two degraded states: WebGL-unavailable and reduced-motion.

Primary action. Follow the single cyan call to action in the hero HUD column.

Supporting actions. Scroll the page to travel through the bands; hover a system panel to raise its rim and reveal its data ticker; read the telemetry rail as it ticks; read the spec sheet.

Domain entities. Mecha subject; chest reactor core; eye beams; circuit grid; armour plating; reactor telemetry (power draw, core temp, armour integrity); systems readout (power / armour / optics); wireframe schematic; spec sheet rows.

Components.

• Hero stage — full-bleed #04070D void, full viewport height. Hosts the mecha subject and the HUD column. The mecha occupies columns 6–12 and bleeds off the right and bottom edges; the HUD column sits flush-left in columns 1–5. Nothing is centred.
• Mecha subject (WebGL) — a real-time WebGL/R3F subject: dark carbon-fibre armour, blue neon circuit overlays, a glowing chest reactor, white-blue eye beams. Idles with a slow 24-second rotation and a breathing reactor bloom. Scan-line sweeps travel down the circuit grid every 6 seconds. Eye beams pulse at 0.4-second intervals.
• Reactor core — a WebGL torus with a shader-driven blue bloom that pulses at 0.4 seconds and reacts to cursor proximity. It is the single brightest point on screen, blooming radially from #2E8BFF to #7DF9FF.
• Wordmark — "CYBERPUNK MECHA" in Space Grotesk at clamp(44px, 9vw, 148px), tight 0.94 leading, spanning the viewport edge-to-edge on desktop. A 1px cyan wireframe line runs from the last letter across the mecha's shoulder and off the right edge.
• Micro-label stack — three 11px uppercase tracked (0.22em) labels beneath the wordmark.
• Hero CTA — one cyan call to action, the only centred element on the page.
• Reactor-telemetry rail — a horizontal HUD ticker carrying power draw, core temp, and armour integrity in Chakra Petch 500 tabular numerals. It scrolls continuously and wraps into rows under reduced motion.
• Systems readout — three cut-corner glass slabs: power, armour, optics. Each has a single luminous rim on one edge; on hover the rim goes full #7DF9FF and a 1px data ticker slides in beneath the title.
• Wireframe-schematic strip — diagrammatic blueprint line art and topographic engineering grids, plus macro crops of the reactor ring.
• Spec sheet — a closing ruled data table of mecha specifications.
• Section headers — 11px tracked uppercase micro-labels with a 24px luminous rule running to the right edge.

States.

• Loading — the WebGL hero initialises against the dark void; the HUD column, wordmark, micro-labels, and CTA render immediately and are never blocked by the 3D subject.
• Empty — not applicable; the page has no collections that can be empty.
• Success — the mecha idles, the reactor breathes, scan lines sweep, eye beams pulse, the telemetry rail ticks, and HUD numbers count up as their bands cross 60% viewport.
• Error / WebGL unavailable — the hero falls back to a pre-rendered still composited with CSS light layers, preserving the reactor bloom, the eye beams, and the HUD composition. All text and controls remain fully readable and operable.
• Reduced motion — rotation and scan lines freeze, count-ups are replaced with static values, all parallax collapses to flat stacking, the telemetry rail wraps into rows, and the reactor core falls back to a CSS radial glow. The page remains fully usable and every item remains fully readable.
• Recovery — if the WebGL context is lost, the page degrades to the still-plus-CSS-light hero without losing any readable content or control.

3. Functional Requirements

FR-1 — Cinematic mecha hero. As a Site Visitor, I should see a cinematic medium shot of a futuristic cyberpunk mecha robot as the hero of the page, so that the machine is the first and dominant thing I experience.

• Provenance: explicit (authoritative visual brief; confirmed product commitment).
• Lifecycle: Trigger — page load. Input — none. Observable result — a full-bleed dark stage with the mecha occupying the right two-thirds of the viewport, cropped at the right and bottom edges. Access state — anonymous, no identity required. Failure/recovery — if WebGL is unavailable, a pre-rendered still with CSS light layers is shown in the same composition. Continuation — the visitor scrolls into the bands below the fold.
• Acceptance: the mecha is visible on first paint of the hero stage at 375px, 768px, and 1280px; no readable text or control is covered by it.

FR-2 — Dark metallic carbon-fiber armor plating. As a Site Visitor, I should see the mecha rendered with dark metallic carbon-fiber armor plating, so that the machine reads as a real engineered object.

• Provenance: explicit.
• Lifecycle: Trigger — hero render. Observable result — armor surfaces read as dark metallic carbon fiber against the #04070D void. Failure/recovery — the still fallback preserves the same material read. Continuation — the visitor inspects the systems panels.
• Acceptance: armor plating is distinguishable from the background void and from the luminous circuit overlays.

FR-3 — Glowing blue neon circuit grids. As a Site Visitor, I should see glowing blue neon circuit grids overlaying the mecha's body, so that the machine reads as powered and alive.

• Provenance: explicit.
• Lifecycle: Trigger — hero render. Observable result — blue neon circuit grids overlay the body, with scan-line sweeps travelling down them every 6 seconds. Failure/recovery — under reduced motion the sweeps freeze while the grids remain visible. Continuation — the visitor follows the grid lines into the wireframe-schematic strip.
• Acceptance: circuit grids are visible on the body; the sweep is observable in motion and absent (but the grids still visible) under reduced motion.

FR-4 — Bright circular chest energy core reactor. As a Site Visitor, I should see a bright circular energy core reactor glowing intensely on the mecha's chest, so that the machine has a single unmistakable power source.

• Provenance: explicit.
• Lifecycle: Trigger — hero render. Observable result — a circular reactor on the chest is the single brightest point on screen, blooming radially from #2E8BFF to #7DF9FF and breathing on a continuous cycle. Failure/recovery — the CSS radial-glow fallback preserves the bloom under reduced motion and on low-power devices. Continuation — the visitor reads the reactor-telemetry rail.
• Acceptance: the chest reactor is the highest-luminance element in the hero composition.

FR-5 — White-blue eye beams. As a Site Visitor, I should see bright white-blue light beams shooting out from the mecha's mechanical eyes, so that the machine feels directed and dangerous.

• Provenance: explicit.
• Lifecycle: Trigger — hero render. Observable result — white-blue beams emit from the mechanical eyes and pulse at 0.4-second intervals. Failure/recovery — beams are preserved as static light in the still fallback and frozen under reduced motion. Continuation — the visitor continues into the systems readout.
• Acceptance: eye beams are visible and distinguishable from the chest reactor's blue.

FR-6 — Wireframe holographic lines. As a Site Visitor, I should see wireframe holographic lines as part of the mecha presentation, so that the high-tech engineering aesthetic is legible.

• Provenance: explicit.
• Lifecycle: Trigger — hero render and schematic strip. Observable result — thin blue wireframe lines extend from the mecha's shoulder across the full viewport width, tying the type to the machine, and recur as blueprint line art in the schematic strip. Failure/recovery — lines render as static strokes in all fallbacks. Continuation — the visitor reads the spec sheet.
• Acceptance: wireframe lines are present in the hero and in the schematic strip.

FR-7 — High-tech engineering aesthetic with hyper-detailed mechanical parts. As a Site Visitor, I should see hyper-detailed mechanical parts presented in a high-tech engineering aesthetic, so that the machine rewards close looking.

• Provenance: explicit.
• Lifecycle: Trigger — hero render and macro crops. Observable result — mechanical detail is visible at hero scale and in macro crops of the reactor ring. Failure/recovery — the still fallback preserves detail. Continuation — the visitor inspects the systems panels.
• Acceptance: mechanical detail is discernible at 1280px without zooming.

FR-8 — Photorealistic 8K / Unreal Engine 5-grade fidelity and studio lighting. As a Site Visitor, I should experience the mecha at photorealistic, 8K, Unreal Engine 5-grade fidelity under studio lighting, so that the reveal feels cinematic rather than illustrative.

• Provenance: explicit.
• Lifecycle: Trigger — hero render. Observable result — the subject is lit as a studio-lit cinematic medium shot against a dark void, with no flat illustration treatment. Failure/recovery — the pre-rendered still fallback carries the same lighting treatment. Continuation — the visitor scrolls through the bands.
• Acceptance: the hero reads as a lit photographic subject, not as flat vector art.

FR-9 — No image or render generation. As the product owner, I should have the site deliver the mecha visual without any image-generation capability, so that the explicit constraint is honored.

• Provenance: explicit (hard constraint).
• Lifecycle: Trigger — any page interaction. Observable result — the visual is delivered as WebGL, CSS light layers, or a supplied pre-rendered still; no generation endpoint, prompt surface, or generated asset exists. Failure/recovery — not applicable. Continuation — not applicable.
• Acceptance: no UI control, route, or service in the product generates an image.

FR-10 — Typographic HUD column. As a Site Visitor, I should see the wordmark "CYBERPUNK MECHA" set flush-left in a HUD column over the dark stage, so that the machine and the type share one composition.

• Provenance: explicit (creative direction, derived from the authoritative brief's theme role).
• Lifecycle: Trigger — page load. Observable result — the wordmark renders in Space Grotesk at clamp(44px, 9vw, 148px) with tight 0.94 leading, stacked over three 11px tracked micro-labels and one cyan CTA, in columns 1–5. Failure/recovery — the wordmark is plain text and renders in every fallback state. Continuation — the visitor follows the CTA or scrolls.
• Acceptance: the wordmark, micro-labels, and CTA are entirely inside the viewport and their container at 375px, 768px, and 1280px, and nothing covers any part of them.

FR-11 — Reactor-telemetry rail. As a Site Visitor, I should see a horizontal reactor-telemetry rail carrying power draw, core temp, and armour integrity, so that the machine reads as instrumented.

• Provenance: explicit (creative direction signature move).
• Lifecycle: Trigger — scroll into the rail band. Observable result — the rail scrolls as a HUD ticker with tabular numerals, and its numbers count up as the band crosses 60% viewport. Failure/recovery — under reduced motion the rail wraps into rows and values are static. Continuation — the visitor continues to the systems readout.
• Acceptance: every rail item becomes fully readable as it passes; under reduced motion every item can be brought fully into view.

FR-12 — Three-panel systems readout. As a Site Visitor, I should see a three-panel systems readout covering power, armour, and optics, so that I can read the machine's subsystems.

• Provenance: explicit (creative direction).
• Lifecycle: Trigger — scroll into the readout band. Observable result — three cut-corner glass slabs render with a single luminous rim each. Failure/recovery — panels stack without parallax under reduced motion. Continuation — the visitor hovers a panel.
• Acceptance: all three panels are present and their text and controls stay whole at 375px, 768px, and 1280px.

FR-13 — Panel hover response. As a Site Visitor, I should be able to hover a system panel and see its rim go full cyan with a data ticker sliding in, so that the interface feels responsive and instrumented.

• Provenance: explicit (creative direction).
• Lifecycle: Trigger — pointer hover on a system panel. Observable result — the panel's luminous border rises to full #7DF9FF and a 1px data ticker slides in beneath the title. Failure/recovery — on touch devices and under reduced motion the panel renders in its resting state with the ticker content still readable. Continuation — the visitor moves to the next panel or scrolls on.
• Acceptance: the hover state is observable and no readable text is covered by the ticker.

FR-14 — Wireframe-schematic strip. As a Site Visitor, I should see a wireframe-schematic strip of blueprint line art, topographic engineering grids, and macro crops of the reactor ring, so that the engineering aesthetic extends beyond the hero.

• Provenance: explicit (creative direction).
• Lifecycle: Trigger — scroll into the strip. Observable result — diagrammatic line art renders full-bleed. Failure/recovery — the strip renders statically under reduced motion. Continuation — the visitor reaches the spec sheet.
• Acceptance: the strip contains no stock people, no clip art, and no gradient blobs.

FR-15 — Closing spec sheet. As a Site Visitor, I should read a closing spec sheet set as a ruled data table, so that the showcase ends on concrete machine specifications.

• Provenance: explicit (creative direction).
• Lifecycle: Trigger — scroll to the end of the page. Observable result — a ruled data table renders with tabular numerals. Failure/recovery — the table renders identically in all fallback states. Continuation — the visitor follows the final CTA.
• Acceptance: the table's text stays entirely inside the viewport and its container at 375px, 768px, and 1280px.

FR-16 — Camera-dolly section transitions. As a Site Visitor, I should experience section transitions as camera dollies, so that scrolling feels like moving a camera through the machine.

• Provenance: explicit (creative direction).
• Lifecycle: Trigger — scroll. Observable result — each band enters with a 40px parallax offset while its HUD numbers count up from zero, then settles. Failure/recovery — under reduced motion all parallax collapses to flat stacking and count-ups are replaced with static values. Continuation — the visitor continues scrolling.
• Acceptance: the parallax offset is observable in motion and fully absent under reduced motion, with no content lost.

FR-17 — Reduced-motion and low-power fallback. As a Site Visitor who prefers reduced motion or is on a low-power device, I should get a usable static arrangement of the same content, so that I can read everything without animation.

• Provenance: explicit (creative direction accessibility requirement).
• Lifecycle: Trigger — prefers-reduced-motion or a low-power device. Observable result — rotation and scan lines freeze, count-ups become static values, parallax collapses to flat stacking, the telemetry rail wraps into rows, and the reactor core falls back to a CSS radial glow. Failure/recovery — this is the recovery path. Continuation — the visitor reads the full page.
• Acceptance: every item remains fully readable and every control remains operable in the reduced-motion arrangement.

FR-18 — Anonymous public access. As a Site Visitor, I should reach the full showcase without creating an account or signing in, so that nothing stands between me and the machine.

• Provenance: required_inference (the page contract sets access_requirement: none for the only page; no accepted journey requires identity continuity).
• Lifecycle: Trigger — navigating to the site. Observable result — the Landing page renders fully with no gate. Access state — anonymous. Failure/recovery — not applicable; there is no protected state to recover. Continuation — the visitor browses freely.
• Acceptance: no sign-in, sign-up, invitation, or provisioning surface exists anywhere in the product.

4. User Personas

Site Visitor

Product context. The Site Visitor is a sci-fi, gaming, or concept-art viewer who has arrived at a cinematic cyberpunk mecha showcase. They are not a customer, an operator, or an administrator — they are an audience. They arrive anonymously, with no account, no prior session, and no stored state, and they expect the machine to be the point of the visit rather than a backdrop to a product pitch.

Primary goal. To feel the machine power on: to experience a photoreal, cinematic mecha reveal with a glowing chest reactor, blue neon circuit grids, and white-blue eye beams, and to read enough engineering detail to believe the machine is real.

Distinct accepted responsibilities. The Site Visitor is the sole active human actor, and their responsibilities are entirely observational and exploratory:

• View the cinematic hero and its mecha subject.
• Read the wordmark, micro-labels, and the single call to action in the HUD column.
• Follow the reactor-telemetry rail as it ticks.
• Inspect the three systems panels (power, armour, optics) and hover them to reveal their data tickers.
• Read the wireframe-schematic strip.
• Read the closing spec sheet.

Relevant inputs or decisions. The visitor's only inputs are scrolling and pointer hover. Their only decision is whether to follow the single call to action or continue reading. They make no commitments, submit no data, and create no state.

Interactions with other accepted participants. There are none. No other human participant is affected by anything the Site Visitor does, and no other human participant acts on the visitor's behalf. The WebGL renderer, the reactor shader, the telemetry ticker, and the scroll-driven count-ups are system processes that serve the visitor; they are not participants and they hold no responsibility of their own.

Observable success. The visitor has seen the mecha at cinematic scale, watched the reactor breathe, followed the telemetry rail, read the systems readout, and reached the spec sheet — all without encountering a gate, a broken layout, or unreadable text at any viewport.

What makes this role distinct. This is a browse-only audience role with no recurring responsibility, no durable state, and no outcome beyond the experience itself. It is deliberately not a "user" in the account-holding sense: there is no profile, no history to resume, and no entitlement to bind. The role exists because the confirmed product commitment is a website built around the mecha visual, and a website built around a visual has exactly one human role — the person looking at it.

5. Core User Flows

Flow 1 — The cinematic reveal (Site Visitor)

1. The Site Visitor navigates to the site. No sign-in, invitation, or provisioning step occurs; the Landing page is anonymously reachable.
2. The Landing page renders its full-viewport hero stage against the #04070D void. The HUD column, wordmark "CYBERPUNK MECHA", three micro-labels, and the cyan CTA paint immediately and are never blocked by the 3D subject.
3. The WebGL mecha subject initialises in columns 6–12, bleeding off the right and bottom edges, cropped as a cinematic medium shot. Observable result: the machine is on screen at cinematic scale.
4. The chest reactor core blooms as the single brightest point on screen, breathing radially from #2E8BFF to #7DF9FF. The eye beams pulse white-blue at 0.4-second intervals. Scan-line sweeps travel down the blue neon circuit grids every 6 seconds. The subject idles on a slow 24-second rotation. Observable result: the machine reads as powered on.
5. The visitor moves the pointer near the reactor. Observable result: the shader-driven bloom reacts to cursor proximity.
6. Failure path: if WebGL is unavailable or the context is lost, the hero falls back to a pre-rendered still composited with CSS light layers, preserving the reactor bloom, the eye beams, and the HUD composition. All text and controls remain fully readable and operable. The visitor continues without interruption.
7. Continuation: the visitor scrolls, and the page transitions into the bands below the fold.

Flow 2 — Reading the machine's instrumentation (Site Visitor)

1. The Site Visitor scrolls past the hero. Observable result: the reactor-telemetry rail enters as a horizontal HUD ticker carrying power draw, core temp, and armour integrity in tabular numerals, and its numbers count up as the band crosses 60% viewport.
2. The visitor continues to the three-panel systems readout. Observable result: three cut-corner glass slabs render for power, armour, and optics, each with a single luminous rim on one edge.
3. The visitor hovers a system panel. Observable result: that panel's rim rises to full #7DF9FF and a 1px data ticker slides in beneath its title. No readable text is covered.
4. The visitor continues to the wireframe-schematic strip. Observable result: blueprint line art, topographic engineering grids, and macro crops of the reactor ring render full-bleed.
5. The visitor reaches the closing spec sheet. Observable result: a ruled data table of machine specifications renders with tabular numerals.
6. Continuation: the visitor follows the single cyan call to action, or leaves the page.

Flow 3 — Reduced-motion and low-power visit (Site Visitor)

1. The Site Visitor arrives with prefers-reduced-motion set, or on a low-power device.
2. The Landing page renders the same content in a static arrangement. Observable result: the mecha's rotation and the scan lines are frozen, the reactor core falls back to a CSS radial glow, and all parallax collapses to flat stacking.
3. The visitor scrolls. Observable result: HUD numbers appear as static values rather than counting up, and the reactor-telemetry rail wraps into rows so that every item can be brought fully into view.
4. The visitor hovers a system panel. Observable result: the panel renders in its resting state with the ticker content still readable.
5. Observable result: every headline, wordmark, label, number, card, and control remains entirely inside the viewport and its container at 375px, 768px, and 1280px.
6. Continuation: the visitor reads the full page exactly as in Flow 2, with no content lost.

6. Visuals Colors and Theme

Muse and headline. Gleb Kuznetsov — a cinematic mecha light-lab: dark carbon voids pierced by one blue reactor glow. The visual language is built from light in darkness, not from clean SaaS surfaces. The brief is inherently motion-first and volumetric, so every glow is radial and anchored to a physical part of the machine.

Palette (dark mode).

There is no white or near-white page ground. There are no gradient blobs; all glow is radial and anchored to a physical part of the mecha.

Typography.

• Headings: Space Grotesk, weights 500–700. Uppercase micro-kickers at 11px with 0.22em tracking. Display headlines set in tight 0.94 leading at clamp(44px, 9vw, 148px) so the wordmark spans the viewport.
• Body: Chakra Petch, weights 300–500, at 16–19px with 1.65 leading.
• Data readouts: Chakra Petch 500 with tabular numerals.
• Scale: 1.333 modular — 148 / 96 / 64 / 44 / 28 / 19 / 16 / 13 / 11. Display clamp(44px, 9vw, 148px); section head clamp(32px, 5vw, 64px); body 16–19px; micro-label 11px uppercase tracked.
• Forbidden: Inter, Roboto, Arial, Helvetica, Poppins, and system-ui for headings or body.

Shape language. Full-bleed dark field with hairline luminous strokes (1px #2E8BFF at 40% opacity) acting as a HUD grid. Panels are asymmetric glass slabs with 2px radius — almost sharp — floating over the void with a faint cyan rim light on one edge. Circular reactor motifs (gauges, rings, radial ticks) recur as the only rounded geometry; everything else is chamfered rectangles and diagonal cut corners that echo armour plating. No soft 24px pill cards, no blob shapes.

Layout. A single full-viewport hero stage: the mecha occupies columns 6–12, bleeding off the right and bottom edges, while a stacked HUD column sits flush-left in columns 1–5. Below the fold, sections alternate full-bleed dark bands on a 12-column grid: a horizontal reactor-telemetry rail, a three-panel systems readout (power / armour / optics), a wireframe-schematic strip, and a closing spec sheet set as a ruled data table. Micro-labels sit above every section in 11px tracked uppercase with a 24px luminous rule running to the right edge. Nothing is centred except the final CTA.

Imagery. One dominant photoreal mecha subject — dark carbon-fibre armour, blue neon circuit overlays, glowing chest reactor, white-blue eye beams — presented as a real-time WebGL hero or, where WebGL is unavailable, a pre-rendered still with CSS light layers. Supporting imagery is diagrammatic: wireframe holographic schematics, blueprint line art, topographic engineering grids, and macro crops of the reactor ring. No stock people, no clip art, no gradient blobs.

Explicitly avoided. White or near-white page backgrounds; centred headline + subtext + blue button SaaS heroes; gradient-blob heroes and soft violet-to-pink washes; Inter, Roboto, Arial, Helvetica, Poppins or system-ui for headings or body; grids of identical hover-lift cards with 24px radii; any attempt to generate the mecha image itself; playful bouncy easing or cartoon illustration; blue-on-white primary buttons in the #2563EB / #4F46E5 band.

7. Signature Design Concept

The lit machine and the typographic HUD sharing one dark stage.

The public entry is a single full-bleed #04070D void. The mecha fills the right two-thirds of the viewport at cinematic medium-shot scale, cropped at the right and bottom edges, so the machine reads as larger than the frame that contains it. Its chest reactor is the single brightest point on screen — a radial bloom from #2E8BFF to #7DF9FF — and it is the only place on the page where light originates.

Flush-left, in columns 1–5, a HUD column holds the wordmark CYBERPUNK MECHA set in Space Grotesk at clamp(44px, 9vw, 148px), stacked over three 11px tracked micro-labels and one cyan CTA. The wordmark spans the viewport edge-to-edge on desktop. A 1px cyan wireframe line runs from the last letter of the wordmark across the mecha's shoulder and off the right edge, tying the type to the machine in a single continuous stroke.

The composition is deliberately asymmetric and deliberately un-SaaS: no centred headline, no subtext-plus-button stack, no gradient blob. There is a lit machine and a typographic HUD, and they share one dark stage. The only centred element on the entire page is the final CTA.

This concept recomposes only accepted content, states, and controls — the mecha subject, the reactor, the wordmark, the micro-labels, the CTA, and the wireframe line. It introduces no new behavior, page, or destination.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

Focal subject. The mecha's chest reactor core — a real-time WebGL torus with a shader-driven blue bloom, sitting at the brightest point of a dark carbon-fibre machine.

Input → transformation → outcome thesis. As the visitor's pointer approaches the reactor, the shader reads cursor proximity and intensifies the bloom; the torus pulses on a 0.4-second cycle and the machine idles on a slow 24-second rotation, so that the reactor appears to be responding to the visitor's presence rather than merely looping. The outcome is the feeling that the machine has noticed them — achieved entirely through light and rotation, with no new capability.

Motion vocabulary. Cinematic and continuous. The hero mecha idles with a slow 24-second rotation and a breathing reactor bloom. Scan-line sweeps travel down the circuit grid every 6 seconds. Eye beams pulse at 0.4-second intervals. Scroll is a camera dolly: sections enter with a 40px parallax offset and HUD numbers count up as they cross 60% viewport. Hovering a system panel raises its luminous border to full cyan and slides a 1px data ticker.

Composed first frame. A full-bleed #04070D void. The mecha occupies the right two-thirds, cropped at the right and bottom edges, its chest reactor already blooming. Flush-left, the wordmark "CYBERPUNK MECHA" spans the viewport at display scale, with three tracked micro-labels and one cyan CTA stacked beneath it. A 1px cyan wireframe line runs from the last letter across the mecha's shoulder and off the right edge. Nothing is centred.

Reduced-motion state. Rotation and scan lines freeze, the reactor core falls back to a CSS radial glow, count-ups are replaced with static values, and all parallax collapses to flat stacking. The telemetry rail wraps into rows. Every headline, wordmark, label, number, card, and control remains entirely inside the viewport and its container at 375px, 768px, and 1280px.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED

The creative direction specifies hero dimensionality: webgl, so a real-time 3D hero is expected.

Scene. One crafted real-time object: a torus reactor core mounted in the mecha's chest cavity, surrounded by the machine's dark carbon-fibre armour shell and its blue neon circuit grid. The scene is compact and single-subject — it shows the product's defining state, which is the machine powered on.

Materials and light. Dark metallic carbon-fibre armour with low specular response; emissive blue neon circuit lines overlaying the shell; a shader-driven emissive torus core blooming radially from #2E8BFF to #7DF9FF; white-blue emissive eye beams. Studio-style key and rim lighting against a #04070D void, with no environment map that would brighten the background.

Motion. 24-second idle rotation; 0.4-second reactor pulse; 6-second scan-line sweep down the circuit grid; cursor-proximity response on the core bloom.

Fallback. Where WebGL is unavailable or the context is lost, the hero renders a pre-rendered still composited with CSS light layers, preserving the reactor bloom, the eye beams, and the HUD composition. Under reduced motion, the core falls back to a CSS radial glow and all rotation and sweeps freeze.

9. Non-Functional Requirements

NFR-1 — Readable text and controls stay whole. Headlines, wordmarks, labels, numbers, cards' text, 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. 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. Where the direction asks readable text or a control to be cropped, clipped, covered, or run off an edge, the text or control is kept whole and the gesture is carried with imagery or decoration instead.

• Provenance: explicit (creative direction accessibility rule). Rationale: the hero composition deliberately bleeds the mecha off two edges; this rule keeps that gesture from consuming the type.

NFR-2 — Moving and scrollable content. The reactor-telemetry rail may cross the viewport or container edge by design. It is judged by whether it actually moves or scrolls and whether every item becomes fully readable as it passes — never by the item cut at the edge in a still frame. Under prefers-reduced-motion, the rail wraps into rows so each item can be brought fully into view.

• Provenance: explicit (creative direction). Rationale: the rail is a HUD ticker; a static frame of it is not evidence of inaccessibility.

NFR-3 — Reduced-motion support. Under prefers-reduced-motion, rotation and scan lines freeze, count-ups are replaced with static values, all parallax collapses to flat stacking, the telemetry rail wraps into rows, and the reactor core falls back to a CSS radial glow. The page remains fully usable and every item remains fully readable.

• Provenance: explicit (creative direction). Rationale: the direction is motion-first; the static arrangement must be equally complete.

NFR-4 — WebGL degradation. Where WebGL is unavailable or the context is lost, the hero falls back to a pre-rendered still composited with CSS light layers, preserving the reactor bloom, the eye beams, and the HUD composition. No readable content or control is lost.

• Provenance: explicit (creative direction). Rationale: the hero is the product; it must never fail to a blank stage.

NFR-5 — No image generation. The product contains no image- or render-generation capability. The mecha visual is delivered as WebGL, CSS light layers, or a supplied pre-rendered still.

• Provenance: explicit (hard constraint). Rationale: the assistant cannot generate images or renders, and image/render generation is not part of the product scope.

NFR-6 — Anonymous, stateless delivery. The Landing page is anonymously reachable with no account, session, or persisted user state. No authentication, authorization, or role-based visibility exists.

• Provenance: required_inference (page contract sets access_requirement: none; no accepted journey requires identity continuity). Rationale: there is no durable actor-specific state, commitment, entitlement, or value transfer to bind to a participant.

NFR-7 — Performance on low-power devices. The hero must remain usable on low-power devices, falling back to the CSS radial glow and static arrangement rather than dropping content.

• Provenance: explicit (creative direction names low-power devices as a fallback trigger). Rationale: the audience arrives from arbitrary consumer hardware.

NFR-8 — No SaaS template look. The generic indigo/blue-on-white SaaS template is forbidden for this project. No white or near-white page ground, no centred headline-plus-subtext-plus-blue-button hero, no gradient blobs, no 24px-radius hover-lift card grids.

• Provenance: explicit (creative direction). Rationale: the product is a cinematic showcase, not a SaaS landing page.

10. Tech Stack

• Frontend: React, with a real-time WebGL hero rendered via React Three Fiber and Drei for the mecha subject and reactor core.
• Styling: CSS with custom properties for the palette tokens, clamp()-based fluid type, and prefers-reduced-motion media queries. No component library that would impose a SaaS surface language.
• Fonts: Space Grotesk (headings) and Chakra Petch (body and tabular data), self-hosted.
• Backend: none required. The product is a single anonymous, stateless page with no server-fetched state, no persistence, and no user data. No API, database, or queue worker is introduced.
• Containerization: Docker with a docker-compose.yml exposing the single frontend service, so the site can be built and served reproducibly.
• Kubernetes: not required. There is one stateless static-serving process with no scaling or orchestration need.

11. Assumptions and Constraints

Assumptions.

• A1 [Assumption — not specified by user]: The confirmed "website or app" is realized as a single-page web experience, because the accepted page contract contains exactly one page and no accepted journey requires navigation between destinations.
• A2 [Assumption — not specified by user]: The mecha subject is authored as real-time WebGL geometry and shaders, since the creative direction specifies hero dimensionality: webgl and the explicit constraint forbids generating the image.
• A3 [Assumption — not specified by user]: The telemetry values (power draw, core temp, armour integrity) and the spec-sheet rows are presentational readouts authored as part of the page, not live sensor data, because no data source was specified or accepted.
• A4 [Assumption — not specified by user]: The single cyan CTA in the hero HUD column is an in-page control that continues the visitor's scroll into the bands below the fold, since no external destination was specified.

Constraints.

• C1 (explicit, binding): The assistant cannot generate images or renders; image/render generation is not part of the product scope. No image-generation capability may be added to resolve any other requirement.
• C2 (explicit, binding): The mecha description is used as the theme and hero visual direction for the site; the image itself is not to be generated.
• C3 (explicit, binding): The generic indigo/blue-on-white SaaS template is forbidden for this project.
• C4 (explicit, binding): Inter, Roboto, Arial, Helvetica, Poppins, and system-ui are forbidden for headings and body.
• C5 (explicit, binding): No white or near-white page backgrounds; no gradient-blob heroes; no soft violet-to-pink washes; no 24px-radius hover-lift card grids; no playful bouncy easing or cartoon illustration; no blue-on-white primary buttons in the #2563EB / #4F46E5 band.
• C6 (explicit, binding): Readable text and controls stay whole at every viewport; imagery, decoration, and motion carry any cropping or bleeding gesture instead.
• C7 (required_inference): Access is anonymous and stateless. No account, session, or role-based visibility is introduced, because no accepted journey requires identity continuity.

Future horizon. None. No future-horizon capabilities were accepted by the user, and none are proposed in this document.

12. Glossary

• Mecha — The futuristic cyberpunk robot that is the single subject of the product, described in the authoritative brief as a cinematic medium shot with dark metallic carbon-fiber armor plating, glowing blue neon circuit grids, a bright circular chest energy core reactor, white-blue eye beams, and wireframe holographic lines.
• Reactor core — The bright circular energy core on the mecha's chest; the single brightest point on screen and the focal subject of the hero motion brief.
• Circuit grid — The glowing blue neon lines overlaying the mecha's body, down which scan-line sweeps travel every 6 seconds.
• Eye beams — The bright white-blue light beams emitted from the mecha's mechanical eyes, pulsing at 0.4-second intervals.
• HUD column — The flush-left typographic column in the hero (columns 1–5) holding the wordmark, micro-labels, and CTA.
• Wordmark — The text "CYBERPUNK MECHA" set in Space Grotesk at clamp(44px, 9vw, 148px).
• Reactor-telemetry rail — The horizontal HUD ticker carrying power draw, core temp, and armour integrity in tabular numerals.
• Systems readout — The three cut-corner glass slabs covering power, armour, and optics.
• Wireframe-schematic strip — The band of blueprint line art, topographic engineering grids, and macro crops of the reactor ring.
• Spec sheet — The closing ruled data table of machine specifications.
• Camera dolly — The scroll behavior in which each band enters with a 40px parallax offset while its HUD numbers count up, then settles.
• Site Visitor — The sole active human persona: an anonymous sci-fi, gaming, or concept-art viewer who browses the showcase.
• Reduced motion — The prefers-reduced-motion arrangement in which rotation and scan lines freeze, count-ups become static, parallax collapses to flat stacking, the telemetry rail wraps into rows, and the reactor core falls back to a CSS radial glow.