Open proces

Van opdracht naar zwaartekracht.

Deze pagina bewaart de creatieve beslissingen achter de showcase. De interface, geometrie, SVG, physics en audio zijn origineel en code-native. Er zijn geen AI-beelden, stockassets of gegenereerde video gebruikt.

De kernopdracht

Ontwerp een helder, speels en real-time 3D instrument dat extreme webdesigncapaciteit toont zonder te leunen op de bestaande donkere shader-, museum-, papier- of scrollfilmtaal. Bezoekers gooien glas, rubber en keramiek in zwaartekrachtputten. Botsingen maken noten en kleursporen. Touch en toetsenbord zijn gelijkwaardig.

Conceptprompt A · Orbit Orchestra

Maak één zonverlichte speelvloer de volledige thesis. Beperk de wereld tot twee putten, drie materialen en zes begrijpelijke controls. Laat massa, vorm, klank en kleur hetzelfde systeem beschrijven. Gebruik warm wit, cobalt, yuzu, tangerine, lilac en graphite. Geen serif, glow, grain of filmische duisternis.

Conceptprompt B · The Falling Score

Laat iedere worp een verticale partituur schrijven over vijf denkbeeldige notenbalken. Gebruik CSS scroll timelines, SVG-notatie en één klein WebGL-venster. Prioriteit: geordend verhaal boven vrije sandbox.

Conceptprompt C · Pocket Planet Parade

Bouw drie kleine planeten met elk een eigen krachtwet. Vormen springen tussen werelden en veranderen materiaal bij iedere landing. Prioriteit: wereldbouw en portalen, met een statische kaart als fallback.

Waarom A won

Orbit Orchestra houdt de techniek ondergeschikt aan één memorabele handeling. De bezoeker kijkt niet naar capaciteit, maar gebruikt haar. Tegelijk blijft het eerste frame klein, de fallback volledig en de interface begrijpelijk zonder tutorialmodal.

Designsysteemprompt

Lock één helder systeem vóór code: paper #F7F2E7, graphite #242628, cobalt #1747C7, yuzu #F2D21B, tangerine #FF6B35 en lilac#B7A1FF. Gebruik Bricolage Grotesque voor display/body en IBM Plex Mono voor data. Bouw asymmetrisch rond één speelvloer. Verbied serif, dark shader, grain, glassmorphism, bento en decoratieve scrollgimmicks. Meet alle tekstpairings vooraf op WCAG AA.

Codeprompt · scene en physics

Bouw een Astro-component met een server-gerenderde SVG-fallback en een gebundelde Three.js-scene. Gebruik uitsluitend code-native geometrie: icosahedron voor glas, rounded box voor rubber en torus voor keramiek. Simuleer maximaal achttien bodies in twee dimensies op een driedimensionaal podium. Bereken inverse-square aantrekking, begrensde snelheid, massa, restitution, body-body-collisions en wandbotsingen. Hergebruik één vaste trailbuffer per body; laad geen model, texture of physics-engine.

Codeprompt · bediening en compositie

Geef pointer, touch en toetsenbord gelijkwaardige controle. Een swipe bepaalt positie en snelheid;1/2/3 kiezen materiaal, pijlen sturen richting en kracht,T gooit, R wist, P speelt terug en K schakelt klank. Neem worpen op als compacte tijdgecodeerde events en replay ze deterministisch. Alle zelfstandige controls zijn minstens 44 bij 44 pixels, hebben tekstlabels en communiceren status via aria-live.

Runtimeprompt · klank, fallbacks en privacy

Initialiseer WebAudio uitsluitend na een expliciete klik of toets. Geef ieder materiaal een eigen oscillatorfamilie en houd gain kort en begrensd. Bij reduced motion verdwijnen trails, putpulsen en continue physics, maar blijven compositie en controls volledig. Zonder JavaScript of WebGL blijft de beschrijvende SVG zichtbaar. Gebruik self-hosted fonts, geen tracking, opslag, externe media of apparaatmachtigingen. Toon nooit raw runtime- of netwerkfouten aan bezoekers.

Runtimeprompt · releasebewijs

