project-1

byvedant Sonwane

You are building a single-file HTML landing page for [PRODUCT NAME], a SaaS product: [ONE-LINE VALUE PROP], for [AUDIENCE]. Creative direction — read this before writing any code Ground every visual choice in the actual subject matter: [THE "WORLD" IT LIVES IN]. Don't reach for generic floating spheres/particles/abstract blobs — the 3D scene should be built from forms, materials, and motifs that belong to this specific product's world. Pick ONE concrete metaphor for the whole scene (a physical process, object, or system that mirrors what the product does) and commit to it rather than decorating with unrelated shapes. Avoid the current AI-landing-page defaults unless the brand color explicitly calls for them: warm cream background + serif display + terracotta accent near-black background + single neon/acid accent broadsheet newspaper layout with hairline rules Pick a palette of 4–6 named hex values deliberately tied to the product's world, not a template default. Pair a characterful display typeface with a quieter body face — not the same Inter/Satoshi pairing every SaaS site uses. Spend your one big creative risk on a signature moment: a single scene or transition that this page will be remembered for. Keep everything else disciplined around it. The core mechanic: scroll-driven 3D narrative A WebGL canvas (Three.js) sits as a persistent backdrop. As the user scrolls, map scroll progress (0→1) to a continuous transformation of the 3D scene — camera moving along a path, an object assembling/unfolding/rotating, materials shifting — so the scene reads as one continuous journey, not disconnected scenes. HTML content (headlines, feature copy, stats) is pinned and revealed in sync with the 3D motion using GSAP + ScrollTrigger (scrub: true so it tracks scroll position directly, not just triggers once). "Unfolding" should apply to both: the 3D object literally opening/revealing/assembling AND the copy appearing progressively (word-by-word or line-by-line reveals, not a wall of text dropped in at once). Each section = one scroll-locked "beat": a 3D state + a piece of information revealed together. Don't let the 3D and the copy feel like two separate layers stacked on top of each other. Section-by-section structure Hero — the signature 3D moment at rest, headline stating the core value prop in plain language, no explaining yet. Problem — the 3D scene shifts to represent the "before" state (friction, chaos, manual work). Feature reveals (x3) — one scroll-locked beat per core feature: [FEATURE 1], [FEATURE 2], [FEATURE 3]. The 3D scene transforms to visually represent each one as it's introduced. Proof — social proof / stats / logos, presented as part of the same visual world (not a generic card grid dropped in). Pricing or CTA setup — scene resolves toward a "complete" or "assembled" state. Final CTA — [CTA GOAL], clear single action, no competing links. Technical constraints Single .html file. No build step, no bundler, no backend, no npm install. Load Three.js and GSAP + ScrollTrigger from a CDN (jsdelivr or cdnjs) via <script> tags. Fully responsive down to mobile. On mobile/low-end devices: reduce geometry complexity/particle counts, or fall back to a lighter CSS-only parallax version of the same narrative — do not just shrink the desktop version. Respect prefers-reduced-motion: provide a static/minimal-motion fallback that still communicates the same content and structure. Visible keyboard focus states; page must be usable with JS/WebGL disabled (semantic HTML underneath, not everything painted to canvas). Write real, specific copy for [PRODUCT NAME] — no lorem ipsum, no "Feature One / Feature Two" placeholders. Before you finalize Check your own plan against the brief: if the palette, type pairing, or 3D metaphor is something you'd produce for any SaaS product regardless of what it does, revise it until it's specific to [PRODUCT NAME]'s actual world