Atoll

ATOLL - Mobile-first resort site: watch it grow out of the sea. Aalto Prompt Library.

How to use: paste this whole prompt into Claude Code in an empty folder. Fill in the brief below first if you want your own brand (or leave it blank for the demo). Claude will explain how the film and photos get made: automatically, if you have a generation tool like Higgsfield connected, or by giving you prompts to paste into any tool yourself.

==================================================
0. YOUR BRIEF (fill this in, or leave it blank to build the demo exactly)
==================================================
Brand name:            [e.g. "Halo Atoll"]
What it is:            [e.g. a luxury overwater retreat with twelve suites; works for hotels, villas, real estate, architecture]
The building:          [e.g. a ring of timber suites on a lagoon reef]
The place:             [e.g. a turquoise lagoon at golden hour]
Mood and colors:       [e.g. calm, sun-bleached, sand, foam and deep sea]
Video tool:            [auto / Higgsfield / Kling / Veo / Runway / Sora / Luma / other]
Media I already have:  [path to a folder, or "none"]

==================================================
HOW TO RUN THIS PROMPT (instructions for Claude)
==================================================
Work through these phases in order. Tell me which phase you're in.

PHASE 0 - EXPLAIN HOW THE MEDIA WILL BE MADE (before anything else)
Check whether a video or image generation tool is connected to this session, then explain to me in plain words, in a few short lines:
- This site needs 1 vertical film, 2 keyframe stills and 5 vertical photos, made for my brand (list them by name from the shot list).
- Option 1 - automatic: if a generation tool is connected (for example Higgsfield), you generate everything yourself and build the site in one go. Tell me whether one is connected right now. If none is, tell me I can connect one (for Higgsfield: add its MCP server to Claude Code, then restart this session) and paste this prompt again.
- Option 2 - manual: if I don't want to connect anything, you give me ready-made prompts to paste into any tool (Higgsfield, Kling, Veo, Runway, Sora, Luma, Midjourney...), I save the files into media/raw/ with the names you give me, and I type "continue".
- Option 3 - my own media: if I already have footage or images, I put them in media/raw/ (or give you the folder) and you use them.
Ask me which option I want, unless the brief already answers it ("Video tool: auto" = option 1 if a tool is connected, otherwise option 2). Then go on to Phase 1.

PHASE 1 - ADAPT THE CONCEPT
- Read the brief. Anything left blank keeps the demo value.
- Rewrite the brand: name, the six film captions, the photo grid headings and captions, the stats (suites, view, first season) and the reservation lines. Keep the same structure, line counts and rhythm. Keep the tone of the demo.
- Pick a palette from the mood with the same roles and contrast levels as the demo colors in section 1.
- Rewrite the shot list (the last section) for the new brand, keeping every LOCKED item exactly. The story stays visually close to the demo: same camera moves, same pacing, same kind of energy - only the subject, place and styling change. Save it as media/SHOTLIST.md.
- Show me the adapted copy, palette and shot list in a short summary, then continue.

PHASE 2 - MAKE THE MEDIA
Check media/raw/ (and the folder from the brief). Skip every file in the shot list that is already there.
A) If a generation tool is connected (for example a Higgsfield MCP server, or any tool that can generate images, image-to-video):
   1. Generate the keyframe stills first (the "K" items), at the stated size.
   2. Look at each still. If it breaks a LOCKED rule (wrong framing, subject cut off, text or logos in frame, a different person or product than the other shots), regenerate it.
   3. Generate each film with image-to-video, using its keyframes as the start frame and, where the tool supports it, the end frame. Use the previous shot's stills as references so the person, product and place stay the same.
   4. Download everything into media/raw/ with the exact file names from the shot list.
B) If no generation tool is connected: print every keyframe and film prompt as its own copy-paste block, with its settings line (type, aspect ratio, size, duration, start frame, end frame, file name). Tell me to generate them in my tool and save them into media/raw/ with those names. Then STOP and wait. When I say "continue", carry on from Phase 3.

PHASE 3 - PREPARE THE MEDIA
- Export the film as frames, two sets (update COUNTS in the script):
  ffmpeg -i media/raw/film.mp4 -vf "fps=12,scale=720:-2" -q:v 3 frames/v0/%04d.jpg
  ffmpeg -i media/raw/film.mp4 -vf "fps=8,scale=360:-2" -q:v 4 frames-sm/v0/%04d.jpg
- Match the six caption windows (WINDOWS in the script) to when each story beat happens in your film.
- Photos: resize to 720x1280 into img/p1.jpg ... p5.jpg. Frames taken straight from the film work well.

PHASE 4 - BUILD
Build the site exactly as specified in the build spec below, with the demo brand, copy, colors and media replaced by the adapted versions. The demo values are written in; replace every one of them.

PHASE 5 - CHECK
Serve the folder (npx serve .), open it, scroll the whole page on desktop and on a phone-sized window, and fix anything broken: missing files, 404s, console errors, fonts not loading, the film on a phone-sized screen (it is made for phones first).

