枠の中でスクロール・クリックして動きを試せます。端末指定は実寸表示です。幅が足りない場合は横にスクロールできます。
再現プロンプト
架空の紙工房＆森林保護トラストUNDERSTORYの縦長1ページサイト。AI生成の神秘的な切り絵レイヤー画像（月夜の森・白い鹿・光るキノコ・アオサギ）21枚を5層/4層のシャドーボックス・ジオラマに重ね、drop-shadowがアルファ輪郭に落ちる紙縁の影と単一の光サイクル、コレクションの方向別入場やクラフトセクションの層組み替えまで一貫した「紙の奥行き」言語で構成。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。
Build a single self-contained HTML file (inline CSS and inline JS in one `<script>` tag) for a complete, long-form one-page site for a fictional papercraft workshop and woodland-conservation trust called **UNDERSTORY** ("understory" = the layer of forest growing beneath the canopy — the whole page is built from that idea). Load GSAP 3 and its ScrollTrigger plugin from CDN only (e.g. `https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js` and `.../ScrollTrigger.min.js`); no fetch calls. The scenery is 21 locally AI-generated paper-cut layer images (see Imagery below); all remaining chrome (tool diorama, mat corners, grain) stays inline SVG or CSS. In this standalone build the whole page scrolls with the normal window/document scroller. The motion language for the entire page is a **paper-cut shadow-box**: every scene is a recessed frame containing 3–5 hand-cut paper layers seen in depth, never a stack of flat cards (never sticky-stacking cards, a chip-drop, or a deck-shuffle — that is a different site's language).
## Imagery (AI-generated paper-cut layers)
Generate 21 images with an image AI (1536×1024, then compress to ~1280px WebP): a 5-layer "Founding Grove" hero set (`grove-sky` opaque + `grove-ridge`/`grove-canopy`/`grove-trees`/`grove-foreground` transparent) and four 4-layer Collection sets (`<scene>-sky` opaque + `-ridge`/`-mid`/`-fg` transparent) for fern-hollow / birch-break / night-pond / alpine-ridge. Every prompt shares one style block: "handcut layered paper diorama art, papercut illustration, visible paper grain and fiber texture, slightly deckled cut edges, matte gouache-toned colors, mystical storybook atmosphere, soft volumetric mist, no text, no photorealism". Palette: deep ink greens `#0B140A #16290F #24401D #2F4A34`, cream `#F4F1E4`, moss accent `#9CCC65`, moon gold `#FFE7A8`. Mystical motifs, one per layer so they never collide: huge gold moon with god rays upper-right (grove-sky), a glowing white stag center-left among pines (grove-trees), glowing mushrooms + fireflies in the bottom fern fringe with two branches entering from the top corners (grove-foreground), a paper heron in the night-pond foreground, a switchback trail in the alpine mid layer. Rules for transparent layers: fully transparent background (generate on a chroma key and alpha-key it if the model can't output alpha), silhouettes grounded to the bottom edge and touching both side edges (foreground branches hang from the top corners instead), each layer readable as ONE cut-paper sheet. Layers are placed as `<img>` filling the box with `object-fit:cover; object-position:50% 100%` (bottom-anchored cover), and CSS `filter:drop-shadow(...)` follows each image's alpha silhouette — which is what keeps the cut-paper edge-shadow signature working on real imagery.
## Art direction
Palette: ink/background `#0B140A`, warm cream foreground text `#F4F1E4`, muted sage `#A9B39C`, accent leaf-green `#9CCC65`. Headings are bold sans-serif (weight 800) at fluid sizes via `clamp()`; eyebrows are 0.72rem uppercase with 0.28em letter-spacing in the accent color. Every "diorama box" shares one visual recipe: `border-radius:18px`, background `#0B140A`, `box-shadow: inset 0 0 0 2px rgba(156,204,101,0.16), inset 0 26px 46px -20px rgba(0,0,0,0.75), inset 0 -26px 46px -20px rgba(0,0,0,0.75), 0 26px 54px -22px rgba(0,0,0,0.6)` (a recessed mat/bezel), plus a `::after` inner rim: `position:absolute; inset:8px; border:1px solid rgba(156,204,101,0.14); border-radius:12px`. A body-wide film-grain overlay (a 160×160px tiled data-URI SVG `feTurbulence` filter, opacity 0.035, `mix-blend-mode:overlay`) sits over the whole page, and every section below the hero gets a 20px top cast-shadow strip (`linear-gradient(to bottom, rgba(0,0,0,0.4), transparent)`) so sections read as sheets stacked in a stairwell of light.
## The shared layer system (used by the hero AND the craft section)
A 5-layer "Founding Grove" scene (depth 0 = farthest sky, depth 4 = nearest foreground) is reused twice: static/parallax in the hero, and scroll-assembled in "The Craft" section. Each depth layer is nested as: outer `.layer` div (this is the ONLY element GSAP drives with scroll-parallax or assembly transforms) > `.layer-depth` div (static CSS only: `transform:scale(var(--depth-scale))` plus `filter: drop-shadow(...) brightness(var(--depth-bright)) blur(var(--depth-blur))`) > `.layer-inner` div (the ONLY element GSAP drives with pointer parallax) > the layer `<img>` (see Imagery), absolutely positioned filling the box with `object-fit:cover; object-position:50% 100%`. Keeping these three transform-owners on three different elements is required so GSAP's tweened `transform` never clobbers the CSS `scale()`. Per-depth constants (index 0→4): scale `[0.88,0.92,0.96,1.0,1.05]`, brightness `[0.62,0.75,0.87,0.97,1.05]`, blur `[1.4,0.6,0,0,0]px` (only the two farthest layers soften). The five layers, in depth order: **Sky wash** (`grove-sky` — moonlit sky, god rays), **Ridge line** (`grove-ridge` — misty far ridge), **Canopy fold** (`grove-canopy` — broadleaf canopy band with tiny paper birds), **Grove stand** (`grove-trees` — near pines with the glowing white stag and fireflies), **Fern edge** (`grove-foreground` — darkest fern fringe with glowing mushrooms and two hanging branches); the foreground layer additionally sits in its own `.layer-sway` wrapper that idles `rotate(-0.6deg ↔ 0.6deg)` over 6s ease-in-out infinite (transform-origin 50% 100%), so the diorama is never fully still.
## Signature ①: shadow-box scroll parallax + pointer parallax
In the hero, each of the 5 outer `.layer` divs is scrubbed with `gsap.to(layer,{y:-P, ease:"none", scrollTrigger:{trigger:hero, start:"top top", end:"bottom top", scrub:0.6}})` where P (px, per depth) = `[14,34,58,90,130]` — nearer layers travel further, selling depth as the hero scrolls past. Independently, on `pointermove` over the hero box, compute normalized cursor position `nx,ny` (-1..1) and drive each `.layer-inner` with `gsap.quickTo(el,"x",{duration:0.6,ease:"power3.out"})` / same for `"y"` at `nx*M` / `ny*M*0.6`, where M (px, per depth) = `[3,7,13,21,32]`; on `pointerleave`, tween every inner back to `{x:0,y:0,duration:0.8,ease:"power3.out"}`. The same pointer-parallax mechanism (own strengths `[2,5,9,15]`) is reused on all 4 Collection cards.
## Signature ②: cut-paper edge shadow
Every `.layer-depth` computes its own drop shadow from two custom properties: `filter: drop-shadow(calc(var(--light-x) * var(--shx) * 1px) var(--shy) var(--shb) rgba(6,10,4,var(--sho)))`. Per depth (hero/craft, index 0→4): `--shy` (offset-y) `[2,3,5,7,10]px`, `--shb` (blur) `[3,5,8,11,16]px`, `--sho` (opacity) `[0.22,0.3,0.36,0.44,0.52]`, `--shx` (px multiplied by the live light value) `[2,4,7,10,14]`. Deeper/nearer layers cast a longer, darker shadow onto the sheet behind them. The Collection's 4-depth mini scenes reuse the recipe with `--shy:[2,4,6,9]`, `--shb:[3,6,9,13]`, `--sho:[0.24,0.32,0.4,0.48]`, `--shx:[2,5,8,12]`; the Guild's 3-depth tool diorama uses `--shy:[2,4,7]`, `--shb:[3,6,10]`, `--sho:[0.22,0.32,0.42]`, `--shx:[2,5,9]`.
## Signature ③: one shared side-light cycle
A single `--light-x` CSS custom property (a unitless value swinging -1..1) lives on the page root and is inherited by every diorama on the page — one JS tween drives it: `gsap.fromTo({v:-1},{v:1,duration:17,ease:"sine.inOut",yoyo:true,repeat:-1,onUpdate:()=>root.style.setProperty("--light-x",v.toFixed(3))})`. Because it is inherited, no per-layer JS is needed — every box's edge shadows sweep in sync, like one window of daylight moving across the workshop. A visible light-wash overlay sits on every box (`position:absolute;inset:0;z-index:6;pointer-events:none; background:linear-gradient(100deg,transparent 0%,rgba(255,247,214,0.26) 50%,transparent 100%); transform:translateX(calc(var(--light-x)*30%)); mix-blend-mode:screen`). The Guild tool diorama's SVG strokes additionally carry a rim-light whose opacity is `calc(0.4 + var(--light-x)*0.22)`.
## Section 1: Hero
Full-viewport flex row (copy left, diorama box right; stacks to a column under 860px). A fixed top-left brand mark: a small leaf SVG + "UNDERSTORY" (0.78rem, weight 700, letter-spacing 0.22em). Eyebrow "PAPER WORKSHOP · CONSERVATION TRUST"; H1 "A forest, cut / in five layers of paper." (`clamp(2rem,4.6vw,3.4rem)`, weight 800); sub-copy about hand-cut layered dioramas funding real acreage; a "↓ Look into the box" hint bouncing `translateY(0→6px)` over 2.2s. The diorama box (`width:min(640px,92%)`, `aspect-ratio:400/260`) renders the 5-layer Founding Grove described above, with a small bottom-left caption tag "The Founding Grove — five sheets, one window".
## Section 2: The Guild
Two-column grid (1.1fr/0.9fr): left is the eyebrow "THE GUILD", H2 "Six hands, one workshop table.", and 3 short paragraphs about the toolshed origin, the 5-sheet cutting process, and the intentional air-gap between layers. Right is a small static 3-depth diorama box (`width:min(320px,100%)`, `aspect-ratio:300/220`) built from a 3-image set in the same paper-cut style (`tool-table` opaque — lamplit wood-grain worktable with a pencil pine sketch; `tool-offcuts` transparent — scattered hand-cut paper off-cuts, one showing a pine cut-out; `tool-blade` transparent — brass craft knife, wooden ruler and small scissors on a bottom-right diagonal). This box has no scroll/pointer parallax of its own — only the shared light cycle animates it, proving the light system works standalone.
## Section 3: The Collection
Centered eyebrow "THE COLLECTION", H2 "Four habitats, cut to scale.", intro copy, then a 4-column grid (2 cols under 860px, 1 col under 520px) of habitat cards: **Fern Hollow** (dusk moss hollow, giant fern fronds and glowing spores), **Birch Break** (cold morning, white birch trunks and snow), **Night Pond** (deep-night blues, moon, water-lily pond and a paper heron), **Alpine Ridge** (thin-air peaks, a switchback trail, hardy pines) — each its own 4-depth diorama box (`aspect-ratio:300/220`) built from that scene's 4-image set (`<scene>-sky/-ridge/-mid/-fg`, see Imagery). On scroll-enter (`start:"top 70%"`, plays once), each card wrapper flies in from its own direction — `gsap.fromTo(card,{opacity:0, rotation:R, x or y:±54}, {opacity:1,rotation:0,x:0,y:0,duration:0.7,ease:"power3.out",delay:index*0.1}}` — directions in card order `[top,right,bottom,left]`, start rotation `[-4,5,4,-5]deg`, distance 54px.
## Section 4: The Craft (signature ④ — scroll-scrubbed reassembly)
A tall section (`min-height:220vh`) with a `position:sticky; top:10vh; height:80vh` inner row holding the same 5-layer Founding Grove box (now empty at rest) beside a step list (eyebrow "THE CRAFT", H2 "Watch a grove come together.", then the 5 material labels: "Sky wash — Ink-brushed cotton paper", "Ridge line — Laser-scored slate paper", "Canopy fold — Hand-cut mulberry paper", "Grove stand — Double-layered kraft", "Fern edge — Knife-cut deckle paper", each starting at `opacity:0.35` in muted sage). One `ScrollTrigger`-scrubbed timeline (`trigger:section, start:"top top", end:"bottom bottom", scrub:0.6`) reassembles the scene: depth 0 (sky) tweens `scale:1.35→1, opacity:0→1` (zooming in from far away); depth 1 (ridge) tweens from `x:-170px, rotation:-7deg` to resting; depth 2 (canopy) from `y:-170px, rotation:-5deg`; depth 3 (trees) from `x:170px, rotation:8deg`; depth 4 (fern) from `y:170px, rotation:-4deg` — each landing at `opacity:1, x/y:0, rotation:0` over 1 timeline-second, staggered 0.16 apart (positions `0, 0.16, 0.32, 0.48, 0.64`). Each matching step label brightens to the accent color and `opacity:1` at the same timeline position, so the caption highlights exactly as its layer locks into the frame.
## Section 5: The Trust
A centered impact section (`min-height:90vh`) with two idle background layers behind the copy: a soft mist radial-gradient drifting `translateX(-3%↔3%)` over 26s, and a treeline gradient drifting the opposite way over 40s (both ease-in-out infinite, unrelated to scroll or `--light-x`). Eyebrow "THE TRUST", H2 "Paper boxes, real acres.", one line of copy, then 3 static paper tags — **no count-up animation anywhere on this page**, figures are written directly as "128 acres held in trust", "6 groves fully protected", "41 species logged by field partners". On scroll-enter (once), each tag tweens from `{opacity:0, rotation:-8deg, scale:0.85}` to `{opacity:1, rotation:0, scale:1}` over 0.7s `back.out(1.6)`, staggered 0.12s.
## Section 6: Footer
A full-viewport centered CTA. Four L-shaped corner brackets (2px accent-green border, 64×64px, each missing two sides so it reads as a crop-mark/mat corner) sit `inset:24px` around the content and scrub in from `±64px` off each corner to `{x:0,y:0,opacity:1}` (`ease:"none"`, `scrollTrigger:{trigger:footer, start:"top 85%", end:"center center", scrub:0.6}`) — the shadow-box's mat visibly closing in around the final message as the page ends. Eyebrow "JOIN THE TRUST", H2 "Adopt a grove of your own.", copy about reserving a diorama to fund a matching acre, a pill CTA "Adopt a Grove" (background accent, `border-radius:9999px`, hover lifts `translateY(-4px)` over 0.3s `cubic-bezier(0.22,1,0.36,1)` — a simple lift, never a magnetic cursor-follow), and fine print.
## Scroll animations
Every heading/eyebrow/paragraph across all 6 sections shares one "paper slide" reveal (not a plain y+opacity fade): mark each target `[data-slide-reveal]`; at rest `opacity:0, x:-34px, scale:0.97, filter:drop-shadow(0px 0px 0px rgba(6,10,4,0))`; a `ScrollTrigger` (`start:"top 78%", toggleActions:"play none none reverse"`) tweens to `opacity:1, x:0, scale:1, filter:drop-shadow(10px 14px 18px rgba(6,10,4,0.32))` over 0.75s `power3.out` with a default 0.08s stagger (hero and footer use this default), and reverses over 0.4s `power2.in` on leave-back; the Guild, Collection, Craft and Trust sections instead use a 0.1s stagger over an 0.8s duration — each sheet lifts off the backing and casts its own shadow as it slides into place.
## Performance & accessibility
Register ScrollTrigger once; build every tween inside one `gsap.context()` scoped to the root so it reverts cleanly on teardown, and remove every `pointermove`/`pointerleave` listener plus `gsap.killTweensOf` on unmount. Only `transform`, `opacity` and `filter` are animated (GPU-compositable). `--light-x` is written with exactly one `style.setProperty` call per animation frame on the page root and reaches every layer purely through CSS inheritance — never set it per-element. No canvas or WebGL is used; element counts stay small and fixed (5+5+16+3 layer instances). Respect `prefers-reduced-motion:reduce`: freeze `--light-x` at a resting `0.15`, skip the hero scroll-parallax and all pointer-parallax quickTo tweens, set every collection card and footer corner straight to its resting transform via `gsap.set`, skip the craft-assembly timeline (render the grove fully assembled with all step labels lit), disable the fern-sway/mist/treeline CSS keyframes, and resolve every `[data-slide-reveal]` target straight to its visible state. On teardown call `ctx.revert()` and disconnect the `ResizeObserver` attached to the scroll container.
## Action flow and content
Implement the following local planning experience for the primary CTA, in the visual language of the page. Use a real button opening a labelled modal dialog. Choosing a pricing card must preselect that exact plan. A navigation link may move to another section; a planning CTA must lead to its review flow.
Use this content for the dialog, including the option details and notes:
{
"slug": "paper-diorama",
"brand": "UNDERSTORY",
"accent": "#3d623f",
"title": "Choose a grove to care for",
"intro": "Understand what a woodland contribution would support, from first planting to long-term stewardship. Build a contribution plan you can keep.",
"facts": [
[
"Stewardship",
"Planting, maintenance and seasonal monitoring"
],
[
"Updates",
"A seasonal field journal and one annual care summary"
],
[
"Allocation example",
"60% habitat care · 25% maintenance · 15% reporting"
]
],
"groups": [
{
"label": "Contribution plan",
"options": [
{
"title": "Seedling · £5 / month",
"detail": "Supports shared nursery work and access to the seasonal field journal."
},
{
"title": "Grove keeper · £15 / month",
"detail": "Supports maintenance across a grove and an annual stewardship report."
},
{
"title": "Woodland circle · £40 / month",
"detail": "Supports longer-term monitoring and a guided woodland visit concept."
}
]
}
],
"notes": [
"Illustrative allocation, not an audited impact report. No tree ownership, donation or tax entitlement is created by saving this plan."
]
}
- Explain before input that this is a fictional brand sample: choices can be reviewed and saved, with no external submission, booking, payment or registration. Use each brand's language. Do not launch a mail client or present an installer for a fictional product.
- Give every option group a legend, inputs explicit labels and errors linked descriptions. Validate options against the allowed values, requested dates as actual dates from today onward, and free text as 10–2,000 trimmed characters. Blank spaces alone must fail. Tracking accepts the sample reference TG-2048 only.
- Focus the first invalid field and preserve every entered value. On success, show the selected option WITH its full detail, requested date or brief, relevant facts and notes. An edit action returns to the preserved form. Do not claim a real reservation, purchase or account has succeeded.
- Save the complete review as UTF-8 text. A browser download request is not proof of a file being written. On download failure, retain the full text in a labelled, selectable textarea and offer retry. Do not show a false success state.
- Constrain modal content to the viewport with internal scrolling. Support keyboard and touch, trap focus while open, close on Escape and restore focus to the exact initiating control. Keep these operations available with motion disabled.
- If a separate project-contact CTA is present, let it collect a project brief and review it locally; a product selection CTA must retain the product choice. Verify both flows independently.