Zoom Dive

再現プロンプト

架空の科学メディア「MAGNITUDE」を、軌道から細胞核までの5枚のシネマティックなAI生成イラストを窓/瞳/水滴の入れ子で繋ぐ連続ズームダイブと km→m→mm→µm のスケール計器で構成した1ページサイト。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。

Build a single self-contained HTML file (inline CSS/JS, plain window-scroll page — no iframe/container constraints needed) for "MAGNITUDE", a fictional science-scale media outlet. The whole page is ONE continuous optical dive: five cinematic painted scenes — locally AI-generated image plates, each with one drifting ambient overlay layer — are stacked full-bleed inside a single pinned scroll section, and scrolling scales the current scene up while the next scene grows in from a tiny "aperture" (a cloud gap, a puddle, a dew drop, a nuclear pore) that sits at the exact same screen coordinate in both layers, so the page never hard-cuts — it only ever falls further in. A live instrument tracks the dive in real units (km -> m -> mm -> µm), and the deepest scene ends by pulling all the way back out to a "whole fall" summary. Do not use numbered 01/02/03 service lists, an infinite marquee ticker, or cursor-magnetic buttons. The one live-updating number on the page (the scale readout) is a direct, un-eased map of scroll position onto a real unit value — not a decorative count-up stat animation — and must always be presented that way (see Section: Scale Instrument).

## Art direction
Background #050a14 (near-black space navy) with #EAF2FF near-white text, a single accent #64B5F6 used for every aperture ring, the scale instrument, CTA borders and eyebrow labels. Two typefaces: a geometric sans (Space Grotesk, weight 500/700) for headings and body copy, and a monospace (IBM Plex Mono, weight 400/600) for the eyebrow labels, scene stop names, the scale instrument and the fine print — the mono face is the page's "instrument" voice, the sans is its "editorial" voice, and nothing else mixes the two. The five scenes are rich cinematic science-documentary digital paintings (see Imagery below), all sharing one unified deep navy-to-teal palette with warm amber accents so they read as plates from a single publication; every structural visual — aperture rings, the scale instrument, the recap strip, captions — stays inline SVG or CSS on top of them.

## Imagery (AI-generated cinematic plates)
Generate ten images with an image AI, all sharing one style block: "cinematic scientific documentary illustration, rich digital matte painting, dramatic volumetric lighting, deep navy-to-teal unified palette anchored in near-black space navy #050a14, teal and warm amber accents, highly detailed, atmospheric depth, painterly texture, no text, no letters, no watermark, no frame, full-bleed composition". Five are opaque full-bleed base plates (roughly 3:2, displayed object-fit:cover and upscaled 2x so they survive a 6x zoom; keep the lower-left quarter relatively dark for captions): (1) **orbit** — Earth from 400 km up: black space with faint stars in the top third, an atmosphere rim glow, fractal coastlines in desaturated blue-greens, one cyclone, thin cirrus banks, a night-side terminator with warm city-light clusters, and CRITICALLY a cloud gap at 54%/39% of the frame through which a dusk city's warm lights peek small (this is the aperture into scene 2); (2) **city** — a rain-washed downtown at blue dusk: wet reflective asphalt, amber windows and street lights, distant skyline, faint rising mist, and a large rain puddle at 62%/69% mirroring the sky, with one or two green leaves overhanging its edge (aperture into scene 3); (3) **leaf** — an extreme macro of a backlit leaf: glowing translucent vein network in deep green-teal, sparkling epidermal micro-texture, scattered droplets, and one hero dew drop at 46%/55% whose interior glows teal-green with a faint cellular shimmer (aperture into scene 4); (4) **cell** — a bioluminescent-documentary view inside a single cell: double membrane, mitochondria with cristae, ER ribbons, a golgi stack, drifting ribosomes, cytoskeleton filaments, and the nucleus dead-center at 50%/50% with visible nuclear pores and an indigo-violet inner glow (aperture into scene 5); (5) **nucleus** — inside the nucleus, the dive's terminus: deep indigo-violet, swirling chromatin fibre bundles, a speckled nucleolus, and one featured DNA double-helix fragment glowing accent-blue #64B5F6 right of center — the densest, most mysterious plate of the five. The other five are transparent ambient overlays (generate on a flat pure #FF00FF chroma-key background, alpha-key locally; sparse elements under 40% coverage, kept away from all edges): (6) **orbit-clouds** — 4-7 wispy drifting cirrus fragments; (7) **city-mist** — two or three mist banks, a few amber/blue bokeh orbs, thin drizzle glints; (8) **leaf-light** — soft dappled light ellipses plus a field of tiny dew sparkles; (9) **cell-organelles** — 10-20 floating translucent teal-glowing vesicles and organelle specks; (10) **nucleus-chromatin** — two or three glowing indigo chromatin light streams with drifting particle motes.

