System Requirements Document for hexagonal-tiled-grid

1. Introduction

hexagonal-tiled-grid is a portfolio and commission website for an independent digital artist working in a sci-fi / space-art register. The product intent, taken directly from the authoritative requirement thread, is twofold and inseparable:

1. Present the artist's work as a hexagonal tiled grid — the portfolio is not a conventional rectangular card gallery; the hexagon is the organizing atom of the entire presentation.
2. Offer commissioned work — visitors must be able to understand the commission offering and submit a commission request through the site.

Both are wrapped in an explicit, hard visual constraint: a modernistic space style. This is not decoration layered onto a generic site; the space aesthetic and the hex grid are the product's identity.

The audience is the artist's sci-fi / space-art public — concept-art collectors, game and film art directors, and fans who buy commissions — plus the artist themselves, who maintains the portfolio and handles incoming requests.

2. System Overview

The current delivery is a first-party web application with a public, account-free browsing and commissioning surface, and a protected owner workspace.

Actors. Three accepted human personas operate the product: the Portfolio Visitor (browses the hex grid, views individual pieces, no account), the Commission Client (understands the offering and submits a commission request), and the Site Owner / Artist (maintains portfolio content and manages incoming commission requests). The application itself is a non-persona system actor that stores portfolio content and commission request records.

Accepted behavior. Visitors land on a public entry surface, browse the portfolio as an interlocking hexagonal mosaic, open an individual piece for focused viewing, read the commission offering, and submit a commission request. The artist enrolls once, verifies on return, maintains the portfolio shown to visitors, and reviews and manages incoming commission requests.

Ownership. All nine destinations are application-owned custom pages. Public pages (Landing, Portfolio, Piece Details, Commission, Commission Request) require no account. The owner workspace (Portfolio Manager, Commission Requests) is protected and reachable only after identity is established; Login and Sign Up are the anonymous entry surfaces that establish that identity.

Narrow exclusions. No payment processing, no checkout, no messaging/chat between client and artist, no third-party marketplace, no rectangular card grid as the primary portfolio presentation, and no account requirement for public browsing or commission submission.

2a. Product Interpretation and Delivery Boundary

The site is delivered as a first-party application with its own custom interface. Public work — browsing the hex-tiled portfolio, viewing a piece, reading about commissions, and submitting a commission request — is deliberately account-free: a visitor or prospective client never has to enroll to look at art or to ask for a commission. Identity exists only where continuity genuinely requires it: the artist must privately own and resume their portfolio content and their queue of commission requests, so those two workspaces are protected, and the application owns the enrollment and returning-verification surfaces that grant access to them.

The current horizon covers the public portfolio and commission path plus the artist's protected management of portfolio content and commission requests. Nothing beyond that is committed here: no payment or invoicing, no client-side accounts or request-tracking dashboards, no artist-to-client messaging, and no multi-artist or marketplace features are part of the current delivery. The modernistic space aesthetic and the hexagonal tiled grid are current, binding constraints on every surface, not future polish.

2b. Source Content Inventory

No reference directive in this project declares a content_source, so no source content inventory is included. Portfolio pieces, their titles, media, and descriptions are authored by the Site Owner / Artist through the Portfolio Manager; no external factual collection is supplied to reproduce.

2c. Page Content and Component Coverage

The page inventory below is the closed, ordered page contract for this project. Each page appears exactly once.

Landing

• Information / state: Anonymous first impression of the artist's cosmos. Full-viewport deep-space void with a drifting parallax starfield; an interlocking cluster of seven large hex tiles, each holding one piece of artwork, the centre hex larger and lit cyan while the ring fades toward near-black. Oversized display headline set in two stacked lines, bleeding to the right viewport edge and overlapping the hex cluster. A full-width HUD strip reading the site's section identity and piece range. A live coordinate readout.
• Primary actions: Enter the Portfolio; go to the Commission offering via the glass capsule CTA.
• Supporting actions: Navigate to any of the seven featured pieces directly from its hex tile; reach Login / Sign Up from the HUD frame.
• Domain entities: Featured portfolio piece (image, title, piece ID), site section identity, piece range.
• Component responsibilities: Hero hex cluster (interlocking, offset rows, pointy-top tiles with luminous strokes); starfield layer (parallax, 0.2x scroll speed); display headline layer (type in front of art); HUD strip; glass capsule CTA; coordinate readout; persistent HUD frame (corner brackets, right-edge hex-pip section index).
• States: Loading — starfield and hex cluster fade-and-scale in with diagonal 60ms stagger. Empty — if fewer than seven pieces exist, the cluster renders the available tiles and the remaining positions stay as unlit hex outlines rather than breaking the mosaic. Success — hero renders with featured artwork and both entry paths visible. Error — if featured artwork fails to load, the affected hex renders as an unlit outlined tile with its piece ID label, and the rest of the hero remains usable. Recovery — the Portfolio and Commission links remain reachable regardless of hero media state.

