System Requirements Document for solar-epc

1. Introduction

This document specifies the system requirements for solar-epc, the public website of Auron Energy, a solar EPC (engineering, procurement, and construction) solution provider operating in India. The product intent is a single, publicly accessible marketing and credibility website that presents the firm's solar EPC offering through dynamic content, real-time 3D object elements, and a solar-related video showcase.

The audience is twofold: prospective solar clients — developers, asset owners, procurement leads, and institutional or municipal buyers evaluating whether Auron Energy can engineer, procure, and construct megawatt-scale plants — and general site visitors who want to understand what the company does and where it operates. Neither audience is required to create an account, sign in, or complete any workflow beyond browsing.

The website is a first-party, application-owned, anonymous public surface. Its success is measured by whether a visitor can (a) understand the EPC offering, (b) experience the required dynamic and 3D content, (c) watch the required solar video showcase, and (d) decide to make contact about their own project.

2. System Overview

solar-epc is a dark-mode, motion-led public website. Its defining surface is a full-bleed, real-time WebGL particle field that resolves into a slowly rotating, semi-abstract solar array, with colour temperature and flow speed driven by a real irradiance dataset. This field satisfies the explicit requirement for dynamic content and 3D object usage by meaning rather than decoration: the plant's own telemetry becomes the hero.

The site comprises two publicly reachable destinations:

• Landing — the anonymous public entry surface. It carries the hero canvas, the headline, the primary call to action, the live telemetry strip, the scroll-linked day-cycle rail, the EPC capability narrative, and the documentary imagery sequence.
• Solar Showcase — the dedicated public destination for the required solar-related video showcase: a full-bleed player with a monospace timecode overlay and a thin filmstrip of clips.

Both destinations are owned by the application and require no identity, no account, and no session continuity. There is no authenticated area, no user-specific durable state, and no differentiated permission model in the current scope.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The website is delivered as a first-party application-owned public site. All accepted behavior — the generative hero, the telemetry readouts, the capability narrative, the documentary imagery, and the video showcase — is rendered and controlled by the application itself. No accepted behavior is delegated to a provider-owned or external destination, and no accepted behavior is headless or API-only.

Access ownership. Every accepted destination is anonymous and publicly reachable. The authoritative requirement thread asks for a website; it establishes no account, no login, no gated content, and no user-specific durable state. Because no accepted journey requires a human to privately own or resume durable actor-specific state, and because no commitment, decision, entitlement, or value transfer must remain bound to a correct participant, no application-owned identity is introduced. There is consequently no first-use identity establishment, no returning verification, and no protected destination in the current scope.

Current versus future boundary. Everything specified in this document is current. The requirement thread contains no future-horizon items, no deferred phases, and no explicitly excluded capabilities beyond the domain constraint that content stays within the solar EPC domain. Nothing in this document should be read as authorizing adjacent conventional website modules — no blog, no careers portal, no customer login, no quote calculator, no CRM integration — because none of those were accepted by the source.

2b. Source Content Inventory

Not applicable. No reference directive in the supplied material declares content_source authority, so no verified factual entity inventory is carried into this document. All concrete figures appearing in this SRD (for example the telemetry values in the hero strip) are specified by the CREATIVE DIRECTION as presentation content, not extracted from an authoritative content source.

2c. Page Content and Component Coverage

Landing

Information and state. The Landing page is the anonymous public entry surface for Auron Energy's solar EPC offering. It presents, in order: the full-bleed generative hero canvas; the headline "We engineer the sun into megawatts."; a one-line subhead; the primary call to action; the live telemetry strip; the scroll-linked day-cycle rail; a museum-spaced single-column text block describing the EPC offering; a full-bleed video frame that leads into the Solar Showcase; and a tabular data sequence of engineering figures. The page holds no user-specific state and no persisted state; its only dynamic state is the canvas's day-cycle phase, which is a function of scroll position, and the telemetry numerals, which count up once on entry and then hold.

Primary actions.

• Start a feasibility study — the amber call to action, rendered as text with a 1px amber underline rather than a filled button. It is the page's single conversion action.
• Navigate to the Solar Showcase — via the full-bleed video frame and via the day-cycle rail's section navigation.

Supporting actions.

• Scroll to drive the canvas day-cycle state from dawn-amber through midday-white to settled teal.
• Use the day-cycle rail as section navigation.
• Read the telemetry strip and the tabular data sequence.

Domain entities.