## Ambient overlay motion
Each scene layers its overlay image (sized ~108% with -4% offsets so drift never exposes an edge) above its base plate and gives it a scene-specific personality with slow infinite yoyo tweens (ease sine.inOut, all created paused): orbit's cloud deck rides one air mass (xPercent -2.2 -> 2.2 over 42s with a slight y component); city's mist flows sideways (xPercent ±3.2, 24s) while its glints breathe (opacity 0.55 -> 0.9, 7s); leaf's dappled light sways (scale 1 -> 1.05, 13s) and shimmers (opacity 0.6 -> 0.95, 4.6s); cell's organelles wander on two incommensurate axes (xPercent ±2 over 23s, yPercent ±1.6 over 17s) with a slow tumble (rotation ±1.2°, 37s); nucleus's chromatin light revolves (rotation ±2°, 44s) and breathes (opacity 0.55 -> 0.85, 5.8s). Power gate: a tween only plays while its scene is actually on screen — scene i's window runs from the moment it starts fading in ((i-1+0.55)/5 of the pinned progress) until the next scene fully covers it ((i+1)/5), the deepest scene staying live through the pull-back — AND only while the pinned section itself is in the viewport (a separate ScrollTrigger toggles everything off over the hero and below-the-fold sections).

## Signature 1 — The continuous zoom-dive (five nested scenes)
Five full-bleed scenes are absolutely stacked (z-index 0..4) inside one pinned wrapper section, each rendering its base plate full-bleed (object-fit cover) with its ambient overlay drifting above, plus a pulsing aperture ring marking the dive target; scene 1 (Orbit) additionally keeps a CSS star field with pointer parallax over the plate's space band. Before scroll starts, scene 0 sits at scale 1 / opacity 1 and scenes 1-4 sit at scale 1/6 / opacity 0. The whole sequence is driven by ONE GSAP timeline with a single ScrollTrigger (pin: true, scrub: 1, anticipatePin: 1, start "top top", end "+=" the scroller's viewport height times 5 — one viewport-height of scroll per timeline unit, 5 units total: 4 dive segments + 1 pull-back). For each of the 4 dive segments (index i connecting scene i to scene i+1), at timeline position i, duration 1: scene i scales from 1 to 6 (its resting value at that point) while scene i+1 simultaneously scales from 1/6 to 1 over the same full-segment duration. CRITICAL — both scale tweens must interpolate EXPONENTIALLY, not linearly: perceived zoom is logarithmic, so pass a custom ease function e(p) = (6^p - 1) / 5 (which turns GSAP's linear lerp into scale = 6^p) to every scale tween; with plain linear interpolation the apparent zoom velocity d(log scale)/d(scroll) decays 6:1 inside each segment and snaps back at every boundary, producing a nauseating surge/stall "bounce" at constant scroll speed, whereas the exponential ease keeps it perfectly constant within and across all four segments (the incoming scene, sitting at exactly outgoing/6, shares the same log-rate). Also set overscroll-behavior: none on the scrolling element so macOS rubber-band bounce never stacks on top of the scrub; scene i+1's opacity only begins animating (0 -> 1, duration 0.45 = 1 - 0.55) starting at local position i + 0.55, so the first 55% of the segment reads purely as "falling toward the window" and only the last 45% reveals what's on the other side. Both scene i and scene i+1 use the identical CSS transform-origin during that segment — the aperture's own x%/y% coordinate within the scene box, measured off the painted plates (Orbit->Street 52%/35%, Street->Leaf 50%/69%, Leaf->Cell 44%/61%, Cell->Nucleus 51%/49%) — which is what makes the incoming scene look like it is physically emerging from that exact point rather than just fading in centered; because each base plate paints the next scene's world small inside that same aperture (the city lights in the cloud gap, the leaf at the puddle's edge, the cellular shimmer in the dew drop, the violet glow in the nuclear pores), the crossfade reads as semantic continuity, not just geometry. Each aperture is drawn as a small accent-coloured ring (46px, 2px stroke, glowing box-shadow) plus a bright core dot, continuously pulsing (scale 0.9->1.08, opacity 0.55->1, 2.4s ease-in-out infinite alternate) so it never looks inert even while the user isn't scrolling.

## Signature 2 — Deepest-point pull-back (whole-fall finale)
After the 4th dive segment (timeline position 4, duration 1), the deepest scene (Nucleus) scales down from 1 to 0.34 and its opacity eases from 1 to 0.4 (it stays partially visible, not fully gone) using ease "power2.inOut" — the one deliberately decelerating beat on the page; everything else is either ease "none" (opacity crossfades, instrument) or the perceptually-constant exponential zoom ease from Signature 1. At the same position/duration, a 6th absolutely-positioned overlay layer (initially opacity 0, sitting above all five scenes) fades to opacity 1 with the same ease and duration: a "The Whole Fall" title over a compact recap strip showing all five stop names connected by a horizontal dashed accent line. This is the "zoom all the way back out to see the full picture" moment, executed as a single continuous scrubbed beat rather than a separate scroll section.