Portfolio

• Information / state: The artist's complete body of work as a true interlocking hexagonal mosaic — pointy-top hex tiles in offset rows so edges interlock with no gaps. Each tile shows a piece's artwork inside its hex frame with a faint holographic edge glow. HUD frame persists with a coordinate readout that updates to the hovered piece's ID.
• Primary actions: Open a piece's Piece Details.
• Supporting actions: Hover a tile to expand it and nudge neighbours; scan the right-edge hex-pip index; return to Landing or move to Commission.
• Domain entities: Portfolio piece (artwork image, title, piece ID, medium/category, creation year).
• Component responsibilities: Hex mosaic layout engine (offset rows, interlocking, reflow to a single column of hexes on mobile); tile component (clip-path hex, 1.5px luminous stroke, hover scale to 1.15x with neighbour displacement, single light sweep across the face at 900ms); scroll-stagger reveal (fade-and-scale, 60ms diagonal stagger); HUD frame and coordinate readout; hex-pip section index.
• States: Loading — tiles fade-and-scale in on scroll in a diagonal sweep. Empty — when the artist has published no pieces, the mosaic area shows an unlit hex field with a short message that the gallery is being prepared, and the Commission path stays available. Success — full mosaic renders, every tile opens its piece. Error — a tile whose artwork fails to load renders as an outlined hex with its title and piece ID, and remains openable. Recovery — the mosaic remains navigable; failed tiles can be retried by reloading the page.

Piece Details

• Information / state: Focused view of one piece selected from the grid. Split layout: hex-framed artwork on the left, glass data panel on the right carrying the piece's title, piece ID, medium, dimensions, creation year, and description. HUD coordinate readout shows this piece's ID.
• Primary actions: Return to the Portfolio; proceed to the Commission offering to request work in a similar vein.
• Supporting actions: Move to the previous or next piece without returning to the grid.
• Domain entities: Portfolio piece (artwork image, title, piece ID, medium, dimensions, creation year, description).
• Component responsibilities: Hex-framed artwork viewer (high-res render inside its hex frame with holographic edge glow); glass data panel (rounded 20px, 1px cyan-tinted border, backdrop blur, inner top highlight); piece navigation controls; HUD frame and coordinate readout.
• States: Loading — artwork resolves inside its hex frame while the data panel shows its structure. Empty — not applicable; this page is only reached with a selected piece. Success — artwork and full piece metadata render. Error — if the piece cannot be found or its artwork fails, the page shows the piece ID with a clear unavailable state and a link back to the Portfolio. Recovery — the visitor can always return to the grid or step to an adjacent piece.

Commission

• Information / state: Public explanation of the commission offering before a request is submitted — what the artist takes on, how the process runs, and what a client receives. The process is presented as a schematic HUD diagram: the timeline as an orbital path and deliverables as labelled modules, not a wall of prose.
• Primary actions: Begin a commission request.
• Supporting actions: Return to the Portfolio to review prior work; reach Login / Sign Up from the HUD frame.
• Domain entities: Commission offering (accepted work types, process stages, deliverable modules).
• Component responsibilities: Offering explanation blocks on glass panels; schematic process diagram (orbital timeline, labelled deliverable modules); primary CTA into Commission Request; HUD frame.
• States: Loading — offering content and diagram resolve in place. Empty — if the artist has not published offering details, the page states that commission details are being updated and keeps the request path visible. Success — offering and process render with the request CTA. Error — if offering content fails to load, the page shows a clear unavailable state with a retry and keeps the request path reachable. Recovery — the visitor can still proceed to submit a request or return to the Portfolio.

Commission Request

• Information / state: Public submission surface for a visitor's commissioned artwork request, presented as a staged HUD checklist with a circular progress gauge and scanline step transitions — not a long scrolling form. Steps collect the client's contact details, the type of work wanted, subject and style direction, intended use, and any reference or budget/timeline notes the client chooses to give.
• Primary actions: Complete each stage and submit the commission request.
• Supporting actions: Step back to a previous stage; return to the Commission page to re-read the offering.
• Domain entities: Commission request (client name, contact email, work type, subject/style direction, intended use, references, budget/timeline notes, submission timestamp, request status).
• Component responsibilities: Staged step controller with circular progress gauge; per-stage input groups; scanline step transitions; validation feedback per stage; submission action and confirmation panel; HUD frame.
• States: Loading — the staged checklist initializes at stage one with the progress gauge at zero. Empty — a fresh request begins with all stages unset and the gauge empty. Success — on submission the client sees an explicit acknowledgement that the request was received, with the request's identifying reference. Error — invalid or missing required input blocks advancement with an inline message on the offending field; a failed submission preserves all entered values and offers retry. Recovery — the client can correct the flagged stage and resubmit without re-entering prior stages.