==================================================
THE BUILD SPEC (demo values shown; replace them with the adapted ones)
==================================================
Build a single-page website for a fictional luxury overwater retreat called "Halo Atoll": twelve suites in one timber ring standing on a lagoon reef. The hero is one portrait film you scrub with the scroll: a circle of timber piles staked out on the reef, a pile driven into the coral sand underwater, the deck and timber battens closing the ring, and finally the finished ring with a pool court open to the sky and an arrival jetty. Captions glide in letter by letter, alternating sides of the frame. Below the film, five photos slide in from the sides in an asymmetric grid, and the page ends on a deep-sea section with glass stat cards.

Output: ONE self-contained index.html with inline <style> and one inline <script>. Raw WebGL (no libraries), plain JavaScript, local assets only (frames/, frames-sm/, img/). No frameworks, no build step. Mobile-first: the film is portrait (9:16) and is designed to fill a phone screen; on desktop it is cover-cropped.

==================================================
1. DESIGN SYSTEM
==================================================
Mood: calm, sun-bleached, barefoot luxury. Sand and foam on top, deep sea at the bottom.
Colors (CSS variables): --ink #12343a, --ink-dim rgba(18,52,58,.62), --foam #f7f4ec, --sand #efe8d8, --sea #0d2b30, --sea-2 #123b42, --lagoon #1b9490, --lagoon-l #9fd9d2, --white #f4faf8, --white-dim rgba(244,250,248,.74). Easing cubic-bezier(.22,.61,.36,1). Radius 18px. Side padding clamp(20px,4vw,48px).
Type: headlines in Georgia (system serif, weight 400); everything else in the system sans stack (-apple-system, Helvetica Neue, Arial). Small kicker labels 11px, uppercase, letter-spacing .34em, weight 600.
Liquid glass: a .glass class with a soft white diagonal gradient, backdrop-filter blur(16px) saturate(1.35), a 1px white border, an inner top highlight and a soft shadow, plus a radial highlight in a ::before. A darker .glass-sea variant for the deep-sea section.
Pill buttons: white gradient, uppercase 12px with wide tracking, lift 1px on hover.
Nav: fixed frosted sandbar (foam at 55% + backdrop blur) with the wordmark "HALO ATOLL" ("ATOLL" in lagoon color, tracking .44em) and a "Reserve" pill (mailto link).

==================================================
2. PRELOAD SCREEN
==================================================
A foam-colored full-screen layer with the wordmark, a 1px lagoon progress bar and a percentage. Lock page scrolling. Reveal as soon as the opening frames are in (36 on desktop, 24 on phones), not the whole film; the rest keeps streaming behind the page and a small % counter in the hero corner shows the full load, then fades. Never hold the page longer than 8 seconds.
Load frames with new Image() through a pump of 10 parallel requests; each finished image starts the next.

==================================================
3. HERO: THE SCROLL-SCRUBBED FILM
==================================================
#hero is a tall wrapper (film length in "units" x 1.5 viewports + 1 viewport); inside it a sticky 100vh #stage with a <canvas> and a poster <img> that fades out after the first paint. A radial vignette sits over the canvas.
Frames: one 15s portrait clip exported as JPGs: 181 frames at 720x1280 for desktop (frames/v0/0001.jpg...), 120 frames at 360x640 for phones (frames-sm/v0/...). Pick the set with Math.min(innerWidth, innerHeight) < 700.
Scrub: progress = scrollY / (hero height - viewport). Each requestAnimationFrame: current += (target - current) * 0.065, so the film glides after the scroll instead of jumping.
Frame position = current * (N-1). Upload the two neighbouring frames (floor and floor+1) as textures and blend them by the fractional part in the shader, so slow scrolling looks like real slow motion. When scrolling stops, ease that blend to 0 or 1 so the page never rests on a half-mixed frame.
If a frame hasn't arrived yet, use the nearest one that has, so scrubbing works mid-download.
Only redraw when a texture or the blend actually changed. DPR capped at 2.
Shader (WebGL1, one full-screen triangle): sample the textures "cover"-fitted to any viewport aspect; a tiny RGB split (chromatic offset) on the edges during transitions. Keep a general TIMELINE array of steps so the same engine can join several clips with a circular "funnel" transition (an expanding circle mask with a refractive lip, a light ring in pale lagoon tint, and a slight zoom on the incoming clip); with one clip that path simply never runs.
Robustness: handle webglcontextlost (preventDefault, rebuild on restore); if the context doesn't come back within 1.5s, or WebGL is missing, swap in a fresh canvas and run the same scrub on a 2D canvas with plain crossfades.
Scroll cue at the bottom ("SCROLL" with an animated dropping line) hides after 1.2% progress. A 2px lagoon progress rail runs along the bottom of the stage.

