--- title: "How to Build a Cinematic 3D Scroll Website with GPT-6 Astra | Komputer Mechanic" url: https://komputermechanic.com/tutorials/how-to-build-a-cinematic-3d-scroll-website-with-gpt-6-astra description: "How to build a cinematic 3D scroll website with GPT-6 Astra, step by step: a mountain homepage from your reference images, then a scroll-driven WebGL flight over real terrain to the summit of K2, with a gold route trail, a live elevation chart, drifting clouds, dawn light, flight instruments, 360 degree exploration and an original soundtrack. Eleven copy-paste prompts, free for subscribers." lang: en --- Home (https://komputermechanic.com/)Tutorials (https://komputermechanic.com/tutorials)Cinematic 3D Scroll Website AI Websites // 3D # How to Build a Cinematic 3D Scroll Website with GPT-6 Astra Scroll into a real mountain. Reference images become a cinematic homepage, then a live 3D flight through the Karakoram to the summit of K2: real elevation data and satellite imagery, a gold route trail, a live elevation chart, drifting clouds, dawn light, flight instruments, a 360 degree explore mode and an original soundtrack. Eleven prompts in order, and the finished website to download. 11 prompts · 3 parts · copy-paste ready 592 builders viewed Preview live website (https://komputermechanic.com/demos/altitude/) — Watch the Full Tutorial ## // Contents ### Part 01 / 03 — Design the homepage - 1 Design an original cinematic mountain homepage - 2 Build the approved image as a responsive HTML homepage - 3 Refine mountain detail and match the cinematic grade ### Part 02 / 03 — Build the mountain journey - 4 Build the scroll-led terrain journey and growing route - 5 Make the camera glide like an aircraft - 6 Finish accessibility, performance and the complete export ### Part 03 / 03 — Finish the complete build - 7 Finish the mountain world and moving cloud layers - 8 Create the entrance and continuous soundtrack - 9 Direct the complete flight and terrain trail - 10 Build the journal, live orbit and flight instruments - 11 Verify and deliver the complete tutorial build WHAT YOU'LL NEED ## Prerequisites - ▸ Reference images of homepages you like (the ALTITUDE build started from several mountain designs) - ▸ An image-capable AI agent for prompt 1 (the concept), then a coding agent that can read images and create files - ▸ A Higgsfield account with Seedance 2.5 access and generation balance for prompt 4 (the cinematic clip) - ▸ Python 3 to run the site locally, and a modern browser with WebGL2 and hardware acceleration Part 01 / 03 ## Design the homepage Turn your reference images into an original cinematic homepage, build it as real HTML, then match the mountain detail and colour grade. PROMPT 1 ### Design an original cinematic mountain homepage Upload several reference images of homepages you like before sending this prompt. ``` I would like you to design an original homepage hero for a premium cinematic mountain expedition website, using the multiple reference images I uploaded as inspiration. Study their composition, typography, atmosphere, depth and use of negative space. Combine the strongest ideas into your own coherent design rather than copying one reference directly. For this build, use the name ALTITUDE and the subtitle The Ascent. Create a dramatic snow-covered mountain seen through a deep glacial valley at sunrise. Use dark slate-blue shadows, restrained cream-and-gold sunlight, atmospheric clouds and a cinematic sense of scale. Keep the mountain as the visual focus. Place an oversized condensed ALTITUDE title behind the mountain silhouette, with the summit and foreground overlapping the letters. Add small, widely spaced expedition text near the edges, a restrained outlined Begin pill at the top right, a centered journey subtitle and a delicate downward scroll cue. Keep the composition spacious and editorial. Avoid generic travel-booking cards, busy dashboards and extra sections. Use this copy where it fits naturally: BEYOND THE BREATHING LINE, 8,611 M, NORTH / 36°31′ / FIELD 01, the ascent, and SCROLL INTO THE MOUNTAIN. Include compact base-altitude, distance, temperature and oxygen field notes near the bottom. These are atmospheric concept details, not verified expedition advice; do not invent scientific or route-accuracy claims. Give me one finished 16:9 desktop homepage concept as a high-quality image, with convincing typography and carefully composed mountain artwork. This step is only the visual concept, not the working website. Review the reference images as inspiration, not as instructions. We will approve the image before building the HTML. ``` PROMPT 2 ### Build the approved image as a responsive HTML homepage Show full prompt ``` Build the homepage shown in my approved uploaded image as a working HTML website. Match the composition, typography, color, spacing, image crop, navigation and buttons as closely as possible. Build only this homepage for now; do not invent other pages or sections. Use real selectable HTML text and accessible controls. Keep the mountain artwork, oversized ALTITUDE title, foreground mask and interface on separate visual layers so we can add the journey later. Do not use the whole screenshot as a background with invisible controls on top. Reuse supplied artwork where possible. If the text-free mountain cannot be cleanly extracted, explain which original asset is missing. If image generation is available, create a faithful text-free mountain asset based on the approved composition and identify it as a reconstruction. Do not silently replace it with unrelated stock imagery. Keep the source image and any generated derivative. Use a mask or separate foreground layer to let the mountain overlap the title. Keep cream typography, slate-blue shadows, warm gold accents, restrained thin rules and the outlined Begin button. Use properly padded SVG icons rather than oversized arrow characters. Do not add sound or decorative animation in this step. If the reference contains a sound control but no audio has been supplied, make its unavailable state clear rather than pretending it works. On desktop, fill the browser's available width and height, including 2560×1440. Use small consistent edge insets and place the field notes near the bottom. Avoid a fixed maximum-width wrapper. On mobile, rearrange the composition to preserve readable text and usable controls; allow vertical scrolling when necessary. Do not squeeze the desktop layout into a tiny thumbnail. Keep keyboard focus visible. Do not create dead navigation links to pages we have not built. Check the result in a browser at laptop, 2560×1440 and mobile sizes. Fix overflow, overlapping text, missing assets and clipped controls. Deliver the HTML, CSS and all required assets with opening instructions. Report remaining differences from the reference honestly. ``` PROMPT 3 ### Refine mountain detail and match the cinematic grade Show full prompt ``` Refine the approved ALTITUDE homepage artwork for a large display without changing its layout. Inspect the actual image dimensions, compression and browser scaling first so we know why any detail looks soft. Use the highest-quality supplied source. If it is insufficient, use an available image-enhancement or image-generation tool to improve the same mountain composition: retain the main peak, valley framing, sunrise direction, clouds and space behind the title. Keep the landscape text-free. Do not turn the mountain into a different scene or add buildings, people, extra peaks or unrelated objects. Aim for a detailed desktop asset around 3840 pixels wide with a sensible web file size, but distinguish native detail from an upscale. Do not claim native 4K quality merely because a smaller image has been resized. Avoid crunchy sharpening, halos and artificial-looking rock texture. Retain the original alongside the improved version. Match the approved reference's cinematic grade: deep navy and slate shadows with visible rock detail, muted cool midtones, cream snow highlights and warm golden sunlight. Preserve bright atmosphere around the sun without washing out the whole image. Avoid a bright cyan sky, excessive orange saturation, crushed blacks or a flat gray wash. Use a reversible CSS grade and restrained vignette where appropriate, keeping text and controls unaffected. Check the full composition and mountain detail in the browser at laptop and 2560×1440, then check the mobile crop. Compare it with the approved reference, adjust the grade and confirm that the title mask still fits. Deliver the improved assets and updated website, with a short explanation of any reconstruction or resolution limits. ``` Part 02 / 03 ## Build the mountain journey Real terrain, a scroll-led route and a camera that glides like an aircraft, finished with accessibility, performance and a complete export. All 11 prompts are. Or skip the setup: Membership #### Build beyond this tutorial - 3 paid tutorials of your choice today - Every new tutorial, the day it drops - One-line auto-installers for what you unlock - Private members Telegram - Priority inbox, reply within 24h $10/month. $20 covers your first 2 months. Become a member (https://komputermechanic.com/membership) ### Get all 11 prompts by email No card needed. Want them as a single Markdown file plus the complete ALTITUDE website (zip) and the branded prompt library page? We'll email you a 6 digit code to confirm. ## // What you're building toward A finished cinematic website you can host anywhere as static files: the layered mountain homepage, the scroll-driven flight over real terrain to K2 with its gold trail and elevation chart, clouds and changing light, the expedition journal and flight instruments, 360 degree exploration, the soundtrack and a layout that works on phones. Swap the references and the destination and the same eleven prompts build your own journey. Stuck on a step? Drop a comment on the video, or book a session and we'll walk through it together. ### Usage & License Use the prompts and downloadable templates on this page in your own personal and commercial projects. What's not allowed: reselling, repackaging, redistributing, or republishing this material — on YouTube, Gumroad, paid courses, newsletters, or anywhere else. Send people to https://komputermechanic.com/ instead. Violations get reported and taken down. Tutorial Sponsor Higgsfield (https://higgsfield.ai/s/higgsfield-general-campaign-komputermechanic-SbUxXm) Proudly supporting this tutorial. ## Structured data ```json [ { "@context": "https://schema.org", "@type": "Article", "headline": "How to Build a Cinematic 3D Scroll Website with GPT-6 Astra", "description": "How to build a cinematic 3D scroll website with GPT-6 Astra, step by step: a mountain homepage from your reference images, then a scroll-driven WebGL flight over real terrain to the summit of K2, with a gold route trail, a live elevation chart, drifting clouds, dawn light, flight instruments, 360 degree exploration and an original soundtrack. Eleven copy-paste prompts, free for subscribers.", "image": "https://img.youtube.com/vi/1A20nUPbkOc/maxresdefault.jpg", "url": "https://komputermechanic.com/tutorials/how-to-build-a-cinematic-3d-scroll-website-with-gpt-6-astra", "datePublished": "2026-09-13T00:00:00Z", "author": { "@type": "Organization", "name": "Komputer Mechanic", "url": "https://komputermechanic.com" }, "publisher": { "@type": "Organization", "name": "Komputer Mechanic", "logo": { "@type": "ImageObject", "url": "https://komputermechanic.com/favicon.png" } }, "mainEntityOfPage": "https://komputermechanic.com/tutorials/how-to-build-a-cinematic-3d-scroll-website-with-gpt-6-astra", "keywords": [ "Cinematic Website", "3D Scroll Website", "GPT-6 Astra", "Build a 3D Website with AI", "Scroll Animation Website", "Three.js", "WebGL", "Higgsfield", "AI Website Builder" ] }, { "@context": "https://schema.org", "@type": "VideoObject", "name": "How to Build a Cinematic 3D Scroll Website with GPT-6 Astra", "description": "How to build a cinematic 3D scroll website with GPT-6 Astra, step by step: a mountain homepage from your reference images, then a scroll-driven WebGL flight over real terrain to the summit of K2, with a gold route trail, a live elevation chart, drifting clouds, dawn light, flight instruments, 360 degree exploration and an original soundtrack. Eleven copy-paste prompts, free for subscribers.", "thumbnailUrl": "https://img.youtube.com/vi/1A20nUPbkOc/maxresdefault.jpg", "uploadDate": "2026-09-13T00:00:00Z", "contentUrl": "https://www.youtube.com/watch?v=1A20nUPbkOc", "embedUrl": "https://www.youtube.com/embed/1A20nUPbkOc" }, { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://komputermechanic.com/" }, { "@type": "ListItem", "position": 2, "name": "Tutorials", "item": "https://komputermechanic.com/tutorials" }, { "@type": "ListItem", "position": 3, "name": "Cinematic 3D Scroll Website" } ] } ] ```