Verifieer 320, 390, 768 en 1440 pixels, normale en verminderde beweging, no-JS, no-WebGL, toetsenbord, touch, WebAudio na gesture, 404, CSP, alle routes en console/request/page errors. Eis axe 0, Lighthouse Accessibility/Best Practices/SEO 100 en Performance minstens 95 op desktop en mobiel. Bewaar compacte screenshots, runtime-state en de drie Signature-passbeslissingen; deploy pas na een volledig groene lokale releasegate en herhaal de checks op de productie-URL.

Volledig promptledger

Hieronder staat het volledige, genormaliseerde ledger van de duurzame prompts die de build gestuurd hebben. Dit zijn de copybare opdrachtteksten en constraints, niet verborgen intern redeneerwerk. Er ontbreken geen beeld- of videoprompts: dit project heeft bewust geen gegenereerde media gebruikt.

Build GRAVITY INSTRUMENT as a Signature stand-0 showcase: a bright playful real-time 3D compositional sandbox where visitors throw glass, rubber and ceramic forms into gravity wells; collisions create musical notes and colour trails. Use Three.js and a lightweight custom physics system. WebAudio only after user gesture. Give touch and keyboard parity plus record/replay or reset. Use warm white, cobalt, yuzu, tangerine, lilac and graphite. Use oversized pictographic controls. No serif, archive, grain or dark-shader look.

Reject the studio's crowded territories: dark atmospheric shader immersion, linear film-scrub, single-product theatre, generative organisms, kinetic-type gimmicks, museum editorial, paper/print craft and flat drag interfaces. Make this trio position legible as a bright playable 3D system. The hero must be the instrument itself, not a headline over a background effect.

Create one sunlit playfield that behaves like an instrument without a tutorial modal. Visitors throw three materially distinct forms into two gravity wells. Shape, mass, restitution, colour and sound must describe the same system. Keep one focal stage, no more than six control groups, and a quiet typographic page around it. Risk: game UI overwhelms identity. Fallback: one dominant stage, disciplined controls and a complete static SVG score.

Let every throw write a vertical score across five imagined staves while scrolling. Use CSS scroll timelines, SVG notation and one contained WebGL window. Make velocity determine the length and weight of typographic sound. Risk: directed choreography replaces actual play. Keep as a rejected concept unless a free sandbox proves impossible.

Create three small planets with different force laws. Forms jump between worlds and change material at each landing. Use portals and spatial sound with a static map fallback. Risk: multiple worlds create multiple signatures and exceed mobile payload. Keep as a rejected concept unless one world cannot carry enough depth.

Select Orbit Orchestra because it is the boldest viable concept within accessibility, CSP and performance gates. Lock before components: paper #F7F2E7, graphite #242628, cobalt #1747C7, yuzu #F2D21B, tangerine #FF6B35, lilac #B7A1FF and line #C9C4BA. Use Bricolage Grotesque Variable for display/body and IBM Plex Mono for data. Radius 6/14/28/999px. Ban dark shader, glow, grain, serif, archive furniture, bento, gradient blobs, autoplay audio, custom cursors and drag-only control.

Build a complete one-page experience with five beats: interactive hero, three material voices, keyboard/touch control score, code-native build proof and final return-to-play invitation. Add /guide, /prompts, /privacy and a branded 404. Keep exactly one h1 per route, unique title/description/canonical/OG metadata, WebSite JSON-LD, sitemap, robots and llms.txt. Write clear Dutch interface copy without em dashes or hype.

Render a warm, nearly shadowless spatial bowl with Three.js. Use only code-native geometry and light: cobalt physical icosahedron for glass, yuzu RoundedBoxGeometry with high roughness for rubber, tangerine torus for ceramic, and two lilac torus/sphere gravity wells. Add two quiet dashed orbit paths. Cap device pixel ratio at 1.65. Use no GLB, texture, shader package, environment map, image or video.

Implement a small deterministic two-dimensional solver projected into the 3D scene. Each body has kind, mass, radius, velocity, restitution and collision cooldown. Apply capped inverse-square attraction to two fixed wells, damping, wall reflection and pairwise impulse resolution. Cap the scene at eighteen bodies. Keep up to twenty-two trail points per body in one preallocated BufferGeometry and mutate its position attribute; never recreate geometry inside the animation loop.

