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
// Contents
Part 01 / 03 — Design the homepage
Part 02 / 03 — Build the mountain journey
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
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.
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.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.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.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 memberGet 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 komputermechanic.com instead. Violations get reported and taken down.