## Signature 3 — Scale instrument (km -> m -> mm -> µm)
A fixed instrument sits at the vertical center of the right edge for the whole page: label "SCALE", a monospace tabular-nums readout, and 5 small dots (one per scene, the active one glowing accent). The readout is computed directly from the ScrollTrigger's own progress value (0..1 across the whole pinned timeline), with no separate animation loop: for progress <= 0.8 (the 4-segment dive portion, since 4 of 5 timeline units are the dive), map dive-local progress (progress / 0.8) log-linearly from 400,000 meters down to 0.000002 meters via meters = start * (end/start)^progress; for progress > 0.8 (the pull-back), map the remaining 0.2 back from 0.000002 to 400,000 meters using the same formula in reverse. Format the live meter value into whichever unit reads best: km when >= 1000m, m when >= 1m, mm when >= 0.001m, µm otherwise — so the label itself visibly changes unit as you cross each threshold (this is the "km -> m -> mm -> µm" requirement). The active dot is set via Math.floor(progress * 5) clamped to 0..4. State in copy (Section 4) that reloading and scrolling at a different speed still always lands on exactly 400km and 2µm at the two ends, because the mapping is progress-driven, not time-driven — this is explicitly NOT a decorative count-up animation.

## Signature 4 — Aperture continuity (the "window/pupil/droplet" motif)
Reiterate, with exact coordinates, that the tunnel-through-the-aperture illusion depends on scene i and incoming scene i+1 sharing one transform-origin per segment: Orbit's cloud-gap aperture at 52%/35% leads into Street Level; Street Level's puddle aperture at 50%/69% (the glowing leaf in the water) leads into Leaf Surface; Leaf Surface's dew-drop aperture at 44%/61% leads into Single Cell; Single Cell's nuclear-pore aperture at 51%/49% leads into Nucleus (the deepest scene, which has no outgoing aperture of its own). The coordinates are measured off the finished plates, not dictated to them — register the ring to wherever the painting actually put the window.

## Section: Hero
Full-viewport section, left-aligned. A soft accent-coloured halo (520px, radial-gradient, drifting slowly on its own 11s loop) sits upper-right. Eyebrow "MAGNITUDE FIELD NOTES", H1 "One continuous dive, from orbit to the nucleus.", body "Scroll to fall through five orders of magnitude — no cuts, no reloads, just scale.", a bordered CTA "Begin the Dive ↓" that scrolls to the dive section, and a plain underlined "Skip the dive ↓" link that jumps straight past the pinned sequence to the Overview section for users who don't want the long scrubbed scroll. All of these elements reveal together via the page's one shared non-signature grammar: an "iris" clip-path wipe from circle(0% at 50% 50%) to circle(140% at 50% 50%), opacity 0->1, duration 0.9s, ease power2.out, staggered 0.12s per element — playing immediately on load in the hero (0.15s delay), and scroll-triggered (top 78% of viewport, reversing on scroll back up) in every section below.

## Section: The Dive
The pinned five-scene sequence described in Signatures 1/2/4, with a small caption (mono stop name + one-line blurb, with a soft dark text-shadow so it stays readable over the paintings) pinned to the bottom-left of whichever scene is active, e.g. "ORBIT — Low orbit, looking down through a gap in the clouds.", down through "NUCLEUS — Everything the cell knows, folded into one room."

## Section: Overview ("Five Stops, One Fall")
Eyebrow "THE WHOLE FALL", heading "Five Stops, One Fall", copy "You just crossed eleven orders of magnitude without a single scene cut — from a 400km orbital view down to a 2µm nucleus. That continuity is the whole idea." followed by the exact same recap-strip component used in the pinned finale (five stop names on a dashed accent line) — the same piece of UI reused twice.

## Section: How We Draw Scale
Eyebrow "HOW WE DRAW SCALE", heading "Painted at every power of ten.", two short paragraphs: one explaining that every stop is a full cinematic painting that hides the next scene small inside its own aperture, and that what keeps the dive continuous is the math (the exponential scale curve), not the medium; and one explaining the scale instrument's progress-driven (not time-driven) math from Signature 3.

## Footer
Heading "Get the Next Dive", copy "New descents ship monthly. Painted at every power of ten.", CTA "Subscribe to Magnitude", fine print disclosing MAGNITUDE is a fictional publication.

## Performance & accessibility
Respect prefers-reduced-motion: reduce by skipping the pin/scrub timeline entirely — render the five scenes as a normal stacked vertical list (each a plain block at natural scale/opacity, no clip illusion) and set the instrument readout to a static "400 km → 2 µm" summary instead of a live figure; also skip the star twinkle, the ambient overlay drift loops and the aperture pulse keyframes. Keep the decorative star positions generated once from a small deterministic PRNG, never per-frame Math.random. Pause every ambient overlay tween whose scene is off screen (see Ambient overlay motion) so nothing animates invisibly. Re-run ScrollTrigger.refresh() (and recompute the pin distance from the scroller's current clientHeight) on container resize. Give every purely decorative image/star layer aria-hidden and empty alt, and keep the hero's "Skip the dive" link genuinely operable by keyboard.