Create no audio until an explicit sound-button or keyboard gesture. Glass uses short clear sine tones around C5/E5/G5/C6. Rubber uses low triangle tones around C3/E3/G3/C4. Ceramic uses short sine partials around D4/F#4/A4/D5. Clamp gain to 0.1, use fast attack and short exponential release, throttle repeated collision notes and never request microphone access or load audio files.

Pointer/touch: press in the stage, drag to define a velocity vector and release to throw; a short tap uses the current default aim. Keyboard: 1/2/3 select material, arrows change angle/power, T or Space throws, R resets, K toggles sound and P replays. Record only compact throw events with relative time, material, start and velocity. Replay the saved events without rerecording. Provide pause and reset. Every button has a visible label, pictogram, aria-pressed where relevant, live status and a minimum 44px target.

For prefers-reduced-motion, stop continuous physics, trails and well pulsing; place forms directly and keep every control/status usable. Server-render a descriptive SVG with the three materials, two wells and orbit paths. Keep that SVG visible until WebGL initializes and retain it if WebGL fails. With JavaScript disabled, preserve the complete page, headings, guide links, privacy and explicit fallback caption. Never make canvas the only carrier of meaning.

Use self-hosted fonts and bundled scripts under Astro's hash CSP. No inline event handlers, external runtime resources, analytics, cookies, localStorage, account, form or device permissions. All geometry, SVG, interface, physics and audio synthesis are original code in the repo. State that Three.js is MIT licensed. Because no generated image, video or voice is used, do not add an AI-media disclosure; publish the complete prompt ledger instead.

At 1440 and 390, inspect the first viewport, interaction flow, keyboard focus, touch targets, console, axe, reduced motion and no-JS. Fix every Blocker/High. Specifically measure contrast instead of judging by eye; keep thesis, stage and primary throw control inside the first mobile viewport; prevent seed geometry from reading as accidentally cropped; keep material labels visible on mobile.

Depth hypothesis: make material response more tactile without adding a second signature. Round the rubber contact edges, retain visibly different roughness/transmission per material, and let wells breathe by at most 3.5 percent only while motion is active. Audit the animation loop for allocations and replace per-frame geometry recreation with fixed buffers. Preserve the 350KB gzip JS target.

Compare full desktop/mobile and reduced-motion captures against DESIGN.md. Check that hero, material bands, controls, build proof and footer speak one typographic and colour language. Remove anything that competes with the instrument. NO_CHANGE is correct when another transition, scroll animation or decorative layer would weaken the sole-focal contract.

Run npm ci, lint, astro check, build and the project QA harness. Test routes /, /guide/, /prompts/, /privacy/ and branded 404 at 320/390/768/1440. Require no overflow, console/page/request errors, axe violations or missing CSP/security headers. Capture interacted desktop, first mobile viewport, full desktop/mobile and reduced mobile plus runtime state. Require independent concept-truth average at least 4.0 with no cell below 3.

Diagnose the failed mobile Lighthouse run from the exact LCP node, bootup-time and long-task evidence. Preserve the complete server-rendered SVG as first paint and defer Three.js, renderer, physics and audio until real visitor intent. Use a tiny bootstrap that captures and replays the first button click, keyboard command or pointer swipe exactly once after the dynamic import. Prime WebAudio only inside an explicit sound gesture. Add regressions proving the heavy chunk is absent before intent and first swipe, first shortcut, sound activation, reduced motion and no-JS remain correct. Rerun the full local release gate; do not lower thresholds.

Before external mutation, run the full local release gate on an isolated QA_PORT and no QA_BASE_URL. Confirm Wrangler v4 and authenticated account without exposing credentials. Confirm the gravity-instrument Pages project is absent, create it with production branch master, then deploy dist with branch master, current commit hash/message and correct dirty metadata. On production, rerun routes, 404, console, interactions, normal/reduced/no-JS, WebAudio-after-gesture and three-run desktop/mobile Lighthouse medians. Fix and redeploy until Accessibility/Best Practices/SEO are 100 and Performance is at least 95. Update INDEX/README, commit and deploy the final documentation commit.

Inspiratie, niet imitatie

De stand-0 sweep keek naar Bruno Simon, Lusion Studio en Three.js Journey voor lessen over directe interactie, motion met betekenis en code-native wereldbouw. Geen compositie, asset of broncode werd overgenomen.