Text panels on the stage, each shown only inside its own progress window, centered or as lower-third captions that alternate left and right:
- [0 - 0.05] H1 "A ring of rooms on a living reef" + sub "Private overwater retreat · Twelve suites"
- [0.08 - 0.17] left: kicker "The reef" / "Thirty timber piles, one perfect circle"
- [0.24 - 0.36] right: "Below the surface" / "Each pile driven into clean coral sand"
- [0.48 - 0.60] left: "The ring rises" / "Timber battens close the circle"
- [0.78 - 0.87] right: "The court within" / "A pool court open to the sky"
- [0.92 - 1.0] centered H2 "The water is waiting" + "A single ring of twelve overwater suites, opening for its first season." + pill "Reserve your stay"
Letter-by-letter reveal: split every [data-split] element into word spans (nowrap) and character spans; each char fades in and slides 26px from the left (or 30px from the right for .from-r) with a 24ms stagger per character.

==================================================
4. THE HALO RING (photo grid on foam)
==================================================
Background gradient foam -> lighter foam -> sand. Centered header: kicker "The Halo Ring", H2 in two lines "One circle," / "held by the sea" (second line sliding from the right), letter-split.
A 12-column asymmetric grid of five rounded photos with numbered captions, staggered vertically with different top margins:
- 01 "The circle, staked out" (columns 1-5, 3:4)
- middle column (6-9): kicker "Within the ring", paragraph "The ring stands on thirty hand-driven piles, a lagoon-water pool at its centre and the horizon on every side. Nothing is nailed to the reef - lift the ring away and the water closes over as if it was never there." and a glass chip "Reef · Ring · Retreat"
- 02 "Under the lagoon" (9-13, 4:5), 03 "The deck, closing" (1-5, 4:3), 04 "The court within" (5-10, 4:3), 05 "Arrival by jetty" (10-13, 3:4)
Each photo slides in from the side it sits on (72-96px) and fades in when 22% visible (IntersectionObserver that toggles both ways, so they slide out again when you scroll back), the image inside settles from scale 1.14 to 1.06, and has a gentle vertical parallax (±26px) driven by its distance from the viewport center.
Under 860px: one column, the paragraph moves up between photo 1 and 2.

==================================================
5. MEET THE HALO RING (deep sea)
==================================================
Dark gradient --sea -> --sea-2. Two columns: left kicker "By reservation", H2 "Meet the Halo Ring", lead "One ring, one reef, and a short jetty between you and everything else. Stays open with the first season - tell us which moon suits you.", pill "Reserve your stay". Right: three .glass-sea stat cards, each indented a little more than the one above and sliding in from the right with a staggered delay: "12 Overwater suites", "360° Of lagoon horizon", "2027 First season" (numbers in Georgia, pale lagoon color).
Footer row with a hairline top border: "Halo Atoll" / "By reservation only".

==================================================
6. QUALITY BAR
==================================================
- prefers-reduced-motion: all transitions near-instant, text and photos visible without motion, shader pulse reduced.
- viewport-fit=cover, theme-color #0d2b30, meaningful alt text on every image, aria-hidden on decorative layers.
- A _headers file (Netlify): frames cached for a year (immutable), photos for a week, index.html no-cache.

==================================================
7. MEDIA: THE SHOT LIST (save the files into media/raw/)
==================================================
Works with any video or image tool. LOCKED = keep exactly, whatever the brand (the code depends on it). FREE = change it to fit the brief. Demo values are in [brackets].

General rules for every shot: photoreal and cinematic unless stated, no text, no logos, no watermarks, no recognisable real brands. The same person, product and place across shots that belong together.

All shots are vertical 9:16, 720x1280.

--- K1 - film start still ---
LOCKED: high aerial view straight down on the empty site in its landscape, a simple geometric layout marked out (piles, stakes, foundations).
FREE: [A perfect circle of thirty timber piles in a turquoise lagoon reef at golden hour.]

--- K2 - film end still ---
LOCKED: the same high aerial angle, the finished building centred, its signature feature visible, warm lights on, an arrival path.
FREE: [The finished timber ring with a pool court, palms and loungers, warm lights, a small jetty.]

--- F1 - film.mp4 (9:16, 15 s, one continuous shot) ---
Start: K1. End: K2.
LOCKED: beats in order - the marked-out site from above -> the camera dives in for one dramatic close detail of the foundations -> back up as the structure rises and closes -> pulls up to reveal the finished building. One continuous move, no cuts.
Prompt template: "Vertical cinematic film of [BUILDING] being built in [PLACE]. Opens high above at golden hour: [MARKED-OUT LAYOUT]. The camera dives in as [FOUNDATION DETAIL]. Back above, [STRUCTURE] rises and closes, [ROOF / SIGNATURE FEATURE] forms, and the camera pulls up to reveal the finished [BUILDING] with [FEATURES], warm lights glowing. Soft natural light, photoreal architectural visualisation."

--- P1-P5 - photos (9:16) ---
LOCKED: one per beat, same building and light: 1 the marked-out site from above, 2 the foundation detail, 3 the structure closing, 4 the signature space inside, 5 the finished building with its arrival path. (Frames from the film are fine.)

Write clean, commented code. The whole page should feel like watching a resort grow out of the sea, then walking along its jetty.