Login

• Information / state: Anonymous returning-verification surface for the Site Owner / Artist. Collects the owner's credentials and returns them to the protected workspace they were seeking.
• Primary actions: Verify identity and continue to Portfolio Manager or Commission Requests.
• Supporting actions: Move to Sign Up if the owner has not yet enrolled.
• Domain entities: Owner identity (email, credential).
• Component responsibilities: Credential form on a glass panel; submit action; error messaging; link to Sign Up; HUD frame.
• States: Loading — submit action shows an in-progress state while verification runs. Empty — the form starts blank. Success — verification succeeds and the owner lands on the protected workspace they requested. Error — incorrect credentials show a clear, non-revealing error and keep the entered email; repeated failures do not lock the owner out permanently. Recovery — the owner can retry, or move to Sign Up.

Sign Up

• Information / state: Anonymous self-service enrollment surface for the Site Owner / Artist — the first-use path, since no provisioning or invitation boundary exists. Collects the owner's identity details and establishes their account.
• Primary actions: Create the owner account and continue into the protected workspace.
• Supporting actions: Move to Login if the owner already has an account.
• Domain entities: Owner identity (name, email, credential).
• Component responsibilities: Enrollment form on a glass panel; submit action; validation feedback; link to Login; HUD frame.
• States: Loading — submit action shows an in-progress state while the account is created. Empty — the form starts blank. Success — the account is created, the owner is verified, and they land on the protected workspace. Error — invalid or already-registered details are flagged inline without discarding other entered values. Recovery — the owner can correct the flagged field and resubmit, or move to Login.

Portfolio Manager

• Information / state: Protected workspace where the Site Owner / Artist maintains the portfolio content shown to visitors. Lists existing pieces with their title, piece ID, medium, and publication state, and provides the editing surface for a selected piece.
• Primary actions: Add a new portfolio piece; edit an existing piece's artwork, title, medium, dimensions, year, and description; publish or unpublish a piece.
• Supporting actions: Reorder pieces within the grid; remove a piece; preview how the piece appears in the hex mosaic.
• Domain entities: Portfolio piece (artwork image, title, piece ID, medium, dimensions, creation year, description, publication state, grid position).
• Component responsibilities: Piece list with publication state; piece editor form; artwork upload/replace control; publish/unpublish control; reorder control; hex-mosaic preview; HUD frame.
• States: Loading — the piece list resolves with its structure visible. Empty — with no pieces yet, the workspace shows an empty state prompting the owner to add their first piece. Success — saved changes are confirmed and reflected in the list and preview. Error — a failed save preserves the owner's edits and reports the failure; an artwork upload that fails leaves the existing artwork intact. Recovery — the owner can retry the save or upload without losing entered content.

Commission Requests

• Information / state: Protected, revisitable workspace where the Site Owner / Artist reviews and manages incoming commission requests. Lists requests with client name, work type, submission timestamp, and status, and opens a selected request's full detail.
• Primary actions: Open a request's detail; update a request's status as the artist works through it.
• Supporting actions: Filter or sort the request list by status and recency; return to a request later.
• Domain entities: Commission request (client name, contact email, work type, subject/style direction, intended use, references, budget/timeline notes, submission timestamp, status).
• Component responsibilities: Request list with status and recency; request detail panel; status control; HUD frame.
• States: Loading — the request list resolves with its structure visible. Empty — with no requests yet, the workspace shows an empty state explaining that submitted requests will appear here. Success — the list and detail render, and a status change is confirmed. Error — a failed status update preserves the prior status and reports the failure. Recovery — the owner can retry the update; the request record itself is never lost by a failed update.

3. Functional Requirements

Each requirement is a distinct story point with its provenance and observable acceptance.

FR-1 — Hexagonal tiled portfolio presentation (explicit) As a Portfolio Visitor, I should see the artist's work presented as a hexagonal tiled grid, so that the portfolio reads as the interlocking hex mosaic the site is built around.

