枠の中でスクロール・クリックして動きを試せます。端末指定は実寸表示です。幅が足りない場合は横にスクロールできます。
再現プロンプト
架空の衛星データSaaS「ORBITAL」を「スクロールで銀河を航行する」1本のモーション言語で貫く縦長サイト。26,000粒子の渦巻銀河をページ全体の固定背景にし、scrubでカメラが5つの星域を航行、観測ステーション間はSVG星座線で結ばれ、数値は円弧レーダーで表現、フッターでは星々が収束してワードマークを形作る。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。
Build a complete English site for the fictional satellite-data platform ORBITAL. Deliver a self-contained HTML page with inline CSS and JavaScript. Use locally installed Three.js 0.185.1 and GSAP 3.15.0 with its matching ScrollTrigger plugin; add no CDN or remote dependencies. The standalone version uses native window scroll; keep section measurements, progress and camera movement attached to that same scroll container.
## Composition and content
Use a dark editorial composition: background #05070d, text #F5F5F5, secondary text #b8c7d0, blue #4FC3F7 and occasional warm #FFD9A0. Leave open space for the galaxy. Large, tightly tracked English headings use a sans serif at 38–88px on desktop and 32–64px on phones, with line-height 1.06–1.12. Body is 14–16px with line-height 1.75. Instrument labels use a small monospace face. Transparent sections and restrained translucent panels keep the same galaxy visible across the page. Use quiet border-line CTAs and readable native form controls, rather than making every block a glowing card.
The navigation contains ORBITAL, a Motion on/off button, Platform and Start a brief. Platform moves focus and scroll to the workflow section. A narrow viewport stacks the brand above all three controls; reserve enough hero space for the full navigation. Never hide a primary action. Scope styles to this site.
1. Hero: eyebrow “Earth intelligence, in focus.”; headline “Read the planet.” / “See what’s next.”; supporting copy “From a wider view to the smallest change. Bring observation, analysis and your team together in one clear picture.”; CTA “Explore the platform ↗”. Add a separate three-part index: Observe / Understand / Share.
2. Workflow: heading “A clearer path through the data.” Three connected panels: “Keep the source in view.” explains captures and timestamps; “Make the gaps visible.” explains reviewed, pending and missing records; “Take the next step with context.” explains the sample download and integration brief. A measured SVG line connects the three panel nodes. These are workflow examples, not assertions about a real satellite fleet.
3. Orbit selection: heading “Choose the view your team needs.” Native labelled LEO, MEO and GEO radio controls change the selected ring, definition, operator task, evaluation question, sample records and totals. Set the orbit-detail heading explicitly to #F5F5F5. The selected card offers “Plan this integration”. Include a source link to the ESA orbit guide and identify the orbital illustration as schematic, not to scale. Heights marked as examples are illustrative, not mission specifications. Preserve the selected scenario when changing motion preferences or recovering the GPU.
4. Sample review: heading “Know what is ready to use.” Four SVG gauges and a semantic table share one source of truth: the selected scenario's four records. Label the snapshot “01 Aug 2026, 09:00 UTC” and clearly identify it as fictional. Show record ID, area, capture time in UTC or “Not received”, and Reviewed / Awaiting review / Not received. Show missing values explicitly; do not invent timestamps. Download the selected records as a quoted UTF-8 CSV with CRLF rows, a header and FICTIONAL SAMPLE in each row. Provide a selectable-text fallback and retry on download failure.
5. Footer: “Bring your fleet online.”; copy “Map your data, your operators and the first question an integration should answer.”; “Plan an integration →”. State that ORBITAL is fictional and the sample records are not operational telemetry. The local brief's review and save flow must retain the selected scenario and its associated focus.
## Galaxy and planet
One full-page canvas remains behind the scrolling content. It contains three Three.js Points objects: 26,000 galaxy particles, 2,600 background stars and 900 wordmark particles. Use seeded randomness for positions, colour, point size and procedural textures so reallocating a visible surface restores the same scene. Generate buffer geometry once per allocation, not every frame.
The galaxy has three spiral arms, radius 9, radial concentration exponent 1.7 and logarithmic twist 2.4. Add Gaussian angular scatter .22 and radial scatter .55. Give the central 1.2-unit bulge isotropic jitter .55 to avoid a vertical needle at the origin. Colours interpolate #FFD9A0 to #4FC3F7 to #1A2E4F. Divide the points into faint distant stars, 7% diffuse gas (alpha .02–.045, before core attenuation) and 16% brighter stars. Suppress central alpha toward .3 over the innermost 30% of the radius so the additive core does not erase the copy.
Use two 256² canvas alpha sprites, a tight stellar core and broad diffuse gas, selected with the galaxy aKind attribute. Enable mipmaps and anisotropy min(8,capability). Use additive ShaderMaterials, depthWrite false and toneMapped true with tonemapping_fragment and colorspace_fragment at the end of all point shaders. Keep the canvas CSS width/height at 100% of its host, separate from its DPR-scaled drawing buffer. The renderer uses sRGB output, ACES exposure 1.1 and sitePixelRatio(2). Outside embedded previews, render linear HDR to a 4-sample HalfFloat target; use a half-resolution UnrealBloomPass (strength .35, radius .6, threshold .75) and combine its bloom texture within the final OutputPass. Downsampling and bloom blending are half resolution, leaving only one full-resolution finishing pass. Add output dither 1/255. Multiply the galaxy layer opacity by .45 before the existing footer fade to keep near-camera star accumulation behind the body copy. Three 24×16 billboard planes carry fixed procedural noise with at most .035 alpha for distant blue/mauve gas, fading to .12 of that alpha at the footer. They do not change the camera waypoints. Galaxy screen-size coefficient is 66, with a maximum of 110 CSS pixels times pixel ratio. Fog runs from depth 10 to 32; fade near-camera points with smoothstep(1.1, 2.8, depth). Differential rotation is time × .35 / (.6 + radius × .16); vertical wobble is sin(time × .5 + radius × .6) × .12. Background stars use screen-size coefficient 90 and a slow phase-dependent twinkle. Do not use a reversed-edge smoothstep or the former oversized coefficient 260.
The orbit diagram's separate transparent canvas contains the existing stylised gas planet: radius .95, SphereGeometry 96 × 64, roughness .75, a 2048×1024 procedural banded texture and an inclined ring from radius 1.3 to 1.95 with 96 segments. Bake RoomEnvironment with PMREM once per visible planet, environmentIntensity .25. Use a 1024² ring texture on MeshStandardMaterial roughness .8, transparent DoubleSide with depthWrite false; all colour textures use sRGB, mipmaps and anisotropy min(8,capability). A 1.025-radius BackSide atmosphere sphere uses a cubic Fresnel rim with max alpha .24. The warm directional key casts PCFShadowMap 1024² (bounds ±3, near .1/far 16, normalBias .02, bias -.0003, radius 2); the planet casts a shadow onto the receiving ring. Keep the cool rim and ambient lights. Dispose every generated texture, geometry, material, shadow, pass, render target, room and PMREM generator before releasing the context. This decorative planet is not a geographic Earth model. Three schematic orbit rings surround it: LEO 14 seconds clockwise, MEO 22 seconds reverse, GEO 34 seconds clockwise. Dim unselected rings. Pause CSS ring motion when the planet surface is offscreen, the document is hidden, a dialog is open or motion is disabled.
## Camera and motion
Use a PerspectiveCamera with FOV 55 and these section waypoints, in order (distance, elevation degrees, azimuth degrees, lookAt):
- Hero: 14.5, 22, 0, [0,0,0].
- Workflow: 10.5, 12, 55, [1.4,.3,0].
- Orbit selection: 7.2, 34, 145, [-1.1,.2,0].
- Sample review: 5.6, 16, 230, [.8,-.2,0].
- Footer: 11, 78, 300, [0,0,0].
Measure section offsets against available scroll distance, interpolate neighbouring waypoints with easeInOutCubic, and damp the camera toward the target. Make damping independent of frame rate: 1 - (1 - base)^(deltaSeconds × 60), with base .07 for camera pose, .06 for lookAt and .045 for pointer offsets. Mouse parallax is limited to ±6 degrees azimuth and ±3.6 degrees elevation. Clamp each frame delta to 0–.05 seconds. Store time, camera pose, pointer offsets and footer progress in a checkpoint separate from GPU resources. A frame with delta 0 must not change the checkpoint.
The footer converges 900 points sampled from the actual galaxy buffer into ORBITAL. Sample the word from a 640 × 160 canvas into an 8.6 × 2.15 world-unit XZ plane, rotated -60 degrees around Y. Use a per-point phase spread .6, easeOutCubic and coefficient 120 for point size. Dim galaxy/star opacity from 1 to .16 while the wordmark appears. An empty wordmark texture is a recoverable visual initialization failure, not a completed scene.
Only editorial headings receive a once-only entrance: opacity .65 to 1 and blur 3px to none over .8 seconds, stagger .1, power2.out. Never hide paragraphs, action buttons, form controls or records pending an animation. The constellation line, orbit-group scroll rotation (220 degrees) and gauge arcs can follow scroll; gauge digits always display real derived totals immediately. Selecting a new scenario fills its arcs immediately. For received count captured timestamps; for reviewed/pending/missing count those statuses. Fractions use record count as denominator, with zero for an empty sample. Do not substitute promotional uptime, fleet-size, accuracy or throughput figures.
## Failure, reduced motion and resource ownership
Keep all meaningful content in HTML above an always-available static star illustration and a static planet fallback. Treat galaxy and planet as independently recoverable surfaces. Use IntersectionObserver on each actual canvas host; allocate only after a nonempty visible intersection and while the document is visible. A candidate must resize and render its first frame successfully before attaching its canvas or declaring it ready. Catch constructor, texture, shader, resize and rendering failures, including context loss during the first render. Remove and dispose partial resources. Show a contextual English retry button; never replace the whole site with an error screen or retry continuously on animation frames.
On leaving the viewport or hiding the tab, stop RAF and release that surface's textures, geometries, materials, renderer and context. Keep the checkpoint. On re-entry, rebuild the same seeded geometry and first render at delta 0 from the saved checkpoint; reset the RAF timestamp so hidden time does not advance the scene. Ignore stale callbacks from a disposed renderer. Explicit retry creates one new attempt and keeps the selected orbit and brief. Cleanup failures must not prevent the recovery controls from appearing.
Listen to prefers-reduced-motion changes. The manual Motion control can pause at any time; device reduced motion takes precedence and is explained on the disabled control. Both settings freeze camera, rotation, wobble, twinkle and wordmark at their current pose, with no continuous RAF, CSS spin or scroll-linked decoration. Resize may redraw the same frozen frame. Open dialogs suspend drawing too. With motion off, section navigation scrolls instantly and moves focus. Resume from the checkpoint only when enabled and visible.
Use pixel ratio at most 2 for the full site and at most 1 only for explicitly opted-in card previews. No unmeasured frame-rate or device-performance guarantees. Verify initialization and context-loss recovery, keyboard selection, CSV errors, the complete brief review/save/edit flow, 320px navigation, OS/manual reduced motion and real GPU output before treating the result as accepted.
## Exact fictional scenario data
The following records and copy are shared with the implemented interface. Definitions refer to the ESA guide; timestamps and places are fictional interface fixtures.
Reference: https://www.esa.int/Enabling_Support/Space_Transportation/Types_of_orbits
[
{
"id": "leo",
"label": "LEO",
"name": "Observation passes",
"altitude": "550 km example",
"focus": "Coverage study",
"definition": "Low Earth orbit is close to Earth. It is commonly used for observation missions.",
"task": "Compare captures across a coastal survey.",
"question": "Which passes are available, and which still need a quality review?",
"records": [
{
"id": "L-014",
"area": "Northern inlet",
"captured": "2026-08-01T08:42:00Z",
"quality": "reviewed"
},
{
"id": "L-015",
"area": "Harbour approach",
"captured": "2026-08-01T08:46:00Z",
"quality": "reviewed"
},
{
"id": "L-016",
"area": "Southern estuary",
"captured": "2026-08-01T08:51:00Z",
"quality": "pending"
},
{
"id": "L-017",
"area": "Offshore transect",
"captured": null,
"quality": "missing"
}
]
},
{
"id": "meo",
"label": "MEO",
"name": "Navigation records",
"altitude": "12,000 km example",
"focus": "Constellation feed",
"definition": "Medium Earth orbit sits between low and geostationary orbits. Navigation constellations use this region.",
"task": "Review a navigation-feed sample before sharing it.",
"question": "Which records have been checked, and which are still in the review queue?",
"records": [
{
"id": "M-021",
"area": "Western sector",
"captured": "2026-08-01T08:40:00Z",
"quality": "reviewed"
},
{
"id": "M-022",
"area": "Central sector",
"captured": "2026-08-01T08:45:00Z",
"quality": "pending"
},
{
"id": "M-023",
"area": "Eastern sector",
"captured": "2026-08-01T08:50:00Z",
"quality": "pending"
},
{
"id": "M-024",
"area": "Southern sector",
"captured": "2026-08-01T08:55:00Z",
"quality": "reviewed"
}
]
},
{
"id": "geo",
"label": "GEO",
"name": "Regional watch",
"altitude": "35,786 km",
"focus": "Coverage study",
"definition": "A geostationary satellite follows Earth’s rotation and remains above the same point on the equator.",
"task": "Check a regional observation batch for gaps.",
"question": "Which regional captures are ready, and where is a capture missing?",
"records": [
{
"id": "G-031",
"area": "Ocean sector",
"captured": "2026-08-01T08:30:00Z",
"quality": "reviewed"
},
{
"id": "G-032",
"area": "Coastal sector",
"captured": "2026-08-01T08:40:00Z",
"quality": "reviewed"
},
{
"id": "G-033",
"area": "Inland sector",
"captured": null,
"quality": "missing"
},
{
"id": "G-034",
"area": "Southern sector",
"captured": null,
"quality": "missing"
}
]
}
]
## Current English composition
Use an editorial layout with a short two-line English headline, open space for the GPU scene and a separate supporting paragraph. Aurora: “Light in motion.” / “Made to move you.” Orbital: “Read the planet.” / “See what’s next.” Display type is 38–88px at desktop with line-height 1.06–1.12 and tight negative tracking; 32–64px on mobile. Body is 14–16px with line-height 1.75. Keep quiet border-line CTAs, one muted accent and the working English action flow. Under 680px, stack the layout and retain every navigation action. Aurora’s four steps are “Define the purpose and audience”, “Set the creative direction”, “Prototype the experience”, “Launch and keep it moving”. Orbital begins with Observe, Understand and Share. Describe satellite figures as interface examples and the studio works as concept studies; do not present fictional performance or client results as facts. This supersedes the earlier hero copy and achievement claims in the brief. Visual verification is required after implementation.
## 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": "particle-nebula",
"brand": "ORBITAL",
"accent": "#4FC3F7",
"paper": "#090d16",
"ink": "#eef1f3",
"colorScheme": "dark",
"title": "Prepare an integration brief",
"intro": "Keep the orbit scenario, the operator task and the first question an integration needs to answer together.",
"facts": [
[
"Inputs",
"Telemetry source, update cadence and coordinate system"
],
[
"Evaluation",
"Data mapping, unavailable-data states and the intended operator task"
],
[
"Handover",
"A scope brief for an integration study"
]
],
"groups": [
{
"label": "Focus",
"options": [
{
"title": "Constellation feed",
"detail": "Describe the source records and updates needed by an operator."
},
{
"title": "Coverage study",
"detail": "Describe the regions, time periods and gaps you need to understand."
}
]
},
{
"label": "Orbit scenario",
"options": [
{
"title": "LEO · Observation passes",
"detail": "Compare captures across a coastal survey. Which passes are available, and which still need a quality review?"
},
{
"title": "MEO · Navigation records",
"detail": "Review a navigation-feed sample before sharing it. Which records have been checked, and which are still in the review queue?"
},
{
"title": "GEO · Regional watch",
"detail": "Check a regional observation batch for gaps. Which regional captures are ready, and where is a capture missing?"
}
]
}
],
"brief": "Describe the dataset, the people using it and the decision they need to make.",
"notes": [
"This is a fictional satellite interface. Performance figures on the page are sample values, not operational telemetry or a service guarantee."
]
}
- 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.