GPT 6 Astra for Computer Use

Maak een complete, verzorgde interactieve HTML-webpagina in één bestand met de titel “Midnight Ramen Soundscape Theater”. Geef uitsluitend het uiteindelijke HTML-document terug, met alle CSS en JavaScript inline. De pagina moet rechtstreeks in een moderne browser werken, zonder buildstap en zonder externe afhankelijkheden, bibliotheken, lettertypen, afbeeldingen, audiobestanden, CDN-resources, netwerkaanvragen of gekoppelde assets. Bouw een expressieve interactieve scène in een surrealistische ramenzaak om middernacht. Het centrale object is één doorlopende bundel elastische noedels, weergegeven met Canvas, SVG of een zorgvuldig geïntegreerde combinatie van beide. De noedelbundel loopt diagonaal over de voorgrond en moet fysiek tastbaar aanvoelen: gebruikers kunnen hem overal met de muis of aanraking vastpakken, slepen, uitrekken, laten zwiepen, over zichzelf heen vouwen en loslaten. Implementeer overtuigende veerfysica met traagheid, demping, zwaartekracht, meerdere verbonden segmenten, botsingsreacties en zichtbare secundaire beweging. Houd de simulatie stabiel, ook tijdens agressief slepen, snelle richtingswisselingen, het wijzigen van de viewportgrootte of herhaalde interacties. Rangschik ten minste drie verschillende ramenkommen en verschillende ingrediënten langs een gebogen baan door de compositie, zodat rond de diagonale noedel een sterk visueel ritme ontstaat. Elke kom moet een eigen geïllustreerd bouillonpatroon, kleuridentiteit, label en geluidskarakter hebben. Wanneer de noedel een kom raakt of erin valt, activeer dan een gesynchroniseerde audiovisuele reactie: een uniek percussief ritme dat met de Web Audio API wordt gesynthetiseerd, een opstijgende stoomwolk, lente-groene deeltjeswolken, bouillongolven, kleine druppels, zeefdrukachtige registertrillingen en geanimeerde handgeschreven onomatopeeën in Japanse stijl zoals “ZURU!”, “PON!”, “JUU!” of “BASHAN!”, gemaakt met gestileerde tekst in plaats van externe lettertypen. De botsingsintensiteit moet volume, toonhoogte, aantal deeltjes, grootte van de golven, schaal van de letters en animatiekracht beïnvloeden. Audio mag pas starten na de eerste interactie van de gebruiker en moet een duidelijke knop voor dempen/geluid aan bevatten. De visuele climax moet een freeze-frame oproepen waarin de noedel dramatisch door de lucht is uitgerekt en de bouillon vlak vóór het spatten in de lucht hangt. Ondersteun dit met een knop “FREEZE THE SPLASH” en de Space-toets: bij het inschakelen van de bevriezingsmodus moet een korte, krachtige overgang worden toegepast, de fysieke scène zonder statusverlies worden stilgezet, de zwevende druppels en spanning in de uitgerekte noedel worden benadrukt, opvallende kinetische typografie in posterstijl worden weergegeven en een subtiele procedurele lijnschittering behouden blijven zodat de pagina levendig aanvoelt. Door opnieuw op Space of de knop te drukken, moet de scène vloeiend hervatten. Voeg een resetknop, een compacte geluidsstatusindicator en een terughoudende liveweergave van “tempo/impact” toe die wordt aangestuurd door recente botsingen. Toetsenbordbediening moet vindbaar zijn in een klein geïntegreerd hulppaneel: Space schakelt bevriezing in of uit, R reset, M dempt en de pijltjestoetsen geven de noedel richtingsimpulsen. Gebruik een visueel verfijnde hybride van vintage zeefdrukposterontwerp en procedurele lijnanimatie. Een diepe indigoblauwe achtergrond moet domineren, onderbroken door plaatselijke warmte van kachelvuur rond kommen en botsingspunten. Gebruik gelaagde steunkleuren—vermiljoenrood, gembergeel, lente-groen, warm crème en bijna zwart—met halftoontexturen, ruwe inktranden, lichte kleurverschuiving, krachtige grafische schaduwen en geanimeerde contourlijnen. Het resultaat moet handgemaakt en theatraal aanvoelen in plaats van glanzend of fotorealistisch. Voeg subtiele omgevingsstoom, flikkerende gloed van de kachel, zwevende korrel en bewegende lijntekeningen toe, maar behoud een sterk contrast en goed leesbare bedieningselementen. Vermijd generieke neon-cyberpunkstyling. Maak de compositie responsief voor brede desktopschermen, tablets en mobiele schermen; dit is een webpagina, dus forceer geen vaste beeldverhouding van 16:9. Pas de plaatsing van kommen, typografie, bedieningselementen, simulatiegrenzen en aanraakdoelen vloeiend aan zonder essentiële inhoud af te snijden. Gebruik pointer-events voor uniforme bediening via muis, pen en aanraking. Voorkom scrollen op de pagina alleen wanneer de noedel actief wordt gemanipuleerd. Respecteer prefers-reduced-motion door omgevingsanimatie te verminderen terwijl de kerninteractie functioneel blijft. Behoud vloeiende prestaties met efficiënte deeltjespooling of strikte deeltjeslimieten, requestAnimationFrame, rendering die rekening houdt met device-pixel-ratio met een verstandige resoliteitslimiet en coördinatenafhandeling die bestand is tegen wijzigingen in de venstergrootte. Inhouds- en afwerkingsvereisten: voeg een sfeervolle titelbehandeling toe, een korte uitnodiging van één regel om te interageren, drie of meer gelabelde kommen, meerdere visueel onderscheidende toppings, contextuele handgeschreven klankwoorden, verzorgde bedieningsstatussen, duidelijke focusstijlen, toegankelijke knoplabels en een onopvallende interactiehint die na het eerste gebruik vervaagt. De openingsscène moet er al uitzien als een afgewerkte verzamelposter voordat er interactie plaatsvindt, terwijl de actieve toestand moet veranderen in een levendig ritmisch speeltje met gelaagde feedback en verrassende opkomende beweging. Negatieve beperkingen: geen externe assets of afhankelijkheden; geen afbeeldings-URL’s; geen vooraf opgenomen audio; geen frameworks; geen onafgemaakte placeholders; geen TODO-opmerkingen; geen defecte bedieningselementen; geen vast 16:9-canvas; geen eenvoudige standaardinterface; geen achtergrond die uitsluitend uit een generiek verloop bestaat; geen emoji als primaire illustratie; geen overmatige verklarende tekst; geen autoplay-audio; geen onbeperkte groei van het aantal deeltjes; geen kwetsbare fysica die explodeert of NaN-waarden produceert; geen interactie die alleen met een muis werkt; en geen uitvoer buiten het ene complete HTML-document.

