类型：Site模板 · 收录：2026-11-05 01:11:45 · 源码：会员可见
# Prompt: HALVØY Nordic cabin site (five illustrated scenes)
Give me the superdetailed exact prompt to recreate this page exactly as it is, including the correct asset URLs, all elements, animations and fonts. This is that prompt.
## What it is
Build a single-file, full-screen, five-scene landing page for a fictional Nordic cabin-stay brand, **HALVØY**. Use plain HTML, CSS and vanilla JavaScript with no framework, no build step and no libraries.
- **Scenes:** each one is a full-screen flat illustration in a grainy, editorial style: a fjord house at violet dusk, a misty valley with an A-frame, a dark features page, a snowy testimonial and a white search page.
- **Navigation:** the page never scrolls natively. Wheel, arrow keys, PageUp/PageDown, space, swipe or a nav link moves to the next or previous scene through a choreographed transition.
- **Layers:** each scene is built from separate layers that move on their own: sky plates, ground bands and cut-out buildings, trees, animals and people.
- **Engine:** every transition is a pure function of time `t` in seconds, driven by one `requestAnimationFrame` loop. Running `t` backwards plays it in reverse, which is how going up works. Scene 5 loops forward back into scene 1.
## Media: every asset URL
All images are Higgsfield GPT Image 2.5 generations, loaded through the Higgsfield image proxy as WebP (alpha kept). Never use local copies.
### Full plates and bands
| Key | Size (px) | What it is | URL |
|---|---|---|---|
| a_sky | 2688 × 1520 | Scene 1 sky: flat violet dusk, diagonal peach and white streak clouds, two birds, distant lilac mountains in haze | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_234121_c31115bd-c988-43c1-bb99-5bf7526ff716.png&w=2688&q=85 |
| a_fg | 2688 × 1520, transparent | Scene 1 foreground band: dark navy-violet jagged tree and rock silhouettes across the full width (top edge about 47% down, transparent above), a long flat box house with a pale lilac frame and glowing peach windows and slats, dark rocks, a violet water strip at the bottom | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_234127_bebd06ca-1595-4117-bddb-47431af145d9.png&w=2688&q=85 |
| a_mist | 2688 × 1520 | Scene 2 background: a dark teal mountain peak split by swirling white-teal fog | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_234132_0739d16c-5403-451c-84bb-a6e46ed09c28.png&w=2688&q=85 |
| a_hill | 2688 × 1152, transparent | Scene 2 hill band: rolling dry-brush green hill, top edge about 45 to 60% down, near black at the bottom | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_234137_3f37e16c-ad38-4f26-8c24-d9f90e5f97fc.png&w=2688&q=85 |
| a_snow | 2688 × 1520 | Scene 4 sky: saturated cyan-blue sky with one white vapour streak and a white snow slope at the bottom | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_234146_ee24a632-a468-4b98-824b-d2bd2a9abf43.png&w=2688&q=85 |
| p5 | 2688 × 1520 | Scene 5 background: pale misty mountains, a band of dark pines, white snowfield | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_232535_44d989c3-9139-4dcc-82e5-31e95f4bae1b.png&w=2688&q=85 |
| pt | 880 × 1168 | Testimonial portrait photo: a woman with wavy dark hair and a patterned blouse | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_232536_b0fcfcb9-acd4-4a02-8072-65a148f063a8.png&w=880&q=85 |
| p1 | 2688 × 1520 | Card 01 thumbnail source: a fjord cabin on a cliff at dusk | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_232519_5119f9df-6a7d-4a36-8b0d-5b93f77384e1.png&w=2688&q=85 |
| p2 | 2688 × 1520 | Card 02 thumbnail source: an A-frame in a misty valley | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_232523_99a9c00d-ede7-4863-ae22-6ec33419a571.png&w=2688&q=85 |
| p4 | 2688 × 1520 | Card 03 thumbnail source: a white cabin on stilts in snow | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_232530_e9dffe4e-08c4-4fb1-9040-dfd61cec49c8.png&w=2688&q=85 |
### Cut-out sheets (transparent, 2048 × 1360 each)
- **a_obj:** https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_234142_3e46cd59-ca90-4fc0-b048-26f7555fe77d.png&w=2048&q=85
- Dark timber A-frame with a tall glowing red-orange window strip and a glowing annex.
- Two chunky brush-stroke pine trees.
- A white angular cabin on black stilts.
- A small motion-blurred shrub.
- **o1:** https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_232554_67ea25c8-e9a5-4083-a297-13a66ed15288.png&w=2048&q=85
- Pine pair (unused).
- Reindeer standing.
- Two hikers seen from behind.
- A red A-frame on thin black stilts with a red zig-zag stair and a black chimney.
- Two small reindeer.
Each cut-out is a div with the sheet as background, cropped exactly to its pixel box `[x, y, w, h]` on a sheet of `W × H`:
- `background-size: (W/w·100)% (H/h·100)%`
- `background-position: (x/(W−w)·100)% (y/(H−h)·100)%`
- The element's width is its height times `w/h`.
Sizes and positions are given as height in vh, left or right in vw, and bottom in vh. On portrait screens (width < height) heights are multiplied by `max(.5, innerWidth/innerHeight·1.2)`, and cut-outs whose left value is over 60 move 30vw left.
| id | sheet | box x, y, w, h | height / left or right / bottom |
|---|---|---|---|
| aframe | a_obj | 41, 460, 744, 685 | 35vh / left 40.6vw / 19.5vh |
| trees | a_obj | 770, 161, 536, 949 | 78vh / right −7vw / 22vh |
| shrub | a_obj | 1143, 1058, 261, 208 | 7.6vh / left 30.5vw / 18vh |
| deer | o1 | 685, 63, 505, 587 | 25vh / right 4.5vw / 12vh |
| wcabin | a_obj | 1300, 233, 729, 848 | 40vh / left 7.5vw / 21vh |
| hikers | o1 | 667, 732, 486, 560 | 26vh / left 42.5vw / 3.5vh |
| red | o1 | 1319, 20, 644, 965 | 56vh / left 69.5vw / 12.5vh (fixed, above all scenes) |
| deerA | o1 | 685, 63, 505, 587 | 9.5vh / left 50.5vw / 9vh |
| deerB | o1 | 1277, 1008, 236, 293 | 5vh / left 64.5vw / 15.5vh |
| deerC | o1 | 1632, 1128, 254, 172 | 5.5vh / right .5vw / 11vh |
**Clip shapes:** on a_obj the neighbouring objects' boxes overlap. Clip aframe, trees, shrub and wcabin with `clip-path: polygon(...)`, using these convex hulls in % of each box, so no sliver of a neighbour shows:
```
aframe: '0.0% 74.0%, 0.1% 72.7%, 25.9% 0.0%, 27.0% 0.0%, 71.1% 0.4%, 79.2% 2.2%, 81.0% 2.6%, 100.0% 74.0%, 100.0% 97.7%, 99.9% 98.1%, 99.6% 98.2%, 95.2% 98.4%, 85.5% 98.7%, 34.7% 100.0%, 31.9% 100.0%, 0.4% 98.5%, 0.0% 98.4%',
trees: '0.0% 40.0%, 1.7% 29.0%, 2.2% 27.8%, 2.8% 26.8%, 3.4% 25.8%, 4.1% 24.7%, 4.5% 24.1%, 5.0% 23.4%, 6.2% 22.1%, 7.8% 20.3%, 9.5% 18.9%, 17.7% 13.6%, 19.6% 12.4%, 26.5% 8.5%, 28.5% 7.6%, 31.0% 6.6%, 31.9% 6.3%, 53.9% 0.3%, 55.2% 0.0%, 56.0% 0.0%, 67.4% 12.0%, 68.8% 13.6%, 91.8% 40.5%, 96.3% 47.7%, 97.9% 50.7%, 98.9% 53.4%, 100.0% 57.2%, 71.6% 97.7%, 35.8% 99.8%, 33.6% 99.9%, 30.8% 100.0%, 29.1% 100.0%, 2.1% 49.3%, 0.6% 46.4%, 0.4% 45.8%, 0.0% 40.3%',
shrub: '0.0% 70.2%, 50.2% 5.8%, 50.6% 5.3%, 55.2% 0.0%, 65.1% 0.0%, 82.0% 13.0%, 88.5% 21.6%, 95.4% 32.2%, 95.8% 33.2%, 96.9% 37.5%, 97.7% 42.3%, 100.0% 69.2%, 100.0% 70.7%, 98.9% 73.6%, 74.7% 97.1%, 73.6% 97.6%, 71.3% 98.1%, 58.6% 99.0%, 42.5% 100.0%, 40.2% 100.0%, 34.5% 99.5%, 23.0% 98.1%, 19.5% 97.6%, 13.8% 96.6%, 10.3% 94.7%, 1.1% 75.0%, 0.0% 71.2%',
wcabin: '0.0% 65.0%, 0.1% 64.7%, 4.5% 60.1%, 10.7% 53.8%, 15.6% 48.8%, 16.7% 47.8%, 17.3% 47.3%, 88.8% 0.4%, 89.3% 0.0%, 89.6% 0.0%, 99.6% 48.5%, 100.0% 50.6%, 100.0% 72.9%, 94.4% 99.8%, 94.2% 99.9%, 93.8% 100.0%, 71.2% 100.0%, 45.7% 99.2%, 29.6% 98.5%, 20.6% 97.6%, 0.4% 82.0%, 0.1% 81.7%, 0.0% 68.8%'
```
**Bands:** `fg1` (a_fg) and `hill` (a_hill) are centred full-width bands.
- **Width:** `max(innerWidth, innerHeight × 1.60)` for fg1 and `× 1.75` for hill, with height = width / ratio (2688/1520 and 2688/1152) and `margin-left: −width/2` from `left: 50%`.
- **Bottom:** −6vh for fg1 and −7vh for hill.
**Card thumbnails:** round crops of p1, p2 and p4.
| Card | Source | background-position | background-size |
|---|---|---|---|
| 01 | p1 | 60% 48% | auto 300% |
| 02 | p2 | 52% 66% | auto 280% |
| 03 | p4 | 20% 58% | auto 280% |
## Fonts and colour
- **Fonts:** Google Fonts **Unbounded** 300 and 600 (display: headings, wordmark, card numbers) and **Manrope** 400, 500, 600 and 700 (UI and body).
- **Colours:**
- **Page:** dark `#0b120a`, card `#121b10`, active card `#0c4a6b`.
- **Accents:** teal label `#5bbccc`, ice blue arrows and labels `#86d6ec`, peach `#ffa071` (hero CTA arrow).
- **Search scene:** ink `#232b40`, heading `#20273b`.
- **Headings:** `font: 300 6.5vw/1.02 Unbounded`, letter-spacing −.035em.
- Hero h1 is 7.4vw and nowrap; Features h2 is 5.9vw.
- **Body:** `max(13px, 1.2vw)`, line-height 1.62.
- **Labels:** Manrope 500 `max(10px, 1.07vw)`, uppercase, letter-spacing .04em.
- **CTAs:** Manrope 700 at body size, followed by a thin arrow svg (14×10 viewBox, path `M9 1l4 4-4 4M13 5H0`, stroke 1.8) that slides 5px right on hover.
## Nav (fixed, z 60, 9vh tall)
- **Padding:** 0 4.8vw 0 4.9vw; font `max(11px, .96vw)` weight 600.
- **Wordmark:** "HALVØY" in Unbounded 600 `max(12px, 1.12vw)`, letter-spacing .2em, in a 14.1vw wide slot.
- **Links:** "Discover, About us, Journal, Contact us", 4.1vw apart, with a 1px underline that scales in from the left on hover. They jump to scenes 1, 2, 4 and 5.
- **Right side:** a search icon (circle r 5.2 plus a handle) and "English ⌄".
- **Colour:** white. On scene 5 the body gets class `ink` and the nav turns `#232b40`. The colour switch happens 45% of the way through the transition.
- **Phones (≤760px):** only the wordmark and the search icon stay.
## Scene 1: hero "Find your quiet"
- **Layers:** `sky1` (a_sky, cover) and band `fg1`.
- **Text block:** absolute, left and right 15.3vw, top 15.4vh.
- h1 "Find your quiet".
- A row (margin-top 5.6vh, space-between):
- Paragraph, 33vw wide: "Dive into the beauty of the far north without the loss of daily comfort. Leave the noise of the city behind the fjord."
- CTA, 1.1vh lower, with a peach arrow: "Start my adventure".
- **Intro on load:** preload every image, then over 1.2s:
- fg1 rises from translateY 8vh to 0 (ease-out cubic over 0 to .9s).
- The h1, paragraph and CTA reveal in turn, starting at .25s with .14s stagger.
## Scene 2: about "Closer to the north"
- **Layers, back to front:** mist2 (a_mist cover), trees, aframe, hill band, shrub, deer.
- **Text:**
- Label "About us": left 10vw, top 17.6vh, white 75%.
- h2 "Closer to<br>the north": left 10vw, top 20.6vh.
- CTA "Check our values": left 10vw, top 43.6vh.
- Paragraph: left 61.3vw, top 22.5vh, 22.5vw wide, white 82%. "We are rethinking slow travel with a quieter set of values. Stay in low-impact cabins and fill your days with the beauty and stillness of the untouched north."
## Scene 3: features "We make the north reachable"
- **Background:** solid `#0b120a`.
- **Text:**
- Teal label "Features": 8vw, 15.5vh.
- h2 "We make the north<br>reachable": 8vw, 18.8vh.
- Paragraph: 77vw, 20.6vh, 15.5vw wide. "Welcome to a world of impossible views, quiet and respect for nature."
- **Arrows:** two 2.6vw circular buttons, 2.4vw apart, at 83.2vw, 42.4vh. Their colour is white 60%, going to white with a 7% white background on hover.
- **Cards:** a grid at left 8vw, width 83.8vw, top 50vh, height 41.3vh, three equal columns aligned to the bottom.
- **Each card:**
- **Size:** height `calc(100% − 3.7vh)`, background `#121b10`, padding 2.1vh 3.6vw 0.
- **Content:**
- Number: Unbounded 300, 2.3vw.
- h3: Manrope 600, 1.65vw.
- Hidden description: .92vw, 16vw wide.
- "Learn more": absolute, bottom 5.5vh.
- Round thumbnail: 10.4vw, top right inside the card, starting at scale .55 rotate −25deg with opacity 0.
- **Active card (`.on`):** grows to 100% height (upward, .6s) and turns `#0c4a6b`.
- The description and Learn more fade in (delay .15s and .2s).
- The thumbnail springs to scale 1 rotate 0 (.55s `cubic-bezier(.3,1.25,.4,1)`).
- **Card text:**
- 01 "Unique experience": "We show you the wonders of the fjords from a perspective you have never seen."
- 02 "Comfortable setting": "Stay in cabins that pair Nordic craft with quiet, sustainable luxury."
- 03 "Car-free valleys": "Every site is reached on foot, by boat or by bike. Only wind, water and birds."
- **Interaction:** the arrows move the highlight (wrapping), and hovering a card highlights it.
## Scene 4: stories "Guest stories"
- **Layers:**
- `sky4`: top −34vh, height 134vh, background `#0a8eca`. It holds `plate4` (a_snow, cover, filling the lower 100vh) and the `wave` canvas (top, 42vh tall).
- `stage4`: inset 0, transform-origin 28% 100%, containing wcabin and hikers.
- **Text:**
- Label "Testimonials" in `#86d6ec`: 7.1vw, 13.8vh.
- h2 "Guest<br>stories": 7.1vw, 17.3vh.
- **Portrait:** 49.8vw, 27.4vh, 14.6vw × 25.8vh, cover at center 22%, z 2.
- **White card:**
- **Box:** 57.3vw, 35.3vh, 37vw × 30.1vh; padding 4.8vh 2.4vw 0 11.5vw; shadow `0 2vh 5vh −2vh rgba(10,40,80,.35)`.
- **Content, top to bottom:**
- Stars "★★★★★" in `#4c556f`.
- Name "Ingrid Solheim": Manrope 700, 1.55vw.
- "Trip date: Feb 12, 2026" in `#b9bdc8`.
- Quote at .93vw in `#454b5e`: "The stay with Halvøy was something I had never tried before. A warm cabin, total silence, no cars and a feeling of being part of the landscape. The perfect way to leave the city behind."
- "f" and "in" at the top right in `#a8adbb`.
- **Arrows:** at 84.6vw, 27.4vh, white 80%.
### The stipple wave
Built once per resize at a third less than screen resolution:
- **Mask canvas:** the size of `sky4`. Use it as `sky4`'s `mask-image` (data URL, `mask-size: 100% 100%`), so the sky art itself breaks into dots.
- For each column x (t = x/W), with `base` = the top 34vh:
- `top = base·(.16 + .1·sin(5.4t + .9) + .05·sin(12.7t + .2))`
- `full = base·(.62 + .1·sin(4.3t + 2.4) + .04·sin(10t + 1))`
- Alpha is 1 below `full`. Between `top` and `full`, a pixel is on with probability `((y−top)/(full−top))^1.3`. Above `top` it is 0.
- **Streak canvas:** draws three tapered dark brush streaks (rgb(9, 17, 8)) through the blue band, only where the mask is on.
- Each streak is `[x0, x1, cy, thickness, phase]`: `[−.06, .3, .55, .085, 2.1]`, `[.38, .78, .58, .1, 1.2]`, `[.74, 1.08, .47, .075, .4]`.
- Centre: `base·(cy + .07·sin(6.3u + ph))`. Half-thickness: `base·th·sin(πu)^.8`.
- The edges stipple out over half a thickness at 70% density.
- Re-apply the mask after every scene settles.
## Scene 5: search "Plan your escape"
- **Background:** `#fdfdfd`.
- **Layers:**
- `snow5`: p5, cover.
- `fade5`: a white sky over the art, `linear-gradient(#fdfdfd 0, #fdfdfd 34%, rgba(253,253,253,.85) 48%, transparent 64%)`.
- Reindeer deerA, deerB and deerC.
- The fixed red cabin.
- **h2 "Plan your escape":** 10vw, 14.6vh, nowrap, `#20273b`.
- **Form:** left 10vw, top 30.4vh, 31.6vw wide, gap 1.4vh, four 5.5vh rows on `#e9eef6` with placeholder text in `#8e97ab` at 1.2vw.
- "Destination"
- "Start date | End date" (two halves split by a 1px `#d6dbe6` line)
- "People"
- "Experience"
- Hover darkens a row to `#e1e5ef`.
- **Button "Search adventure →":** 10vw, 61.5vh, 21.1vw × 5.4vh, background `#232b40`, white Manrope 700, ice-blue arrow. Hover: `#2f3955`, lifting 2px.
## Text reveal helpers
- **`rin(list, t, start, dur = .42, stagger = .07)`:** each element gets `v = easeOutCubic` over its window, then `opacity v; filter blur((1−v)·9px); transform translateY((1−v)·2.4vh)`.
- **`rout(list, t, a, b)`:** `v = easeInOutCubic`, then `opacity 1−v; blur(v·9px); translateY(−v·1.2vh)`.
- **No CSS keyframes:** everything is set inline per frame.
- **Easing helpers:**
- `k(t, a, b, f)` = f(clamp((t−a)/(b−a))), with the default f = easeInOutCubic.
- eo = easeOutCubic, ei = easeInCubic, qo = `x(2−x)`.
## Transitions (t in seconds)
### 1 → 2 (1.55s)
- **Hero text:** rout .14 to .45.
- **mist2:** opacity `k(.16, .5)`. Its mask is `linear-gradient(#000 (m·160−40)%, transparent (m·160+10)%)` with `m = k(.14, .5)`, so the fog washes down from the top.
- **aframe:** rises from 58vh, `k(.05, .8)`.
- **fg1:** opacity `1 − k(.6, .78)`, blur up to 5px over `.4 to .72`, drifting down 4vh over `.3 to .9`. The old house stays visible under the fog until about .7s.
- **hill:** rises from 56vh and slides in from 12vw right, eo over `.46 to .88`.
- **shrub:** rises from 50vh over `.5 to .9`.
- **deer:** walks in from 42vw right, eo over `.6 to 1.05`.
- **trees:** slide in from 50vw right, eo over `.6 to 1.2`.
- **Scene 2 text:** rin from 1.05.
### 2 → 3 (1.0s)
- **Scene 2 text:** rout 0 to .3.
- **Dark page:** with `u = k(.05, .5)`, scene 3 rises from translateY 100%.
- **Hill, shrub and deer:** move up `u·100vh`, riding on top of the dark page.
- **mist2:** moves up `u·35vh`.
- **aframe:** sinks 44vh over `0 to .24`.
- **trees:** exit 45vw right, ei over `0 to .2`.
- **Scene 3 text:** rin from .28 with .06 stagger.
- **Cards:** fade and rise from 6vh, eo, card i over `.36+.1i to .76+.1i`.
### 3 → 4 (1.6s)
- **Features:** text rout .14 to .46; cards fade and blur 8px over `.1 to .42`.
- **sky4:** rises linearly from translateY 134vh to 0 over `.03 to .6`. The stipple edge and dark streaks sweep up over the dark page.
- **stage4:** `translateY(125·(1 − t/.95)²vh) scale(1.6 − .6·qo(k(.15, 1.1)))`. The white cabin peaks up at the bottom first, close up, and the camera pulls back.
- **hikers:** extra rise from 14vh, eo over `.1 to .75`.
- **Scene 4 text:** rin from 1.0 with .06 stagger.
### 4 → 5 (1.6s)
- **Scene 5 sits underneath.**
- **red:** made visible, slides in from 30vw right, eo over `0 to 1.25`.
- **Scene 4:** opacity `1 − k(.16, .62)` with blur up to 6px and brightness up to 1.35. It cross-fades straight into the white search scene.
- **snow5 and fade5:** rise from 14vh, eo over `.15 to .7`.
- **Reindeer:** fade in, staggered .08, sliding 6vw.
- **Scene 5 text:** rin from .95 with .08 stagger.
### 5 → 1 (1.5s)
- **Hero sits above.**
- **red:** sinks 70vh, ei over `.05 to .5`. Reindeer sink 40vh.
- **Search text:** rout .18 to .5.
- **fg1:** rises from 62vh, eo over `.05 to .62`.
- **sky1:** opacity `k(.3, .62)` over the white.
- **Hero text:** rin from .78 with .14 stagger.
### Engine
- **`go(dir)`:** runs `T[i]` from 0 to D (forward) or D to 0 (back), then `settle(i)`.
- `settle` clears every inline transform, opacity, filter and mask, shows only the current scene, sets the nav colour and re-applies the wave mask.
- Going up from scene 1 does nothing. Going down from scene 5 plays 5 → 1.
- **Wheel:** acts when |deltaY| ≥ 6, then locks for 1.1s. Keys: ↓, PageDown and space go forward; ↑ and PageUp go back. Touch: a swipe over 40px.
## Phones (≤760px)
- **Type and text:** headings 10.5vw and wrapping, text at 6vw left.
- **Scene 2:** paragraph hidden.
- **Scene 3:**
- Paragraph at 37vh.
- Arrows at the right, 43.5vh.
- Cards in one column from 50vh with 1vh gaps; only the active card shows its description.
- **Scene 4:** portrait 30vw at 32vh; card 74vw at 20vw, 42vh.
- **Scene 5:** form full width at 27vh, button 60vw at 56vh.