Back to prompts
✦ClaudeDesign
KOISEI sakura river scroll experience (master prompt)
A 19k-character master prompt for an award-level cinematic scroll site. Live at koisei.aura.build.
Loading the original X post…
Open original on XA 19k-character master prompt for an award-level cinematic scroll site. Live at koisei.aura.build.
The prompt
✦Claude Fable 5 (Aura.build)
| 1 | # MASTER PROMPT — "KOISEI" Sakura River Scroll Experience |
| 2 | |
| 3 | Build a single-page, award-level (Awwwards/FWA style) scroll experience called **Koisei** — a cinematic journey down a Japanese river from a sakura morning to a lantern-lit night. Ukiyo-e / woodblock-illustration art direction, WebGL-enhanced imagery, scroll-scrubbed film sequences, and a day-to-night color metamorphosis. Everything below is a hard requirement — follow it exactly. |
| 4 | |
| 5 | --- |
| 6 | |
| 7 | ## 1. TECH STACK |
| 8 | |
| 9 | - **Vanilla HTML/CSS/JS** (single `index.html` allowed) or Vite project. |
| 10 | - **three.js** (r160+) for: hero petal particle system, WebGL image planes with ripple/displacement shaders, and the transition dissolve shader. |
| 11 | - **GSAP 3 + ScrollTrigger** for all scroll choreography (pinning, scrubbing, timelines). |
| 12 | - **Lenis** smooth scroll (`lerp: 0.08`, `wheelMultiplier: 1.0`), synced to ScrollTrigger via `lenis.on('scroll', ScrollTrigger.update)` and `gsap.ticker`. |
| 13 | - Scroll-scrubbed `<video>` elements driven by `currentTime` (details §8). |
| 14 | - No UI frameworks. No Bootstrap aesthetics. Custom everything. |
| 15 | |
| 16 | --- |
| 17 | |
| 18 | ## 2. ASSETS (use these exact URLs) |
| 19 | |
| 20 | | Key | Asset | |
| 21 | |---|---| |
| 22 | | `HERO_RIVER` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/sakura-river-hero-plate-875acd7a5205_original.png | |
| 23 | | `KOI_RIVER` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/sakura-koi-river-plate-742cc19de6b5_original.png | |
| 24 | | `TEMPLE_CANAL` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/kyoto-temple-canal-plate-60699d609a45_original.png | |
| 25 | | `KIMONO_LANE` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/rural-kimono-lane-plate-edb1d9bf1d3d_original.png | |
| 26 | | `LANTERN_WATER` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/asakusa-lantern-water-plate-73b3e135a98d_original.png | |
| 27 | | `NIGHT_LANTERN` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/night-river-lantern-plate-510dc7d4315d_original.png | |
| 28 | | `HERO_VIDEO` (optional ambient) | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/sakura-river-bloom-video-5da61fc96d01_video.mp4 | |
| 29 | | `SCROLL_FILM_1` (12s) | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/koi-bridge-temple-scroll-film-12s-ce0df14b7596_video.mp4 | |
| 30 | | `SCROLL_FILM_2` (12s) | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/kimono-asakusa-night-scroll-film-12s-bd5434347f42_video.mp4 | |
| 31 | |
| 32 | Preload `HERO_RIVER`, both films' metadata, and fonts behind a loader (§4). |
| 33 | |
| 34 | --- |
| 35 | |
| 36 | ## 3. DESIGN SYSTEM |
| 37 | |
| 38 | ### 3.1 Colors (CSS custom properties — exact values) |
| 39 | ```css |
| 40 | :root { |
| 41 | --washi: #F1E9DE; /* primary paper cream (light sections, footer) */ |
| 42 | --washi-warm: #ECE4D9; /* hero sky wash */ |
| 43 | --washi-deep: #E4DED5; /* gradient partner for washi-warm */ |
| 44 | --sand: #E9D4BD; /* card fill / warm accent surface */ |
| 45 | --river-stone: #C1BBB2; /* muted water grey-taupe, borders at 40% */ |
| 46 | --ink: #251C16; /* primary dark — text on light, night bg */ |
| 47 | --night: #241B15; /* night section background */ |
| 48 | --night-deep: #1A130E; /* night vignette edge */ |
| 49 | --cream-text: #EDE9DF; /* text over imagery / dark bg */ |
| 50 | --sakura: #E8B4C0; /* petal pink */ |
| 51 | --sakura-deep: #D98E9F; /* petal shadow pink */ |
| 52 | --vermilion: #C4472F; /* torii red — accents, hover, small marks only */ |
| 53 | --lantern: #E8A54B; /* lantern glow amber — night accents */ |
| 54 | } |
| 55 | ``` |
| 56 | Rules: light sections use `--washi` bg + `--ink` text. Night uses `--night` bg + `--cream-text`. `--vermilion` appears only in tiny doses: the torii logo mark, link hover underlines, section-number tick marks, one CTA. Borders are always 1px `--ink` at 12–15% opacity on light, `--cream-text` at 15% on dark. |
| 57 | |
| 58 | ### 3.2 Typography |
| 59 | - **Display serif:** `"Cormorant Garamond"` (Google Fonts), weights 400/500 + *italic*. This is the voice of the site. |
| 60 | - **UI sans:** `"Space Grotesk"` 400/500 for nav, kickers, captions, buttons. |
| 61 | - **Japanese accents:** `"Noto Serif JP"` 400 for vertical kanji strips. |
| 62 | |
| 63 | Scale (clamp-based, desktop reference): |
| 64 | ```css |
| 65 | --display-xl: clamp(4rem, 11vw, 11.5rem); /* hero + footer wordmark */ |
| 66 | --display-lg: clamp(3rem, 7vw, 7rem); /* section headings */ |
| 67 | --display-md: clamp(2rem, 4vw, 3.5rem); /* overlay lines on films */ |
| 68 | --body: clamp(1rem, 1.15vw, 1.185rem); |
| 69 | --caption: 0.8125rem; |
| 70 | --kicker: 0.6875rem; /* letter-spacing: 0.32em; uppercase */ |
| 71 | ``` |
| 72 | Display type: `line-height: 0.95–1.05`, `letter-spacing: -0.015em`, mixed roman/italic within one headline — italicize the emotional word(s) (e.g., "Where Petals ***Drift*** Downstream"). Body: `line-height 1.7`, max-width `34em`, color `--ink` at 78% opacity on light. |
| 73 | |
| 74 | Kickers always render as: small vermilion or ink 6px square/tick + 0.32em-tracked uppercase Space Grotesk, e.g. `— THE JOURNEY`. |
| 75 | |
| 76 | ### 3.3 Texture & grain |
| 77 | - A full-viewport fixed film-grain overlay: WebGL fragment shader or animated SVG `feTurbulence`, opacity 0.05, `mix-blend-mode: overlay`, regenerated per frame (subtle animated noise, not static). |
| 78 | - Every image sits in a frame with a 1px inset border (`--ink` 15%) offset 10px outside the image edge — like a woodblock print mat. |
| 79 | - Soft paper vignette on light sections: radial gradient darkening corners by 3%. |
| 80 | |
| 81 | --- |
| 82 | |
| 83 | ## 4. PRELOADER |
| 84 | |
| 85 | Washi bg. Center: torii mark (simple 2-stroke SVG in `--vermilion`) above the word **KOISEI** in display serif, tracking-in from `letter-spacing: 0.5em` → `0.02em` (1.2s, `power3.out`). Below, a 1px progress line growing 0→100% width tied to real asset loading, with a percentage counter in Space Grotesk. On complete: line flashes to vermilion, whole loader wipes upward with a `clip-path: inset(0 0 100% 0)` over 0.9s `power4.inOut`, revealing the hero already mid-settle. Total minimum display 1.6s. |
| 86 | |
| 87 | --- |
| 88 | |
| 89 | ## 5. NAVIGATION (fixed, persistent) |
| 90 | |
| 91 | - Height 88px, full-width, no background initially; padding-inline 48px. |
| 92 | - **Left:** torii SVG mark (22px, vermilion) + wordmark `KOISEI` (Space Grotesk 500, 0.2em tracking, 14px). |
| 93 | - **Right:** links `Journey · Stories · Gallery · Visit` (13px, 0.12em tracking) + a Japanese character `旅` in Noto Serif JP + a pill-outline button `Begin` (1px border, 12px, padding 10px 22px; hover: fills `--ink`, text `--washi`). |
| 94 | - Link hover: 1px vermilion underline draws left→right (transform: scaleX, 0.35s `power2.out`). |
| 95 | - On scroll down > 120px: nav background fades in as `--washi` at 82% + `backdrop-filter: blur(12px)`, height compresses to 68px. When over the night section, swap to `--night` at 82% and cream text (toggle a `.nav--night` class via ScrollTrigger `onToggle`). |
| 96 | - Left screen edge, vertically centered, fixed: a vertical progress rail — 1px line, 160px tall, with a fill tracking total scroll progress and tiny dots at each section; below it the current section index `01 / 07` in 10px Space Grotesk, rotated 90°. |
| 97 | |
| 98 | --- |
| 99 | |
| 100 | ## 6. SECTION 1 — HERO ("Where Petals Drift Downstream") |
| 101 | |
| 102 | **Layout.** 100svh, full-bleed `HERO_RIVER` rendered as a **three.js textured plane** (not `<img>`) inside a fixed WebGL canvas, covering the viewport with `cover` UV math. Optionally crossfade to `HERO_VIDEO` (muted, loop, playsinline) after load for ambient motion — video as `VideoTexture` at 0 opacity fading to 1 over 2s. |
| 103 | |
| 104 | **Type.** Centered, slightly below vertical center: |
| 105 | - Kicker: `— A JOURNEY DOWN THE SPRING RIVER` (cream, 0.32em tracking). |
| 106 | - H1 in `--display-xl`, `--cream-text`, two lines: `Where Petals` / `*Drift* Downstream` (word "Drift" italic). Text has `text-shadow: 0 2px 40px rgba(37,28,22,0.35)`. |
| 107 | - Under it: a thin 1px cream rule 64px wide, then `Koisei — 恋静` caption. |
| 108 | - Bottom center: `SCROLL` label + 40px vertical line with a dot that loops downward (1.8s, `power1.inOut`, infinite). |
| 109 | - Right screen edge: vertical Japanese strip `桜の川を下る` (Noto Serif JP, writing-mode: vertical-rl, cream 60%). |
| 110 | |
| 111 | **Entrance (after preloader).** Each headline line wrapped in an overflow-hidden mask; lines rise from `y: 110%` with `rotate: 2deg → 0`, stagger 0.12s, 1.1s `power4.out`. Kicker and rule fade/track-in 0.3s later. WebGL plane starts at `scale 1.12` easing to `1.0` over 2.4s. |
| 112 | |
| 113 | **WebGL petal system (signature element).** |
| 114 | - `THREE.InstancedMesh`, 380 instances desktop / 120 mobile, each a small plane (8–18px) with a hand-drawn 5-petal sakura texture (draw it on an offscreen canvas: rounded-heart petal shape, `--sakura` fill, `--sakura-deep` inner shadow). |
| 115 | - Per-instance attributes: size, phase, rotation speed, depth (z: -2 to 2 for parallax). |
| 116 | - Motion in vertex shader or per-frame update: downward drift `vy = 0.15–0.4`, horizontal sway `x += sin(time*0.8 + phase) * 0.3`, plus a **curl-noise flow field** (simplex-based) bending trajectories like wind gusts; tumbling rotation on 2 axes. |
| 117 | - Mouse interaction: pointer position pushes a radial impulse (radius 180px, force falls off quadratically) — petals scatter away from the cursor and recover. |
| 118 | - Petals render OVER the hero image but UNDER the text (canvas z-index between). |
| 119 | - Petal opacity ties to scroll: fade to 0 by the time section 3 begins, re-emerge tinted `--lantern` amber (fireflies/embers, slower, upward drift) in the night section. |
| 120 | |
| 121 | **Ripple shader on hero plane.** Fragment shader: subtle vertical sine displacement on the lower 35% of the image (the water) — `uv.x += sin(uv.y*40.0 + uTime*1.2) * 0.0015 * waterMask`, plus mouse-hover ripple: a decaying radial wave from pointer position (`uMouse`, `uWaveTime`). |
| 122 | |
| 123 | **Scroll exit (pinned, scrub).** ScrollTrigger pins the hero for `+=120%`. As you scroll: plane scales 1.0 → 1.18 and darkens (shader `uDarken` 0 → 0.25), headline moves up at 1.4× scroll speed and fades, and Section 2 slides over it from below like a paper sheet (Section 2 has higher z-index, `border-radius: 32px 32px 0 0` on its top edge during the overlap, flattening to 0 once fully covering). |
| 124 | |
| 125 | --- |
| 126 | |
| 127 | ## 7. SECTION 2 — MANIFESTO ("A River Remembers") |
| 128 | |
| 129 | Washi bg. Generous padding (16vh top/bottom). |
| 130 | |
| 131 | - Kicker left: `— 01 · THE PHILOSOPHY`. |
| 132 | - A `--display-lg` serif statement spanning ~11 columns of a 12-col grid, `--ink`, mixed italics: |
| 133 | `Every spring, the river carries a *million petals* from the mountains to the sea — and every petal remembers the tree it fell from.` |
| 134 | - **Inline image tokens:** inside this headline, embed two small rounded-rect images (140×90px, border-radius 60px, the `KOI_RIVER` and `TEMPLE_CANAL` crops) sitting on the text baseline between words — they scale in from 0 width as the line reveals (a la modern editorial sites). |
| 135 | - Reveal: split into lines (SplitType or manual), masked line-rise stagger 0.09s triggered at 70% viewport, scrub-free (`toggleActions: "play none none reverse"`). |
| 136 | - Right-aligned below, max-width 34em body paragraph + a text link `Read the story of Koisei →` with draw-on underline. |
| 137 | - Two large numbers row (`1,200 km` / `4 seasons`) in display serif with small caps labels, counter-animating up when in view. |
| 138 | |
| 139 | --- |
| 140 | |
| 141 | ## 8. SECTION 3 — SCROLL FILM I (pinned, video scrubbed by scroll) |
| 142 | |
| 143 | Full-bleed cinematic chapter using `SCROLL_FILM_1` (12s: koi → bridge → temple). |
| 144 | |
| 145 | **Mechanics (exact):** |
| 146 | - `<video preload="auto" muted playsinline>` covering 100svh, `object-fit: cover`. |
| 147 | - Pin the section for `+=400%` scroll. In `onUpdate`: `video.currentTime = self.progress * video.duration`, smoothed through a lerp (`current += (target - current) * 0.1` in a rAF loop) so scrubbing feels buttery, never steppy. Ensure the file is keyframe-dense; if seeking stutters, fall back to a canvas-drawn frame pipeline. |
| 148 | - **Three text chapters** fade in/out sequentially over the film at progress 0.05–0.3, 0.38–0.63, 0.7–0.95. Each: centered kicker (`FIRST BEND`, `UNDER THE BRIDGE`, `THE TEMPLE GATE`) + one `--display-md` cream serif line (e.g., `*Koi* swim against the falling sky`). Text enters with masked rise + slight letter-spacing decay, exits fading up 40px. |
| 149 | - Right edge: a vertical chapter indicator `Ⅰ · Ⅱ · Ⅲ` with the active numeral in vermilion. |
| 150 | - Bottom left: a thin film-style progress bar (1px track, cream fill) showing scrub progress with `00:00 / 00:12` timecode in Space Grotesk tabular numerals. |
| 151 | - Edge treatment: 6% `--night-deep` vignette + the global grain makes it feel filmic. |
| 152 | |
| 153 | --- |
| 154 | |
| 155 | ## 9. SECTION 4 — HORIZONTAL GALLERY ("Stations of the River") |
| 156 | |
| 157 | Pinned horizontal scroll on `--washi`. |
| 158 | |
| 159 | - Header row (static during pin): kicker `— 02 · STATIONS`, heading `Three *stations*, one current` (`--display-lg`), and right-aligned instruction `( scroll )`. |
| 160 | - A track of **3 oversized cards** translating X from `0` to `-(trackWidth - viewport)` with `scrub: 1`, pinned `+=250%`. |
| 161 | - Card spec: width `min(66vw, 900px)`, height 68vh, gap 6vw. Inside: the image fills the card with `overflow: hidden`; image itself is scaled 1.15 and translates X opposite to track motion (inner parallax, ±7%). 1px offset mat border. Corner radius 4px. |
| 162 | - Card 01 — `TEMPLE_CANAL` — `Higashiyama Canal` — caption: `Stone bridges, incense, morning bells.` |
| 163 | - Card 02 — `KIMONO_LANE` — `The Kimono Lane` — caption: `Where the road remembers slower centuries.` |
| 164 | - Card 03 — `LANTERN_WATER` — `Asakusa Waterside` — caption: `Lanterns lean over the current at dusk.` |
| 165 | - Each card's chrome: giant outlined number `01` (display serif, 9rem, `-webkit-text-stroke: 1px var(--ink)`, transparent fill) overlapping the image's top-left corner; title beneath the image in `--display-md`; caption + `Visit station →` link. |
| 166 | - Numbers fill with solid ink when their card crosses viewport center. |
| 167 | - Bottom: 1px progress line for the horizontal track + `01 — 03` counter that swaps with a small roll animation. |
| 168 | - Cursor becomes a custom circular `DRAG`/`→` badge over this section (40px circle, mix-blend-difference). |
| 169 | |
| 170 | --- |
| 171 | |
| 172 | ## 10. SECTION 5 — DAY TO NIGHT (the metamorphosis) |
| 173 | |
| 174 | The emotional pivot. A pinned 100svh section, `+=200%`. |
| 175 | |
| 176 | - Background color animates `--washi` → `--night` via GSAP scrubbing a CSS variable (`backgroundColor` interpolation). The fixed nav flips to `.nav--night`. The global petal system swaps pink→`--lantern` embers drifting **upward**. |
| 177 | - Centered: `LANTERN_WATER` image inside a tall portrait frame (42vw × 78vh) that **scales up to full-bleed** (transform scale + width/height interpolation via GSAP `flip` or clip-path expansion: `clip-path: inset(11vh 29vw)` → `inset(0)`), while a WebGL **dissolve shader** crossfades `LANTERN_WATER` → `NIGHT_LANTERN` using a perlin-noise threshold mask (`smoothstep(uProgress-0.08, uProgress+0.08, noise(uv*4.0))`) so day literally dissolves into night like ink in water. |
| 178 | - Overlay copy at progress 0.1: kicker `— 03 · NIGHTFALL`, line `The river doesn't sleep — it *dreams*` in `--display-lg`, ink color transitioning to cream in sync with the bg. |
| 179 | - Lantern glow: 6–8 positioned radial-gradient sprites (additive blending in the WebGL scene) pulsing gently (`opacity 0.6→0.9`, 3s sine loops, staggered) at the lantern positions of `NIGHT_LANTERN`. |
| 180 | |
| 181 | --- |
| 182 | |
| 183 | ## 11. SECTION 6 — SCROLL FILM II (night) |
| 184 | |
| 185 | Same mechanics as §8 with `SCROLL_FILM_2` (kimono → Asakusa night), pinned `+=350%`, on `--night`. |
| 186 | |
| 187 | - Two chapters: `THE LAST LANE` (`She walks where the lanterns *lean*`) and `ASAKUSA AT NIGHT` (`Every light is a wish going downstream`). |
| 188 | - Ends with a full-stop moment: film settles on its final frame, darkens 30%, and a centered quote fades in — `"恋静 — quiet love, moving water."` with attribution `— Koisei` — held for the last 15% of the pin. |
| 189 | |
| 190 | --- |
| 191 | |
| 192 | ## 12. SECTION 7 — FOOTER |
| 193 | |
| 194 | On `--washi` (snap back to light with a quick 0.8s bg transition — dawn). |
| 195 | |
| 196 | - Top row: kicker `— BEGIN YOUR JOURNEY`, then a giant CTA line `Come see the river *bloom*` (`--display-lg`) with a circular vermilion button (120px, `Begin →`, magnetic hover: translates toward cursor within 24px, springs back `elastic.out(1, 0.4)`). |
| 197 | - Middle: 3 link columns (Journey / Stories / Visit · Instagram / Vimeo / http://Are.na · Contact / Press) in Space Grotesk 13px, hover underline draw; plus a vertical `ありがとう` strip. |
| 198 | - Bottom: the wordmark **KOISEI** at `--display-xl` stretched nearly full-width (`font-size` fitted via JS to viewport width), ink color, sitting on the baseline of the page — it rises from below with a masked reveal as the footer enters, with petals settling on top of the letters (petal system y-velocity → 0 near footer, landing on an invisible floor at the wordmark's cap line). |
| 199 | - Very bottom: 1px rule, `© 2026 Koisei — down the spring river` left, `Kyoto → Tokyo` right, 10px. |
| 200 | |
| 201 | --- |
| 202 | |
| 203 | ## 13. GLOBAL MOTION LANGUAGE |
| 204 | |
| 205 | - Easing vocabulary: reveals `power4.out`, pinned scrubs linear (`scrub: 1`–`1.5`), color shifts `none` (scrub), micro-interactions `power2.out`, magnetic/elastic `elastic.out(1,0.4)`. |
| 206 | - Every heading reveal = masked line rise (110% → 0, 1–2° rotation settle). Every image reveal = `clip-path: inset(100% 0 0 0)` → `inset(0)` at 1.2s `power4.inOut` with inner image counter-scaling 1.25 → 1. |
| 207 | - Parallax: decorative elements move at 0.85×–1.2× via `data-speed` attributes processed by a single ScrollTrigger. |
| 208 | - Custom cursor: 8px ink dot + 32px trailing ring (lerp 0.15); ring expands to 56px over links, morphs to `→` over cards, `▶` over films. |
| 209 | - `prefers-reduced-motion`: kill pins/scrubs, videos become posters, petals static, reveals become simple fades. |
| 210 | |
| 211 | ## 14. PERFORMANCE & RESPONSIVE |
| 212 | |
| 213 | - One shared `WebGLRenderer` (alpha, antialiasing off, `devicePixelRatio` capped at 1.75); planes/particles added-removed per section visibility. Pause rAF work for offscreen scenes via IntersectionObserver. |
| 214 | - Videos: `preload="metadata"` until their section is within 150% viewport, then `preload="auto"`. |
| 215 | - Mobile (<768px): petals 120, horizontal gallery becomes native swipe track (no pin), film pins shorten to `+=250%`, display-xl clamps down, inline headline images hidden, custom cursor disabled. |
| 216 | - Lazy-decode all plates (`decoding="async"`), and serve the WebGL textures through `THREE.TextureLoader` with `SRGBColorSpace`. |
| 217 | |
| 218 | ## 15. ACCEPTANCE CHECKLIST |
| 219 | |
| 220 | 1. Loader → hero entrance feels like one continuous shot. |
| 221 | 2. Petals react to the mouse and change character (pink/down → amber/up) across day/night. |
| 222 | 3. Both films scrub perfectly smoothly with lerped `currentTime`. |
| 223 | 4. Day→night dissolve uses a noise-threshold shader, not a plain crossfade. |
| 224 | 5. Horizontal gallery has inner-parallax images and outlined numbers that fill on center. |
| 225 | 6. Nav adapts light/dark automatically; progress rail tracks 7 sections. |
| 226 | 7. Footer wordmark nearly spans the viewport and petals settle on it. |
| 227 | 8. Grain, mat borders, and vignettes present on every section. 60fps on an M1 laptop. |
What this prompt is good for
Visual direction
Moodboards, style guides, and design briefs
Marketing creative
Hero artwork and high-converting visual assets
Brand identity
Consistent aesthetics across typography and form
Rapid prototyping
Iterate variations in seconds with precision
