This document specifies first-person-perspective, a browser-based experience in which the player holds and fires a gun seen from their own eyes. The product intent is narrow and deliberate: present a gun in a first-person perspective, make that view feel technical, tense and immersive, and let the player fire it while the shot data becomes the visual language of the scene.
The audience is the Player — a person who wants to experience a first-person weapon view directly in the browser, without a broader game, campaign, inventory, or multiplayer context. The experience is a single, self-contained first-person gun view: the gun is a real-time 3D subject, it sways with the pointer, it kicks on fire, and a teal particle field and corner readouts respond to each shot.
The requester asked for this System Requirements Document to describe the product itself; it is not a product feature, page, or workflow.
prefers-reduced-motion.first-person-perspective is delivered as a first-party web application. The React frontend renders the experience; a shared FastAPI backend serves the application's APIs; MariaDB is available for application-owned persistent data. The first-person gun view itself is a real-time client-side 3D scene (WebGL/R3F) rendered in the browser.
Delivery and access ownership:
Current versus future boundary: only the first-person gun view, its firing response, its pointer sway, and its shot readouts are current. Anything beyond that — additional weapons, targets with scoring rules, progression, multiplayer, persistence of scores — is not part of this delivery and is not implied by the pages or requirements below.
FR-1 — First-person gun view (explicit) As a Player, I should see a gun rendered from the first-person perspective — from my own eyes — so that the experience is a first-person weapon view.
FR-2 — Pointer sway (explicit, from creative direction) As a Player, I should see the gun sway with my pointer movement so that the view feels held and alive.
prefers-reduced-motion, the gun holds a still composed pose.FR-3 — Fire with recoil (explicit, from creative direction) As a Player, I should fire the gun and feel a short sharp recoil kick so that firing reads as immediate and tense.
FR-4 — Muzzle particle burst (explicit, from creative direction) As a Player, I should see a teal particle field spread from the muzzle on each shot so that the shot data becomes visible.
FR-5 — Shot, hit and accuracy readouts (explicit, from creative direction) As a Player, I should see corner readouts count shots, hits and accuracy as they change so that I can read my performance at a glance.
FR-6 — Enter the experience (required_inference) As a Player, I should enter the first-person gun view from the Landing page without an account so that I can start playing immediately.
FR-7 — Return to Landing (required_inference) As a Player, I should be able to leave the Play view and return to Landing so that I can end or restart the session.
prefers-reduced-motion, the gun stays still, a static muzzle flash replaces the kick and burst, and the readouts still update so firing remains fully usable.The creative direction — Data made physical for a first-person gun, muse Refik Anadol — is authoritative for this section.
Mode: dark only. Near-black ground holds roughly 80% of the screen.
Colour tokens (exact hex, by role):
| Role | Hex | Use |
|---|---|---|
| Background | #07080A | Full-bleed canvas ground, the void behind the headline |
| Surface | #12151A | Data rail, readout backing, subtle panels |
| Text | #F2F4F7 | All readable text — white text only |
| Primary | #FF6A1A | The gun's hot accent and the fire action |
| Accent | #5CE1C8 | Data, aim traces, particle field, muzzle burst |
| Muted | #7C8794 | Secondary mono labels, inactive readout units |
Typography:
clamp(...) with their mobile size as the floor.Shape language: full-bleed dark canvas; thin luminous strokes; soft particle fields; round data rings. No hard cards.
Layout: the play view fills the screen. A thin data rail sits at the left edge. Readouts hug the corners and stay clear of the centre. The headline sits top-left over empty black, not centred.
Imagery: a generative particle field made from shot data; the gun is a real-time 3D subject with a dark metal finish and a warm rim light.
Readability rule: headlines, wordmarks, labels, numbers and controls stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling to fit, and no imagery, decoration or motion covers any part of them.
Avoid: a centred headline with a blue button and a gradient blob; flat clip-art guns or stock soldier photos; a grid of identical cards with hover lift; bright white backgrounds or pastel gradients; the generic indigo/blue-on-white SaaS template.
The public entry is a full-bleed dark scene that makes the gun's data physical before the player ever fires.
#07080A fills the viewport. The headline sits top-left at 96px in light Space Grotesk, mixed case, tight tracking, over empty black — deliberately not centred. The real-time 3D gun sits low right at large scale, dark metal catching a warm #FF6A1A rim light. A teal #5CE1C8 particle field flows slowly behind it, like Anadol's luminous data fields.Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: webgl
Landing Hero Motion Brief
Landing Hero 3D Scene Brief — DIRECTION-DERIVED
Play motion: the gun sways with the pointer; each shot is a short sharp recoil kick plus a teal muzzle burst; corner readouts count up on each shot. Under reduced motion, the gun holds still, a static muzzle flash replaces the kick and burst, and readouts update immediately.
prefers-reduced-motion, the experience provides a usable static arrangement — still gun, static muzzle flash, immediate readout updates — with all text and controls whole and readable.docker-compose.yml with the frontend, backend and database services; the frontend reaches the backend, and the backend reaches MariaDB.prefers-reduced-motion state in which animation is replaced by a usable static arrangement.
No comments yet. Be the first!