• Trigger/input: Opening the Portfolio page.
• Observable result: Pointy-top hex tiles in true offset rows, edges interlocking with no gaps, each tile carrying one piece of artwork inside its hex frame.
• Access state: Public, no account.
• Failure/recovery: A tile whose artwork fails to load renders as an outlined hex with its title and piece ID and remains openable.
• Continuation: The visitor can open any tile's Piece Details.

FR-2 — Tile hover expansion and light sweep (explicit) As a Portfolio Visitor, I should have a hovered hex tile expand and nudge its neighbours while a light sweep crosses its face, so that the grid feels like a physical, interlocking surface rather than a static image.

• Trigger/input: Hovering a hex tile.
• Observable result: The tile scales to 1.15x, neighbours displace slightly, and a single light sweep crosses the tile face over 900ms.
• Access state: Public, no account.
• Failure/recovery: Under prefers-reduced-motion, the effect collapses to an instant state change with no sweep.
• Continuation: Clicking the tile opens its Piece Details.

FR-3 — Mobile hex reflow (explicit) As a Portfolio Visitor on a small screen, I should see the hex mosaic reflow into a single column of hexes, so that the interlocking hex presentation survives on mobile instead of degrading into rectangles.

• Trigger/input: Viewing the Portfolio at mobile width.
• Observable result: The mosaic reflows to a single column of hex tiles; tiles remain hex-shaped and openable.
• Access state: Public, no account.
• Failure/recovery: If reflow cannot complete, tiles remain individually readable and openable rather than overlapping.
• Continuation: The visitor continues browsing and opening pieces.

FR-4 — Individual piece viewing (explicit) As a Portfolio Visitor, I should open a single piece from the grid and view it in a focused layout, so that I can examine the artwork and its details without the surrounding mosaic.

• Trigger/input: Selecting a hex tile from the Portfolio.
• Observable result: Piece Details renders the artwork inside its hex frame on the left and a glass data panel on the right with title, piece ID, medium, dimensions, creation year, and description.
• Access state: Public, no account.
• Failure/recovery: If the piece cannot be found or its artwork fails, the page shows the piece ID with a clear unavailable state and a link back to the Portfolio.
• Continuation: The visitor returns to the grid or steps to an adjacent piece.

FR-5 — Commission offering explanation (explicit) As a Commission Client, I should read a clear explanation of the commission offering before submitting anything, so that I understand what the artist takes on and what I would receive.

• Trigger/input: Opening the Commission page.
• Observable result: The offering and its process render as a schematic HUD diagram — timeline as an orbital path, deliverables as labelled modules — with a CTA into the request.
• Access state: Public, no account.
• Failure/recovery: If offering content fails to load, the page shows an unavailable state with retry and keeps the request path reachable.
• Continuation: The client begins a commission request.

FR-6 — Commission request submission (explicit) As a Commission Client, I should submit a commission request through a staged HUD checklist, so that I can ask for commissioned work without an account and without a long scrolling form.

• Trigger/input: Beginning a request from the Commission page and completing each stage.
• Observable result: A circular progress gauge advances through the stages; on submission the client sees an explicit acknowledgement that the request was received, with the request's identifying reference.
• Access state: Public, no account.
• Failure/recovery: Invalid or missing required input blocks advancement with an inline message on the offending field; a failed submission preserves all entered values and offers retry.
• Continuation: The client can correct the flagged stage and resubmit, or return to the Portfolio.

FR-7 — Commission request record (required_inference) As a Commission Client, I should have my submitted request durably recorded and retrievable by the artist, so that my inquiry is not lost after I submit it.

• Trigger/input: Successful submission of a commission request.
• Observable result: The request is stored with client name, contact email, work type, subject/style direction, intended use, references, budget/timeline notes, submission timestamp, and an initial status, and appears in the artist's Commission Requests workspace.
• Access state: The client submits publicly; the stored record is visible only in the artist's protected workspace.
• Failure/recovery: If storage fails, the client is told the request was not received and can retry with their values intact.
• Continuation: The artist reviews the request; the client retains the acknowledgement reference.

FR-8 — Owner self-service enrollment (required_inference) As a Site Owner / Artist, I should enroll myself on first use, so that I can establish the identity that owns my portfolio content and commission request records.

• Trigger/input: Opening Sign Up and submitting identity details.
• Observable result: The account is created, the owner is verified, and they land on the protected workspace.
• Access state: Anonymous entry surface; protected state remains unavailable until identity is established.
• Failure/recovery: Invalid or already-registered details are flagged inline without discarding other entered values; the owner can correct and resubmit or move to Login.
• Continuation: The owner proceeds into Portfolio Manager or Commission Requests.

FR-9 — Owner returning verification (required_inference) As a Site Owner / Artist, I should verify my identity on return, so that I can resume my portfolio management and commission request records.