Create a complete, polished, single-file interactive HTML webpage titled “Midnight Ramen Soundscape Theater.” Output only the final HTML document with all CSS and JavaScript inline. It must run directly in a modern browser with no build step and no external dependencies, libraries, fonts, images, audio files, CDN resources, network requests, or linked assets. Build an expressive interactive scene set inside a surreal midnight ramen shop. The central object is one continuous bundle of elastic noodles rendered with Canvas, SVG, or a carefully integrated combination of both. The noodle bundle should travel diagonally across the foreground and feel physically tangible: users can grab it anywhere with the mouse or touch, drag it, stretch it, whip it, fold it over itself, and release it. Implement convincing spring physics with inertia, damping, gravity, multiple connected segments, collision response, and visible secondary motion. Keep the simulation stable even during aggressive dragging, rapid direction changes, viewport resizing, or repeated interactions. Arrange at least three distinct ramen bowls and several ingredients along a sweeping arc through the composition, creating a strong visual rhythm around the diagonal noodle. Each bowl should have its own illustrated broth pattern, color identity, label, and sound character. When the noodle touches or falls into a bowl, trigger a synchronized audiovisual response: a unique percussive beat synthesized with the Web Audio API, a rising steam burst, scallion-green particle sprays, broth ripples, small droplets, screen-print registration jitter, and animated handwritten Japanese-style onomatopoeia such as “ZURU!”, “PON!”, “JUU!”, or “BASHAN!” created from styled text rather than external fonts. Collision intensity must affect volume, pitch, particle count, ripple size, lettering scale, and animation force. Audio must begin only after the user’s first interaction and include a clear mute/unmute control. The climactic visual state should evoke a freeze-frame in which the noodle is stretched dramatically through the air while broth is suspended just before splashing. Support this with a “FREEZE THE SPLASH” control and the Space key: entering freeze mode should apply a brief punchy transition, suspend the physical scene without losing its state, emphasize airborne droplets and stretched noodle tension, display bold poster-like kinetic typography, and preserve subtle procedural line shimmer so the page still feels alive. Pressing Space or the control again should resume seamlessly. Add a reset control, a compact sound status indicator, and a restrained live “tempo/impact” readout driven by recent collisions. Keyboard controls must be discoverable in a small integrated help panel: Space toggles freeze, R resets, M mutes, and arrow keys apply directional impulses to the noodle. Use a visually sophisticated hybrid of vintage silkscreen poster design and procedural line animation. A deep indigo background should dominate, cut by localized stove-fire warmth around bowls and collision points. Use layered spot colors—vermilion red, ginger yellow, scallion green, warm cream, and near-black—with halftone textures, rough ink edges, slight color misregistration, bold graphic shadows, and animated contour lines. The result should feel handmade and theatrical rather than glossy or photorealistic. Include subtle ambient steam, flickering stove glow, drifting grain, and moving linework, but preserve strong contrast and readable controls. Avoid generic neon cyberpunk styling. Make the composition responsive across wide desktop, tablet, and mobile screens; this is a webpage, so do not force a fixed 16:9 aspect ratio. Adapt bowl placement, typography, controls, simulation bounds, and touch targets fluidly without cropping essential content. Use pointer events for unified mouse, pen, and touch handling. Prevent page scrolling only while the noodle is actively being manipulated. Respect prefers-reduced-motion by reducing ambient animation while keeping the core interaction functional. Maintain smooth performance through efficient particle pooling or strict particle limits, requestAnimationFrame, device-pixel-ratio-aware rendering with a sensible resolution cap, and resize-safe coordinate handling. Content and finish requirements: include an atmospheric title treatment, a short one-line invitation to interact, three or more labeled bowls, multiple visually distinct toppings, contextual handwritten sound words, polished control states, clear focus styles, accessible button labels, and an unobtrusive interaction hint that fades after first use. The opening scene should already look like a finished collectible poster before any interaction, while the active state should become a lively rhythmic toy with layered feedback and surprising emergent motion. Negative constraints: no external assets or dependencies; no image URLs; no prerecorded audio; no frameworks; no unfinished placeholders; no TODO comments; no broken controls; no fixed 16:9 canvas; no plain default UI; no generic gradient-only background; no emoji used as primary artwork; no excessive explanatory text; no autoplay audio; no uncontrolled particle growth; no fragile physics that explodes or produces NaN values; no interaction that works only with a mouse; and no output outside the single complete HTML document.