RESEARCHED SEPTEMBER 5–8, 2026 · CONCEPT & TECHNICAL DIRECTION
Let the scroll
take you inside.
Turn the homepage into a short, guided kitchen tour. Start with the whole room, approach the cabinetry, open a door, explore finishes, and invite the visitor to start a project.
A connected showroom, informed by real products
September 8 update. The brief now includes a kitchen tour, open walk-in closet, nine-style cabinet-door builder and thirteen storage accessories. “$50k quality” is a design ambition here; none of the examples below has an independently verified $50,000 project budget.
| Primary reference | What it demonstrates | Application to Overland |
|---|---|---|
| Immersive Garden | Luxury brand work combines considered art direction, controlled camera movement and restrained interfaces. | Preserve one coherent kitchen composition; let cabinetry and working hardware carry the story. |
| Epigraph / Neighbor | A furniture configurator connects material choices and product configuration to commerce. | Keep product selection, details and pricing next to the model; make every tour product reachable in Storage. |
| Neya / City Furniture | Large furniture configuration sets require deliberate controls and clear options. | Separate product, opening note, quantity and review instead of hiding everything inside the canvas. |
| Ikarus Delta / CSelect | Cabinetry configuration ties dimensions, finishes and hardware together. | Preserve the existing door measurement and pricing workflow, and treat custom inserts as sized products. |
These are agency/vendor accounts of their own work, not independent conversion studies. Their reported commercial results are not promises for Overland.
Tools examined, and what was selected
- Three.js: selected for freely rotatable, physically based product models and real moving parts. Geometry uses the source library's dimensions and configuration references; these are authored illustrations, not automatic SKP exports.
- three-gpu-pathtracer: evaluated for progressive multi-bounce lighting. Local testing stalled the browser during preparation, so it is not shipped in the interactive viewer. The current viewer uses HDR image-based lighting, contact occlusion and multisample antialiasing; the room tours use offline Cycles renders.
- realism-effects: evaluated for screen-space lighting. Not added: temporal filtering brings additional blur and performance tradeoffs, especially for this small desktop GPU.
- model-viewer scene graph: evaluated for GLB material variants. The existing door calculator and custom opening mechanisms fit the current Three.js implementation better.
- GSAP ScrollTrigger: selected for a reversible scroll playhead and HTML chapters. Room tours use Cycles-rendered frames; product detail stages use live 3D.
- Poly Haven: CC0 lighting, textures and selected room props support believable surfaces. A convincing result also needs appropriate scale, joints, reveals, edge radii and soft reflections.
What came from Overland's files
The read-only audit found OC single/double trash inserts, paper-towel and utensil organizers; PAC jewelry trays, valet/belt/tie racks, hampers and shoe fences; custom Frost CNC drawer/roll-out configurations; and FL Wall LED (Sides) inserts in actual jobs. Repeated room revisions are not counted as unique installations. Customer names and raw cost audits remain outside the public package.
The kitchen retains its original camera, separate right-wall pantry, full-access cabinet enclosure and finished fronts. Its pantry doors open before a UV-finished tray extends; side lighting reveals the interior. Storage shows the insert and its hardware by themselves. The UV finish is represented with a smooth clear-coat response over a wood reference; a browser rendering cannot certify the appearance of a physical finish sample.
Pricing: library allowance versus a completed project
Accessory allowances use cost × (1 + markup / 100) + add-on, rounded to cents. Mozaik's own drawer-box guide gives an example consistent with that calculation. The official joint-template guide describes the add-on as a fixed dollar markup. Drawer Box Library guide, Joint Templates guide.
Configured OC allowances include $295 for the double-trash insert, $245 for single trash, and $345 for the paper-towel, utensil and base-organizer configurations. Custom drawer boxes and roll-outs remain “Sized quote”; a library fixed-cost field does not establish a complete manufactured selling price. Mozaik pricing templates can include material, labor, tax, overhead and custom formulas. Those job charges are separate from this accessory selection. Mozaik Pricing Tab guide.
The integrated door page preserves the inspected live rate table and order options in an offline preview. It saves a local order file and does not submit an order or payment. Release verification and remaining production dependencies are recorded in the project files.
Sharpness and motion
The upgraded delivery pipeline retains native 1920 × 1200 resolution during scrolling and creates 60fps motion-compensated frames. The player displays one frame at a time, with no crossfade of moving edges. This doubles the delivery cadence; it does not turn the 144 source renders into 716 independently rendered frames. Optical-flow artifacts and physical-device performance still require visual checks. Decoded images are bounded in memory and compressed frames are prefetched progressively.
Original scroll-experience research
The effect you are describing is usually called scrollytelling, scroll-scrubbed animation, or an immersive 3D website. The scroll position becomes a playhead. In a kitchen, that playhead can move a camera, swing cabinet doors, and coordinate text. GSAP explicitly supports scrubbed animation and pinning; Three.js provides the scene and camera. GSAP documentation, Three.js repository.
GetLayers currently presents a library of website, 3D, gradient, and section prompts. It is useful inspiration, but its homepage alone does not identify one specific animation you want copied. Its public page and catalog were inspected; the embedded preview videos did not play in the research browser. This concept follows your kitchen idea rather than claiming to reproduce a particular template. No paid prompts or assets were acquired.
Your live site has a restrained neutral identity, service and gallery pages, contact calls to action, and a separate door builder. Its inspected homepage loads /assets/site.css and /assets/site.js. That observation is consistent with a static frontend, but does not establish its deployment pipeline. The local website folder describes a static order prototype; the shop-floor folder documents a separate Odoo workflow. The example therefore lives in its own website subfolder. Production integration needs the actual current homepage source and host configuration.
The approaches, compared
| Approach | What the visitor sees | Strength | Tradeoff / Overland fit |
|---|---|---|---|
| HTML / CSS scroll animation | Photos slide, expand, reveal or move at different speeds. | Good for restrained editorial storytelling. | Does not itself provide a real kitchen interior. Best for supporting sections. MDN. |
| Rendered image sequence | Scroll steps through frames of a carefully lit kitchen film. | Art-directed, photographic lighting without live 3D rendering. | Fixed camera path; finish variants multiply assets. Preloading and decoded memory need care. Working repository example. |
| Real-time Three.js | Camera moves through a model; doors and materials change. | Best match for “go through the cabinets” plus interactive finishes. | Requires a well-made model and GPU testing. Used in the first experiment, then replaced by existing renderings after visual review. Model loading guide. |
| React Three Fiber + Drei | Same underlying 3D capability, in React components. | Drei offers scroll damping and normalized progress helpers. | Strong when a React app already exists; unnecessary framework migration for this local static project. ScrollControls. |
| Spline | A visually authored scene with interaction states. | Good visual authoring workflow. | Export modes matter: its Scroll type is documented for Viewer export. Validate the intended embedding and touch behavior before committing. Spline scroll events, exports. |
| Scroll-scrubbed video | A film whose playback time follows the scroll. | Efficient compressed media delivery. | Seeking depends on encoding/keyframes and browser behavior; test on real phones. A possible follow-up experiment, not the implementation chosen here. |
Strengths, tradeoffs and fit are engineering judgments based on the linked capabilities, not benchmark results for Overland.
The production storyboard
Keep the camera path deliberate. A guided approach and cabinet reveal should feel more like an architectural film than a flying game camera. Literal travel through wood panels would obscure the product; an open cabinet gives visitors a believable route into the detail. Keep the project action reachable from the header and a skip link available immediately.
GitHub research: what is worth using
These repositories were inspected as source material and implementation references. Repository visibility is not permission to copy every bundled model, font, or photo. The revised demo uses installed GSAP and unchanged copies of selected OneDrive renderings; it does not copy tutorial models.
| Repository | Useful capability | Decision |
|---|---|---|
| mrdoob/three.js | 3D rendering, model loading, camera and materials; MIT. | Installed for the original experiment; absent from the revised homepage bundle. |
| greensock/GSAP | Timeline and ScrollTrigger ecosystem. | Installed. Uses GSAP’s own license, not MIT; preserve the bundled license. |
| pmndrs/drei | Helpers for React Three Fiber, including ScrollControls; MIT. | Useful for a future React implementation. |
| wass08/r3f-scrolling-animation-tutorial | A small scroll-driven 3D tutorial with demo and source. | Study the composition pattern. Its visible root listing did not establish a reuse license; no code/model copied. |
| codrops/3DCarousel | On-scroll 3D carousel reference. | Useful for a secondary portfolio effect, not a kitchen camera path. |
| darkroomengineering/lenis | Smooth scrolling, including WebGL synchronization; MIT. | Optional. Native scrolling plus GSAP scrub is sufficient for the demo. |
| locomotivemtl/locomotive-scroll | Current repository describes viewport detection and smooth scrolling built on Lenis; MIT. | Alternative scrolling layer. Do not combine redundant scroll controllers. |
| motiondivision/motion | JavaScript and React animation; MIT. | Good alternative for DOM effects. Its scroll API uses hardware acceleration where supported. |
| simoncorompt/canvas-sequence | Concrete canvas image-sequence technique. | Reference for the photographic alternative; evaluate modern loading and licensing before reuse. |
| donmccurdy/glTF-Transform | glTF processing and optimization; MIT. | Recommended in a future real-model asset pipeline, not needed for the current still-image preview. |
The asset is the biggest quality decision
A scrolling library will not turn an ordinary kitchen photo into a convincing walk-through. For production, prepare one approved kitchen in 3D, with the actual door profiles, believable panel thickness, countertop edges, grain direction, hardware and interior storage. Separate each animated door from its cabinet and place its pivot on the hinge line. Export an optimized glTF/GLB scene; Three.js recommends glTF for model interchange. Three.js FAQ.
The read-only source audit parsed 551 Mozaik room files, 99 multiprint definitions (365 print pages), five OC Frameless construction presets, and extracted text from 292 PDFs (1,882 pages). Selected multiprint pages and all five chosen renderings were visually reviewed. This is not a dimension-by-dimension sign-off of every drawing or interpretation of every binary file. The room files contain product dimensions and locations; an approved 3D export still needs to be obtained or reconstructed. Do not assume the existing Mozaik order bridge can export a web-ready visual model: the local project notes explicitly describe an unfinished order-data mapping. If no suitable export exists, build the showcase kitchen in Blender from approved drawings or commission the model. Bake lighting where practical; optimize geometry and textures with glTF Transform. Maintain asset licenses and keep a high-quality poster image.
For the frame-sequence route, render the same camera path offline. Start with a short storyboard, then choose frame count and image sizes from tests. Illustrative budget: 180 compressed frames averaging 120 KB would total about 21.6 MB. Keeping 180 decoded 1920 × 1080 RGBA frames would require about 1.49 GB before other overhead. Those are calculations, not measured assets. Use bounded decoding, neighboring-frame prefetch, smaller phone frames and cancellation rather than decoding an entire film at once.
What the shop references changed
The selected kitchen’s room defaults use Frameless V12, Salice hardware and a slim Shaker style, while individual products contain door-style overrides. The OC Frameless preset specifies approximately 1/8-inch paired-door gaps and a 4-inch toe height. Shop guidance describes a satin HDF Shaker finish. These references support close-fitting full-overlay fronts, no face frame across the box opening, restrained sheen and deliberate panel details. They do not justify applying one door profile to every product. The revised copy therefore says Shaker fronts without claiming every door uses the same rail width.
All manufacturing sources remained read-only. The detailed source map and scope are in the local SOURCE_REVIEW.md; private job extracts are kept outside the website build.
Performance and accessibility requirements
- Load the visual assets deliberately. The current player retains at most fourteen decoded frames and permits three concurrent downloads. It fetches frames near the current scroll position; the complete film is not decoded into memory. Production still needs measured responsive assets and network testing. A live 3D alternative also needs a pixel-density budget: Three.js guidance.
- Support reduced motion. Honor the system setting and provide a manual toggle. Reduced motion holds the opening wide shot, disables automatic playback and preserves readable HTML and project links. MDN reduced-motion reference.
- Keep the page accessible outside the canvas. Headings, buttons, chapter links and contact information are HTML. Decorative imagery is hidden from assistive technology; product information remains readable HTML.
- Provide fallbacks. The first rendering is present in HTML before JavaScript starts. Later image failures retain the available view and show a status message. With JavaScript disabled, the first view and ordinary project links remain.
- Mobile is a separate camera composition. Use portrait framing and keep text below the main visual. Test Safari/iPhone and Chrome/Android on physical hardware before release; desktop resizing does not establish phone performance.
- Use measurable release targets. Suggested targets: LCP ≤2.5 s, INP ≤200 ms and CLS ≤0.1 at the 75th percentile, plus a practical 30+ fps floor during the tour on selected midrange phones. These are acceptance targets, not achieved results; the Core Web Vitals thresholds come from web.dev.
How this gets onto the live website
- Approve the concept and visual direction. Try the revised prototype, including reverse scrolling, Play/Pause and reduced motion. The photographic frame-sequence route is recommended for the continuous walkthrough.
- Identify the real frontend deployment source. Match its live homepage to the current source repository and host. The local order prototype and Odoo manufacturing folder are not sufficient proof of that deployment.
- Create the production visual asset. Choose one real Overland kitchen, approve a storyboard, export/model its cabinetry, and prepare desktop, mobile and fallback assets.
- Integrate as a scoped homepage experience. Preserve the existing gallery, service pages, door-builder URLs and contact journey. If the current frontend is static, deploy compiled assets with it. If it is Odoo-managed, package the section and scoped assets in the actual website module using Odoo’s frontend asset system; do that in the source repository, not the shop-floor notes folder.
- Verify a staging release. Check portrait devices, keyboard navigation, no-JavaScript fallback, slow loads, graphics failure, direct anchors, history navigation and links into the existing door builder. Measure real loading and interaction performance.
- Publish the approved result and retain rollback. Keep the old homepage release available, then observe consultation clicks, tour completion and door-builder entry. No conversion uplift is promised without data.
No site migration, database change or new subscription is needed to review this demo. GSAP’s standard license permits commercial use without a fee subject to its terms; preserve license notices and review restrictions for the intended use. Spline and GetLayers were evaluated without buying a plan. Spline’s branding/export choices have plan-dependent conditions in its play settings documentation.
Included example
The current example contains 144 Cycles-rendered source frames from one animated kitchen model, with FFmpeg motion-compensated intermediate frames for smooth web playback. Native scrolling controls the animation in both directions. Play/Pause, chapter links, reduced motion, a poster fallback, bounded frame decoding, and existing Overland project links are included. The packed editable Blender scene retains camera, pantry and drawer keyframes. The source model uses 19 mm frameless sides, full-overlay Shaker fronts, restrained satin materials and an extending drawer box. It is a concept visualization, not a claim of exact manufacturing fidelity or installed-project photography. Production still needs approved geometry, hardware and higher-resolution rendering.
Local source: scroll-kitchen-demo/. Run npm ci, then npm run dev. npm run build creates static output in dist/. See README.md and VERIFICATION.md for the file map, checks and remaining production work.
Rendering assets added for the animated revision
The original model and procedural materials are combined with two CC0 Poly Haven assets: Wood Floor by Dimitrios Savva (diffuse and normal maps), and Forest Slope by Andreas Mischok (HDR environment). These are free public-domain resources. Blender 5.1.2 and FFmpeg were available locally; no paid rendering service was purchased. Source scripts and provenance are in render-source/ASSETS.md.
Research scope and stopping point
Research covered the supplied reference, Overland’s live homepage and both local folder summaries; primary animation and rendering documentation; ten GitHub repositories; model optimization; browser accessibility; and conditional Odoo integration. Searches included scroll-driven Three.js kitchens, GSAP scrub/pin, Drei ScrollControls, Codrops 3D examples, image-sequence repositories, Spline scroll/export and Odoo assets. Follow-up focused on licensing, phone rendering and the actual homepage’s source shape.
The implementation decision is sufficiently supported: the unresolved work is obtaining an approved real kitchen asset and confirming the production deployment source, not finding another scroll library. Repository live demos were not all run, no cross-library performance benchmark was conducted, and the GetLayers videos could not be inspected in motion. Where current source pages were unavailable, no capability is claimed from them. Exact test results for the supplied demo are recorded separately.