• Solar EPC service offering (engineering, procurement, construction).
• Delivered plant portfolio (plant count, engineered capacity).
• Environmental outcome (CO₂ avoided).
• Irradiance dataset (the driver of the canvas's colour temperature and flow speed).
• Solar showcase film and clip set.

Component responsibilities.

• Generative hero canvas — a real-time WebGL particle field forming a slowly rotating, semi-abstract solar array; thousands of luminous points resolving into panel rows that tilt toward an implied sun; amber at the core shifting to teal at the edges; bleeds to all four edges; pinned behind the first two viewports.
• Hero copy block — flush left in columns 1–6, lower-left third; headline in Instrument Sans at clamp(56px, 11vw, 128px), tracking -0.02em, sentence case, never centred; one-line subhead at 18px in #7C8794; amber CTA beneath.
• Live telemetry strip — pinned to the hero's lower-right in IBM Plex Mono with tabular numerals; reads "4.2 GW engineered — 118 plants — 2.9M t CO₂ avoided"; values tick on load and hold; stacks beneath the CTA on mobile.
• Day-cycle rail — a 1px vertical line on the far right with a moving amber node tracking the canvas state; doubles as section navigation.
• Capability narrative block — single-column, museum-spaced, max 62ch, describing the engineering, procurement, and construction offering.
• Documentary imagery sequence — real plant aerials, macro shots of panel glass and inverter housings, thermal-camera stills, single-line diagrams, all on the dark ground with a subtle 8% amber duotone.
• Video frame — a full-bleed, edge-to-edge frame with 0px radius, no shadow, no carousel chrome, that leads into the Solar Showcase.
• Tabular data sequence — hairline 1px rules in rgba(242,245,247,0.12) separating data rows.

States.

• Loading — the canvas initializes; telemetry numerals render at their starting values before counting up.
• Empty — not applicable; the Landing page has no user-generated or fetched collection that can be empty.
• Success — the canvas is animating, the headline and CTA are legible, the telemetry numerals have counted up and hold at final value, and the video frame is reachable.
• Error — if the WebGL canvas cannot initialize, the hero falls back to a single high-quality static frame of the generative field so the headline, subhead, CTA, and telemetry strip remain fully legible and the page remains usable.
• Recovery — the visitor can continue scrolling and reach every section and the Solar Showcase regardless of canvas state; the day-cycle rail degrades to plain section navigation when the canvas is static.
• Reduced motion — under prefers-reduced-motion the canvas freezes on a single high-quality frame, numerals render at final value, and the video exposes standard controls.

Solar Showcase

Information and state. The Solar Showcase is the dedicated public destination for the required solar-related video showcase. It presents one hero film of an installed array at golden hour plus three to four shorter clips — drone flyover, mounting-structure install, commissioning walkthrough — as a full-bleed player with a thin filmstrip of thumbnails beneath. The page holds no user-specific state; its only state is which clip is currently selected and whether playback is active.

Primary actions.

• Play, pause, and scrub the hero film.
• Select a clip from the filmstrip to load it into the player.

Supporting actions.

• Read the monospace timecode overlay.
• Return to the Landing page.

Domain entities.

• Hero film (installed array at golden hour).
• Clip set (drone flyover, mounting-structure install, commissioning walkthrough).
• Timecode.

Component responsibilities.

• Full-bleed player — edge-to-edge, 0px radius, no rounded card, no shadow, no carousel chrome; plays muted and in-view only.
• Monospace timecode overlay — IBM Plex Mono, tabular numerals, overlaid on the player.
• Filmstrip — a thin row of four clip thumbnails beneath the player; the selected clip is visually distinguished.
• Showcase title — the only centred element on the site, per the layout direction.

States.

• Loading — the player and filmstrip thumbnails initialize; the timecode overlay shows a zeroed or pending value.
• Empty — not applicable in the current scope; the showcase is specified with a fixed hero film and three to four clips.
• Success — the selected clip plays muted and in-view, the timecode advances, and the filmstrip reflects the current selection.
• Error — if a clip fails to load, the player surfaces the failure in place and the filmstrip remains selectable so the visitor can choose another clip.
• Recovery — the visitor can reselect any clip from the filmstrip, and can return to the Landing page at any time.
• Reduced motion — under prefers-reduced-motion the video does not autoplay and exposes standard controls.

3. Functional Requirements

FR-1 — Public solar EPC website As a Site Visitor / General Audience, I should be able to reach a public website for Auron Energy, a solar EPC solution provider, and understand what the company does, so that I can form a view of its offering without any account or workflow beyond browsing.

• Provenance: explicit
• Trigger/input: The visitor opens the site's public entry URL.
• Observable result: The Landing page renders with the hero canvas, headline, subhead, CTA, telemetry strip, capability narrative, documentary imagery, and a route to the Solar Showcase.
• Access state: Anonymous; no identity required.
• Failure/recovery: If the WebGL canvas cannot initialize, the hero falls back to a static frame and all text and controls remain legible and usable.
• Continuation: The visitor scrolls through the page or navigates to the Solar Showcase.
• Acceptance: A first-time anonymous visitor can reach the site and read the EPC offering without creating an account or signing in.

FR-2 — Dynamic content As a Site Visitor / General Audience, I should experience dynamic content on the website, so that the site reads as a living presentation of the company's engineering scale rather than a static brochure.

• Provenance: explicit
• Trigger/input: Page load and scroll position.
• Observable result: The generative canvas animates continuously; the telemetry numerals count up once on entry and then hold; section reveals animate at 600ms opacity-plus-8px-rise with easing cubic-bezier(0.22, 1, 0.36, 1).
• Access state: Anonymous.
• Failure/recovery: Under prefers-reduced-motion the canvas freezes on a single high-quality frame and numerals render at final value; if the canvas cannot initialize, a static frame is shown.
• Continuation: The visitor continues scrolling; the canvas state changes with scroll.
• Acceptance: Dynamic content is present and observable on the Landing page, and is not optional or absent.

FR-3 — 3D object usage As a Site Visitor / General Audience, I should see a real-time 3D object on the website, so that the site demonstrates the company's technical credibility through a dimensional, data-driven visual.

• Provenance: explicit
• Trigger/input: Page load; scroll position drives the object's state.
• Observable result: A full-bleed real-time WebGL particle field forms a slowly rotating, semi-abstract solar array — thousands of luminous points resolving into panel rows that tilt toward an implied sun, amber #FFB020 at the core shifting to teal #3FE0C8 at the edges, bleeding to all four edges.
• Access state: Anonymous.
• Failure/recovery: If WebGL is unavailable, a single high-quality static frame of the field is shown in its place.
• Continuation: Scrolling morphs the field from a sunrise-amber state to a midday-white state and settles into a stable teal grid.
• Acceptance: A real-time 3D object is rendered on the Landing page and responds to scroll as a scroll-linked state change.

FR-4 — Solar-related video showcase As a Site Visitor / General Audience, I should watch a solar-related video showcase, so that I can see installed arrays and construction work rather than only read about them.

• Provenance: explicit
• Trigger/input: The visitor navigates to the Solar Showcase and selects a clip.
• Observable result: A full-bleed, edge-to-edge player presents one hero film of an installed array at golden hour plus three to four shorter clips (drone flyover, mounting-structure install, commissioning walkthrough), with a monospace timecode overlay and a thin filmstrip of thumbnails beneath.
• Access state: Anonymous.
• Failure/recovery: If a clip fails to load, the failure is surfaced in place and the filmstrip remains selectable so another clip can be chosen.
• Continuation: The visitor selects another clip or returns to the Landing page.
• Acceptance: A solar-related video showcase is present, reachable, and playable without an account.

FR-5 — Live engineering telemetry readout As a Prospective Solar Client, I should see the provider's engineering scale as a live data readout, so that I can judge capacity and delivery track record at a glance.

• Provenance: required_inference (indispensable observable result for the accepted credibility outcome; the CREATIVE DIRECTION specifies the strip's content and placement)
• Trigger/input: Page load.
• Observable result: A telemetry strip pinned to the hero's lower-right in IBM Plex Mono with tabular numerals reads "4.2 GW engineered — 118 plants — 2.9M t CO₂ avoided"; values tick on load and hold; the strip stacks beneath the CTA on mobile.
• Access state: Anonymous.
• Failure/recovery: Under prefers-reduced-motion numerals render at final value; if the canvas fails, the strip still renders.
• Continuation: The visitor continues to the capability narrative.
• Acceptance: The telemetry strip is visible, legible, and holds its final values after the count-up.

FR-6 — Scroll-linked day-cycle navigation As a Site Visitor / General Audience, I should be able to track and navigate the page's sections through the canvas's day-cycle state, so that I always know where I am in the page and can move between sections.

• Provenance: required_inference (indispensable continuation and orientation mechanic for the accepted scroll-driven canvas)
• Trigger/input: Scroll position; clicking a rail node.
• Observable result: A 1px vertical line on the far right of the viewport carries a moving amber node that tracks the canvas state and doubles as section navigation.
• Access state: Anonymous.
• Failure/recovery: When the canvas is static (reduced motion or WebGL failure), the rail degrades to plain section navigation.
• Continuation: The visitor jumps to a section or continues scrolling.
• Acceptance: The rail reflects the current section and moves the visitor to a selected section.

FR-7 — Feasibility study enquiry initiation As a Prospective Solar Client, I should be able to start a feasibility study enquiry from the hero, so that I can act on my interest in the provider's EPC services.

• Provenance: required_inference (indispensable commitment action for the accepted "decide to make contact about their own project" outcome; the CREATIVE DIRECTION specifies the CTA label and treatment)
• Trigger/input: The visitor activates the amber "Start a feasibility study" call to action.
• Observable result: The enquiry is initiated from the hero; the CTA is rendered as text with a 1px amber underline rather than a filled button.
• Access state: Anonymous; no account is required to initiate.
• Failure/recovery: If the enquiry cannot be initiated, the visitor remains on the Landing page with the CTA still available and the rest of the page fully usable.
• Continuation: The visitor continues browsing or returns to the CTA.
• Acceptance: The CTA is present, legible, and activatable at 375px, 768px, and 1280px without being covered or clipped.

FR-8 — Documentary project imagery As a Prospective Solar Client, I should see specific, documentary imagery of real plants and equipment, so that I can assess the provider's delivered work rather than generic stock imagery.

• Provenance: required_inference (indispensable proof element for the accepted credibility outcome; the CREATIVE DIRECTION specifies the imagery set)
• Trigger/input: Scrolling below the hero.
• Observable result: Real plant aerials, macro shots of panel glass and inverter housings, thermal-camera stills, and single-line diagrams render on the dark ground with a subtle 8% amber duotone.
• Access state: Anonymous.
• Failure/recovery: If an image fails to load, the surrounding text block and data sequence remain readable and the page remains navigable.
• Continuation: The visitor continues to the video frame and the tabular data sequence.
• Acceptance: Documentary imagery is present below the fold and no stock photography of smiling engineers or generic rooftop panels appears in the hero.

4. User Personas

Prospective Solar Client

Product context. This persona is a business or property owner, developer, asset owner, procurement lead, or institutional/municipal buyer evaluating solar EPC services. They arrive at the site with a real project in mind or forming, and they are assessing whether Auron Energy can engineer, procure, and construct a plant at their required scale, on time.

Primary goal. To judge the provider's engineering, procurement, and construction capability and its delivered track record well enough to decide whether to open a conversation about their own project.

Distinct accepted responsibilities. This persona carries the site's only conversion responsibility. They read the capability narrative, weigh the live engineering telemetry as evidence of scale, examine the documentary imagery of real plants and equipment, watch the showcase film and clips as proof of delivered work, and then decide whether to start a feasibility study enquiry. Their work is evaluative and consequential: they are comparing a firm against alternatives and against their own risk tolerance.

Relevant inputs or decisions. The engineering scale figures (engineered capacity, plant count, CO₂ avoided); the specificity and credibility of the documentary imagery; the quality and realism of the showcase film and clips; and the decision of whether to initiate a feasibility study enquiry.

Interactions with other accepted participants. This persona shares both destinations with the Site Visitor / General Audience, but their interaction differs in intent: where the general visitor consumes the dynamic and 3D content for understanding, this persona consumes it as evidence. They do not interact with any other human participant through the site; the enquiry they initiate is the handoff out of the site.

Observable success. They reach the site anonymously, understand the EPC offering, see credible scale and delivered-work proof, and activate the "Start a feasibility study" call to action.

Site Visitor / General Audience

Product context. This persona is a visitor exploring the solar EPC provider's public website without a specific project in hand — someone who encountered the company and wants to learn what it does and where it operates.

Primary goal. To gain a clear, engaging understanding of the provider's offering without needing any account or workflow beyond browsing.

Distinct accepted responsibilities. This persona carries the site's comprehension and engagement responsibility. They experience the dynamic content and the 3D object, follow the scroll-linked day-cycle state through the page, and watch the solar video showcase. Their work is exploratory rather than evaluative: they are forming a general impression, not scoring a vendor.

Relevant inputs or decisions. The clarity of the headline and capability narrative; the responsiveness and legibility of the generative canvas as they scroll; the day-cycle rail as an orientation aid; and which showcase clip to watch.

Interactions with other accepted participants. This persona shares both destinations with the Prospective Solar Client. They do not initiate an enquiry and do not interact with any other human participant through the site.

Observable success. They reach the site anonymously, experience the dynamic and 3D content, watch at least one showcase clip, and leave with a clear understanding of what the provider does and where it operates.

5. Core User Flows

Flow 1 — Prospective Solar Client evaluates the provider and starts a feasibility study

1. Starting context. The client has a solar project in mind or forming and opens the solar-epc public URL anonymously. No account exists and none is required.
2. Entry. The Landing page renders. The full-bleed generative canvas fills the viewport on the near-black ground #07090C, forming a slowly rotating, semi-abstract solar array of luminous points that tilt toward an implied sun, amber at the core shifting to teal at the edges.
3. First read. Flush left in the lower-left third, the headline "We engineer the sun into megawatts." renders in Instrument Sans at clamp(56px, 11vw, 128px), tracking -0.02em, sentence case, spanning roughly nine of twelve columns and never centred. Beneath it, a one-line subhead at 18px in #7C8794.
4. Scale evidence. Pinned to the hero's lower-right, the live telemetry strip in IBM Plex Mono with tabular numerals reads "4.2 GW engineered — 118 plants — 2.9M t CO₂ avoided". The values tick on load and then hold. The client reads engineered capacity, plant count, and CO₂ avoided as the provider's scale.
5. Scroll and state change. The client scrolls. The canvas morphs from a sunrise-amber state to a midday-white state and settles into a stable teal grid — a scroll-linked state change, not a parallax trick. The day-cycle rail on the far right tracks the canvas state with a moving amber node.
6. Capability read. The client reaches the museum-spaced, single-column capability narrative (max 62ch) describing the engineering, procurement, and construction offering, with the generative canvas continuing behind the text block at 12% opacity.
7. Proof read. The client continues into the documentary imagery sequence: real plant aerials, macro shots of panel glass and inverter housings, thermal-camera stills, and single-line diagrams, all on the dark ground with a subtle 8% amber duotone. The client judges the specificity of the delivered work.
8. Showcase handoff. The client reaches the full-bleed video frame and navigates to the Solar Showcase.
9. Showcase viewing. On the Solar Showcase, the full-bleed, edge-to-edge player presents the hero film of an installed array at golden hour, with a monospace timecode overlay. The client selects the drone flyover, then the mounting-structure install, then the commissioning walkthrough from the thin filmstrip of thumbnails beneath the player. Video plays muted and in-view only.
10. Decision. Having seen scale, capability, documentary proof, and delivered-work film, the client decides to open a conversation.
11. Commitment. The client returns to the Landing page and activates the amber "Start a feasibility study" call to action — rendered as text with a 1px amber underline rather than a filled button. The enquiry is initiated anonymously; no account is required.
12. Observable result. The enquiry is initiated from the hero, and the client's project interest has been handed off out of the site.
13. Failure and recovery. If the WebGL canvas cannot initialize at step 2, the hero falls back to a single high-quality static frame of the generative field; the headline, subhead, CTA, and telemetry strip remain fully legible and the page remains usable. The day-cycle rail degrades to plain section navigation. If a showcase clip fails to load at step 9, the failure is surfaced in place and the filmstrip remains selectable so another clip can be chosen. If the enquiry cannot be initiated at step 11, the client remains on the Landing page with the CTA still available.
14. Continuation. The client may continue browsing, re-watch a clip, or return to the CTA.

Flow 2 — Site Visitor / General Audience explores the dynamic and 3D content

1. Starting context. The visitor encounters the solar EPC provider's public website and opens it anonymously, with no specific project and no account.
2. Entry. The Landing page renders. The generative canvas animates continuously on the near-black ground, and the telemetry numerals count up once on entry and then hold.
3. Engagement. The visitor scrolls. The canvas morphs from dawn-amber through midday-white to settled teal, and the day-cycle rail's amber node tracks the state. Section reveals animate at 600ms opacity-plus-8px-rise with easing cubic-bezier(0.22, 1, 0.36, 1).
4. Orientation. The visitor uses the day-cycle rail as section navigation to jump between sections, or continues scrolling.
5. Comprehension. The visitor reads the capability narrative and the tabular data sequence, separated by hairline 1px rules in rgba(242,245,247,0.12), and forms a clear understanding of what the provider does and where it operates.
6. Showcase handoff. The visitor navigates to the Solar Showcase via the full-bleed video frame or the rail.
7. Showcase viewing. On the Solar Showcase, the visitor watches the hero film of an installed array at golden hour, then selects one or more of the three to four shorter clips from the filmstrip. The monospace timecode overlay advances with playback.
8. Observable result. The visitor has experienced the dynamic content, the 3D object, and the solar video showcase, and understands the provider's offering.
9. Failure and recovery. If the canvas cannot initialize, the hero falls back to a static frame and the visitor can still read every section and reach the showcase. Under prefers-reduced-motion, the canvas freezes on a single high-quality frame, numerals render at final value, and the video does not autoplay but exposes standard controls. If a clip fails to load, the filmstrip remains selectable.
10. Continuation. The visitor returns to the Landing page or leaves the site. No account is created and no state is persisted.

6. Visuals, Colors and Theme

The CREATIVE DIRECTION is authoritative for this section. Its muse is Refik Anadol, and its headline thesis is "Data made physical — sunlight rendered as a living generative field." The direction is translated below into concrete tokens.

Color tokens (dark mode)

Body text is #F2F5F7 on #07090C (contrast ratio ≈ 18:1). The two data hues mix in the generative canvas the way light mixes in a lens.

Typography

• Headings: Instrument Sans, weight 400–500, tracking -0.02em, sentence case — never all-caps for headlines. Headlines are set large and quiet; the canvas is loud, so the type stays calm and architectural.
• Body: IBM Plex Sans.
• Numerals: IBM Plex Mono, weight 500, tabular — live telemetry figures only, so digits do not reflow as values tick.
• Scale: 1.333 modular — 128 / 96 / 64 / 40 / 28 / 20 / 16 / 14.
• Display: clamp(56px, 11vw, 128px).
• Section heads: clamp(32px, 5vw, 64px).
• Body: 16–18px with 1.65 leading.
• Telemetry numerals: clamp(28px, 4vw, 56px) in IBM Plex Mono tabular.

Shape language

Soft-edged rectangles with 2px radii on panels and 0px radii on the video frame and data rules. The UI is deliberately flat and quiet so the only shape the eye remembers is the flowing generative field. Hairline 1px rules in rgba(242,245,247,0.12) separate data rows. No drop shadows, no glass, no blobs. Section boundaries are straight horizontal cuts across the full viewport; the canvas bleeds behind them.

Layout

A full-bleed generative canvas is pinned behind the first two viewports, with a fixed 12-column overlay grid at 1280px (24px gutters, 64px margins), collapsing to 4 columns at 375px. Hero copy sits in columns 1–6, flush left, with the live telemetry strip in columns 8–12 on desktop and stacked beneath the CTA on mobile. Sections alternate: full-bleed dark canvas → a single-column, museum-spaced text block (max 62ch) → a full-bleed video frame → a tabular data sequence. Nothing is centred except the video showcase title.

Imagery

The generative canvas is the imagery — no stock solar photography in the hero. Below the fold, imagery is documentary and specific: real plant aerials, macro shots of panel glass and inverter housings, thermal-camera stills, single-line diagrams. The video showcase uses one hero film of an installed array at golden hour plus three to four shorter clips (drone flyover, mounting-structure install, commissioning walkthrough) presented as a full-bleed player with a thin filmstrip of thumbnails beneath. All imagery sits on the dark ground with a subtle 8% amber duotone so nothing reads as generic stock.

Avoid

Blue or indigo primary buttons on white; Inter, Roboto, Arial, Helvetica, Poppins, or system-ui for headings or body; centred headline + subhead + gradient blob hero composition; a grid of identical hover-lift cards for services or projects; stock photography of smiling engineers or generic rooftop panels in the hero; glassmorphism, frosted panels, or soft multi-colour pastel gradients; filled pill buttons and rounded 16px+ card radii; decorative particle confetti or bouncy spring easing. The generic indigo/blue-on-white SaaS template is forbidden for this project.

7. Signature Design Concept

The first screen is the product. The Landing page opens on a full-viewport, near-black canvas (#07090C) in which a real-time Three.js particle field forms a slowly rotating, semi-abstract solar array — thousands of luminous points that resolve into panel rows and tilt toward an implied sun, amber (#FFB020) at the core shifting to teal (#3FE0C8) at the edges. It is the dominant element and it bleeds to all four edges.

Over it, flush left in the lower-left third, a single headline in Instrument Sans at clamp(56px, 11vw, 128px), tracking -0.02em, reads "We engineer the sun into megawatts." It spans roughly nine of twelve columns and is never centred. Directly beneath it, a one-line subhead at 18px in #7C8794 and an amber CTA — "Start a feasibility study" — rendered with a 1px amber underline rather than a filled button.

Pinned to the lower-right, a live telemetry strip in IBM Plex Mono reads "4.2 GW engineered — 118 plants — 2.9M t CO₂ avoided", with values ticking. A thin vertical scroll rail on the far right shows the canvas's day-cycle state.

The concept is implementable entirely from accepted content and states: the canvas, the headline, the subhead, the CTA, the telemetry strip, and the rail are all specified above. It recomposes accepted content and controls only — it introduces no new behaviour, page, or destination. No gradient blob, no centred stack, no blue button.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

Focal subject. A real-time Three.js particle field forming a slowly rotating, semi-abstract solar array — thousands of luminous points resolving into panel rows that tilt toward an implied sun, amber #FFB020 at the core shifting to teal #3FE0C8 at the edges, bleeding to all four edges of a near-black #07090C canvas.

Input → transformation → outcome thesis. Scroll position is the input. It drives the field's colour temperature and flow speed, which are themselves driven by a real irradiance dataset (an irradiance curve over a day, or fleet kWh). As the visitor scrolls past the hero, the field morphs from a sunrise-amber state to a midday-white state and settles into a stable teal grid — a scroll-linked state change, not a parallax trick. The outcome is that the visitor's own scrolling performs the day cycle, so the company's engineering scale is experienced rather than asserted.

Motion vocabulary. One continuous, slow generative flow. Data numerals count up once on entry, then hold. Section reveals are 600ms opacity-plus-8px-rise, easing cubic-bezier(0.22, 1, 0.36, 1). Video plays muted and in-view only. Motion is slow, continuous, and data-driven — never bouncy, never confetti.

Composed first frame. The canvas at its dawn-amber state, panel rows resolving from the particle field and tilting toward the implied sun. The headline "We engineer the sun into megawatts." flush left in the lower-left third, spanning roughly nine of twelve columns. The subhead beneath it in #7C8794. The amber-underlined CTA beneath that. The telemetry strip pinned lower-right, numerals at their starting values. The day-cycle rail on the far right with its amber node at the dawn position.

Reduced-motion state. Under prefers-reduced-motion the canvas freezes on a single high-quality frame, numerals render at final value, and the video exposes standard controls. The day-cycle rail degrades to plain section navigation.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED

The direction's hero dimensionality is webgl, so a real-time 3D scene is expected. One crafted real-time object: a particle field of thousands of luminous points that resolves into a semi-abstract solar array — panel rows that tilt toward an implied sun. Its defining state is the day cycle: dawn-amber at the core, midday-white at the peak, settled teal at rest, with the two hues mixing in the canvas the way light mixes in a lens. The scene's colour temperature and flow speed are driven by a real irradiance dataset, and its state is scroll-linked. The scene must degrade to a single high-quality static frame when WebGL is unavailable or when reduced motion is requested.

9. Non-Functional Requirements

NFR-1 — Anonymous public access. Every accepted destination is publicly reachable without an account, sign-in, or session. Provenance: explicit (the source asks for a website; no account, login, or gated content is requested). Rationale: No accepted journey requires durable actor-specific state or a bound commitment, so no identity is introduced.

NFR-2 — Real-time 3D performance. The generative hero canvas must run as a real-time WebGL particle field without blocking the legibility of the headline, subhead, CTA, or telemetry strip. Provenance: explicit (3D object usage is a required, non-optional constraint). Rationale: The 3D object is the hero and must remain the dominant element while the type stays calm and architectural.

NFR-3 — Graceful degradation. If WebGL is unavailable, the hero must fall back to a single high-quality static frame of the generative field, with all text and controls remaining fully legible and the page remaining navigable. Provenance: required_inference. Rationale: The accepted comprehension and evaluation outcomes must survive the failure of the required 3D element.

NFR-4 — Reduced-motion compliance. Under prefers-reduced-motion, the canvas must freeze on a single high-quality frame, numerals must render at final value, and the video must not autoplay but must expose standard controls. Provenance: explicit (CREATIVE DIRECTION). Rationale: The direction's motion is continuous and cinematic; reduced-motion users must receive a usable static arrangement.

NFR-5 — Readable text and controls at every viewport. Headlines, wordmarks, labels, numbers, card text, and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element may cover any part of them. Provenance: explicit (CREATIVE DIRECTION). Rationale: The direction's imagery and motion may bleed and overlap freely, but readable text and controls must remain whole.

NFR-6 — Contrast. Body text #F2F5F7 on #07090C must maintain a contrast ratio of approximately 18:1. Amber #FFB020 must be used as text on dark only, never as a background behind small text. Provenance: explicit (CREATIVE DIRECTION). Rationale: The dark ground is the stage; legibility of the engineering numbers is a credibility requirement.

NFR-7 — Domain constraint. Content must stay within the solar EPC domain. Provenance: explicit. Rationale: The website is for a solar EPC solution provider.

NFR-8 — Video playback discipline. Showcase video must play muted and in-view only. Provenance: explicit (CREATIVE DIRECTION). Rationale: The showcase is a full-bleed, edge-to-edge player with no carousel chrome; playback must not compete with the page.

10. Tech Stack

• Frontend: React, with a real-time WebGL rendering layer for the generative hero canvas (Three.js / React Three Fiber).
• Typography: Instrument Sans (headings), IBM Plex Sans (body), IBM Plex Mono (tabular telemetry numerals and timecode).
• Styling: CSS with custom properties for the color tokens, clamp() for the type scale, and a 12-column overlay grid collapsing to 4 columns.
• Media: Self-hosted or embedded video delivery for the showcase hero film and clip set, with muted, in-view playback.
• Backend: Python / FastAPI for the site's server-side delivery and the feasibility study enquiry endpoint.
• Storage: Appropriate storage for the enquiry submissions and the site's content assets.
• Packaging and deployment: Docker and docker-compose for local and single-host deployment. Kubernetes is not required by any accepted requirement and is therefore not included.

Note: The authoritative requirement thread specifies no technology choices. The stack above is the minimal set needed to deliver the accepted behavior and is labeled as a default where it is not source-specified.

11. Assumptions and Constraints

Assumptions

• A-1 [Default — not specified by user] The site is delivered as a single responsive web application serving both the Landing and Solar Showcase destinations.
• A-2 [Default — not specified by user] The feasibility study enquiry initiated from the hero is captured by the site and handed off for follow-up; the downstream handling of that enquiry is outside the current scope.
• A-3 [Default — not specified by user] The telemetry figures shown in the hero strip ("4.2 GW engineered — 118 plants — 2.9M t CO₂ avoided") are the presentation content specified by the CREATIVE DIRECTION and are treated as the site's displayed engineering scale.
• A-4 [Default — not specified by user] The showcase hero film and the three to four shorter clips are supplied content assets; their production is outside the current scope.
• A-5 [Default — not specified by user] The irradiance dataset driving the canvas's colour temperature and flow speed is available to the site as a data input.

Constraints

• C-1 The website is for a solar EPC solution provider; content must stay within that domain. (explicit)
• C-2 Dynamic content and 3D object usage are required, not optional. (explicit)
• C-3 A solar-related video showcase is required. (explicit)
• C-4 The generic indigo/blue-on-white SaaS template is forbidden for this project. (explicit, CREATIVE DIRECTION)
• C-5 Inter, Roboto, Arial, Helvetica, Poppins, and system-ui are forbidden for headings and body. (explicit, CREATIVE DIRECTION)
• C-6 No glassmorphism, frosted panels, soft multi-colour pastel gradients, filled pill buttons, or rounded 16px+ card radii. (explicit, CREATIVE DIRECTION)
• C-7 No stock photography of smiling engineers or generic rooftop panels in the hero. (explicit, CREATIVE DIRECTION)
• C-8 No decorative particle confetti or bouncy spring easing; motion is slow, continuous, and data-driven. (explicit, CREATIVE DIRECTION)
• C-9 No account, login, or gated content is introduced; every accepted destination is anonymous. (derived from the explicit absence of any account requirement in the source)

12. Glossary

• Solar EPC — Engineering, Procurement, and Construction: the integrated delivery model in which one firm designs, sources equipment for, and builds a solar power plant.
• Generative canvas — The full-bleed, real-time WebGL particle field on the Landing page whose colour temperature and flow speed are driven by a real irradiance dataset.
• Day cycle — The scroll-linked state progression of the generative canvas from dawn-amber through midday-white to settled teal.
• Day-cycle rail — The 1px vertical line on the far right of the viewport with a moving amber node that tracks the canvas state and doubles as section navigation.
• Telemetry strip — The live engineering-scale readout pinned to the hero's lower-right in IBM Plex Mono with tabular numerals.
• Filmstrip — The thin row of clip thumbnails beneath the Solar Showcase player.
• Timecode overlay — The monospace timecode displayed over the Solar Showcase player.
• Irradiance — The solar power density incident on a surface; the dataset that drives the generative canvas.
• Tabular numerals — Numerals of uniform width, used so digits do not reflow as values tick.
• Amber duotone — The subtle 8% amber treatment applied to documentary imagery so it sits on the dark ground without reading as generic stock.