• Trigger/input: Opening Login and submitting credentials.
• Observable result: Verification succeeds and the owner lands on the protected workspace they requested.
• Access state: Anonymous entry surface; Portfolio Manager and Commission Requests remain inaccessible until verification succeeds.
• Failure/recovery: Incorrect credentials show a clear, non-revealing error and keep the entered email; the owner can retry or move to Sign Up.
• Continuation: The owner works in the protected workspace.

FR-10 — Portfolio content maintenance (required_inference) As a Site Owner / Artist, I should add, edit, publish, unpublish, reorder, and remove portfolio pieces, so that the hex grid shown to visitors reflects my current body of work.

• Trigger/input: Actions in the protected Portfolio Manager.
• Observable result: Saved changes are confirmed and reflected in the piece list and the hex-mosaic preview; published pieces appear in the public Portfolio.
• Access state: Protected; requires verified owner identity.
• Failure/recovery: A failed save preserves the owner's edits and reports the failure; a failed artwork upload leaves the existing artwork intact.
• Continuation: The owner continues editing or returns to the public Portfolio to confirm the result.

FR-11 — Commission request review and management (required_inference) As a Site Owner / Artist, I should review incoming commission requests and update their status as I work through them, so that I can manage the queue and return to any request later.

• Trigger/input: Opening the protected Commission Requests workspace and selecting a request.
• Observable result: The request list shows client name, work type, submission timestamp, and status; opening a request shows its full detail; a status change is confirmed and persists.
• Access state: Protected; requires verified owner identity.
• Failure/recovery: A failed status update preserves the prior status and reports the failure; the request record is never lost by a failed update.
• Continuation: The owner returns to the list or opens another request.

FR-12 — Modernistic space visual style (explicit) As a Portfolio Visitor, I should experience the whole site in a modernistic space aesthetic, so that the presentation matches the sci-fi / space character of the work.

• Trigger/input: Viewing any page.
• Observable result: Deep-space ground, luminous hex strokes, glass panels, HUD frame with corner brackets and coordinate readout, oversized display typography, and the specified palette and type system applied consistently.
• Access state: Applies to public and protected surfaces alike.
• Failure/recovery: If a decorative layer (starfield, glow) cannot render, the page remains fully legible and usable on the dark ground.
• Continuation: The visitor continues browsing or commissioning.

FR-13 — Persistent HUD frame and coordinate readout (explicit) As a Portfolio Visitor, I should see a persistent HUD frame with a coordinate readout that tracks the piece I am hovering or viewing, so that the interface reads as a cockpit over the artwork.

• Trigger/input: Hovering a tile or opening a piece.
• Observable result: The top-left coordinate readout updates to the hovered or viewed piece's ID; the right-edge hex-pip index lights cyan as sections scroll past.
• Access state: Public, no account.
• Failure/recovery: If no piece is hovered or selected, the readout shows a neutral idle state rather than a stale value.
• Continuation: The visitor keeps browsing with the frame in place.

FR-14 — Cinematic motion with reduced-motion respect (explicit) As a Portfolio Visitor, I should experience cinematic, continuous motion — drifting starfield, staggered tile reveals, scanline page transitions — that collapses gracefully when I ask for reduced motion.

• Trigger/input: Scrolling and navigating; or the OS prefers-reduced-motion setting.
• Observable result: Starfield parallaxes at 0.2x scroll speed, tiles fade-and-scale in with 60ms diagonal stagger, page transitions wipe with a scanline, easings run 600–900ms on cubic-bezier(0.16,1,0.3,1); under reduced motion everything collapses to instant fades and a static field.
• Access state: Public, no account.
• Failure/recovery: If motion cannot run, content renders immediately in its final state.
• Continuation: The visitor continues browsing without loss of function.

4. User Personas

Portfolio Visitor

Product context. A concept-art collector, game or film art director, or fan who has arrived to look at the artist's work. They have no account and no intention of creating one; the site must let them evaluate the art immediately.

Primary goal. Explore the hexagonal tiled gallery and view individual pieces in enough detail to judge the artist's craft.

Distinct accepted responsibilities. The Portfolio Visitor is the only persona whose work is purely evaluative: they browse the mosaic, hover tiles, open pieces, and move between adjacent pieces. They never submit anything and never manage content.

Relevant inputs or decisions. Which tile to hover, which piece to open, whether to step to the next piece or return to the grid, and whether the work is compelling enough to move on to the commission path.

Interactions with other accepted participants. None directly. Their browsing is what the Site Owner / Artist's published content is for, and their evaluation is the step that precedes a Commission