E46 Scroll Experience — Handoff Package

This package contains a complete concept, animation specification, bilingual copy, a working no-build prototype, a production-oriented React/Three.js starter, individual UI/shader/data assets, reference photography with attribution, and a detailed English implementation prompt.

What is inside

• docs/ — concept, storyboard, animation, responsive, performance and handoff documentation.
• prompts/IMPLEMENTATION_PROMPT_EN.md — the main prompt to give to a coding AI or implementation team.
• prototype/ — open index.html directly. It demonstrates the required layout and continuous scroll behavior without a build step.
• production-starter/ — Vite + React + React Three Fiber + GSAP starter.
• assets/ — every custom asset as a separate file: JSON, CSV, SVG, GLSL and licensed reference photos.
• scripts/ — package validation and GLB optimization helpers.

Non-negotiable layout rules

1. Desktop: the vehicle is pinned in the upper-right area, never centered as a full-screen hero object. The text column remains on the left.
2. Mobile: the vehicle sits behind the text inside a fixed full-screen visual layer. Text remains readable through local gradients, contrast and controlled vehicle opacity.
3. Motion: one continuous scroll-linked timeline. No hard scene cuts, no jumpy section snapping and no abrupt color changes.
4. Color: the page background continuously travels through an ordered E46 paint path. The current paint name is shown discreetly.
5. Photorealism: the final result requires a properly prepared E46 GLB with separate body variants, hood hinge, facelift parts, wheels, lights and paint material slots.

Quick preview

Open:

prototype/index.html

The prototype uses a deliberately simple vector vehicle placeholder. It proves placement, layering, color interpolation, mobile behavior and section timing. It is not presented as the final photorealistic vehicle.

Production starter

cd production-starter
npm install
npm run dev

The starter renders a procedural placeholder until a prepared model is placed at:

production-starter/public/assets/models/e46-master.glb

Then set MODEL_URL in src/config.ts.

Third-party assets

The included Wikimedia reference images can be redistributed under their individual licenses; attribution is documented in assets/reference-photos/ATTRIBUTION.md. Candidate 3D models are listed in assets/sources/THIRD_PARTY_ASSET_MANIFEST.csv, but are not redistributed because they must be downloaded from their source pages and their license status must be rechecked at the time of use.

Trademark notice

This is an independent editorial/fan concept. BMW, M, model names, badges and vehicle designs are trademarks or protected identifiers of their respective owners. Do not imply official affiliation, endorsement or sponsorship.