GPT-6 Sol · Harness lane

harness

Create a single self-contained SVG illustration of the Sony PS5 Pro DualSense wireless controller at MAXIMUM fidelity. This is a showcase piece: take your time to plan the geometry carefully before writing it. Requirements: 1) Accurate DualSense silhouette and proportions: a wide body with the large, wide touchpad spanning the top centre, two flared, rounded grips sweeping down and outward, and a perfectly symmetrical left/right layout. White outer shell with the black central core section. 2) Face buttons on the right in the classic diamond: triangle (top), circle (right), cross (bottom), square (left), each drawn as clean PlayStation symbols in their real colours (green triangle, red circle, blue cross, pink square) in the modern outline style on light buttons, with subtle bevels. 3) D-pad on the left as FOUR separate arrow-shaped directional buttons (up, down, left, right), not a single cross. 4) Two black analog sticks with concave tops and a textured grip ring (fine radial or dotted texture) and shading. 5) The PlayStation logo button centred below the touchpad between the sticks, the small mic mute button with its orange-tinted indicator line just below it, the Create button (left) and Options button (right) flanking the touchpad. 6) The blue light-bar glow running along both side edges of the touchpad, with a soft bloom. Speaker grille holes on the black core. 7) Realistic product-render shading: gradients, specular highlights, soft ambient occlusion, a contact shadow beneath the controller. 8) A clean dark studio background with a subtle radial vignette. Front-on hero shot, centred and filling the frame well. Use viewBox="0 0 1600 1100" with width="1600" height="1100". No external assets, no raster images, no fonts, no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences. Save it as controller.svg in the current directory. You may render and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

raw

Create a single self-contained SVG illustration of the Sony PS5 Pro DualSense wireless controller at MAXIMUM fidelity. This is a showcase piece: take your time to plan the geometry carefully before writing it. Requirements: 1) Accurate DualSense silhouette and proportions: a wide body with the large, wide touchpad spanning the top centre, two flared, rounded grips sweeping down and outward, and a perfectly symmetrical left/right layout. White outer shell with the black central core section. 2) Face buttons on the right in the classic diamond: triangle (top), circle (right), cross (bottom), square (left), each drawn as clean PlayStation symbols in their real colours (green triangle, red circle, blue cross, pink square) in the modern outline style on light buttons, with subtle bevels. 3) D-pad on the left as FOUR separate arrow-shaped directional buttons (up, down, left, right), not a single cross. 4) Two black analog sticks with concave tops and a textured grip ring (fine radial or dotted texture) and shading. 5) The PlayStation logo button centred below the touchpad between the sticks, the small mic mute button with its orange-tinted indicator line just below it, the Create button (left) and Options button (right) flanking the touchpad. 6) The blue light-bar glow running along both side edges of the touchpad, with a soft bloom. Speaker grille holes on the black core. 7) Realistic product-render shading: gradients, specular highlights, soft ambient occlusion, a contact shadow beneath the controller. 8) A clean dark studio background with a subtle radial vignette. Front-on hero shot, centred and filling the frame well. Use viewBox="0 0 1600 1100" with width="1600" height="1100". No external assets, no raster images, no fonts, no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained, detailed, polished SVG illustration of the Sony PS5 Pro DualSense controller (the DualSense design used with the PS5 Pro: white main body with a black central section, the large touchpad on top with the blue light bar edges, the D-pad on the left, the four face buttons with triangle/circle/cross/square symbols on the right, two black analog sticks, the PS button and mic mute button between the sticks, create and options buttons, and the curved grips). Front-on hero product shot, centred, accurate proportions, gradients, highlights and soft shadows for realism, subtle dark studio background. Use viewBox="0 0 1200 900". No external assets, no raster images, no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained, detailed, polished SVG illustration of a Sony PS5 Pro console (the slim PS5 Pro design: white side panels with a glossy black central band, and three horizontal vent slits running across the white panels) standing upright, beside its white-and-black DualSense controller. Clean studio product-shot style: soft gradient background, subtle floor reflection and soft shadows, accurate proportions, gradients and highlights for realism. Use viewBox="0 0 1200 900". No external assets, no fonts beyond generic families, no raster images, no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Generate an SVG of a pelican riding a bicycle. Save it as pelican.svg in the current directory. You may render and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

Generate an SVG that looks like a realistic 3D render of a MacBook Pro 16" (opened, slight three-quarter view, screen glow, aluminum body). Use gradients and perspective to fake the 3D. Save it as macbook.svg in the current directory. You may render and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

Create an SVG of a lighthouse on a rocky headland at night: stormy sea, the lighthouse beam cutting through rain and mist, moonlight on the waves, as atmospheric and painterly as you can. Save it as lighthouse.svg in the current directory. You may render and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

Create an isometric SVG town: first design a small sprite sheet of distinct buildings (in <defs>), then place 20+ of them on an isometric grid with roads, trees, a river and a bridge. Pick your own theme and palette. Save it as town.svg in the current directory. You may render and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

Generate an animated SVG of a pelican riding a bicycle: the wheels and pedals turn, the legs pedal in sync, and it loops seamlessly. Use only SVG/SMIL or CSS inside the SVG, no JavaScript. Save it as pelican_animated.svg in the current directory. You may render and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

Generate an SVG of a California brown pelican riding a bicycle. The bicycle must have spokes and a correctly shaped bicycle frame. The pelican must have its characteristic large pouch, and there should be a clear indication of feathers. The pelican must be clearly pedaling the bicycle. The image should show the full breeding plumage of the California brown pelican. Save it as brown_pelican.svg in the current directory. You may render and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

Create an SVG image of an Xbox 360 controller. Save it as xbox360.svg in the current directory. You may render and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

Create a clean SVG illustration of a BMW M4 Competition in a side view. The image must follow a 4:3 aspect ratio. Use the original factory color of the BMW M4 Competition. Focus on coupe proportions and sporty stance. Use vector shapes without gradients. Save it as bmw_m4.svg in the current directory. You may render and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

create an svg where a dolphin is riding a bicycle while using vlogging with a phone. Save it as dolphin.svg in the current directory. You may render and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

Generate an SVG of a pelican riding a car in France with a cat sitting beside it. Background has Eiffel tower. Save it as pelican_car.svg in the current directory. You may render and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

Create a single self-contained SVG illustration of an acoustic guitar in front view with a sound hole rosette, six strings, tuning pegs, frets and a wood grain body. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a retro twin-bell alarm clock ringing, shown shaking with motion lines, a hammer between the bells and the hands at seven o'clock. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of an alien planet surface with purple crystal formations, strange bulb-shaped plants and two moons plus a ringed planet in the sky. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of the letters A, B and C drawn as large decorative capitals, each formed from an animal: an alligator, a bear and a cat. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a cross-section of an underground ant colony showing tunnels, a queen chamber with eggs, food storage rooms and worker ants carrying leaves. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a grid of nine flat rounded-square app icons for camera, mail, music, maps, notes, calendar, settings, weather and photos, in a consistent style. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a tall art deco skyscraper with a stepped crown, sunburst spire and vertical gold stripes against a night sky. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of an astronaut in a white spacesuit floating untethered above Earth, the visor reflecting the planet and a tether drifting loose. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a person on a hilltop at night looking through a brass telescope on a tripod, surrounded by a starry sky and a crescent moon. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a Bohr model of a carbon atom with a nucleus of six protons and six neutrons and six electrons on two orbital shells, labelled. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a winding path through a forest in peak autumn colour, with orange and red leaves falling and a wooden bench along the way. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a ballet dancer frozen mid-leap in a grand jeté, wearing a pale pink tutu, on a stage lit by a single spotlight. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a bar chart of fruit sales with labelled axes: apples 45, bananas 30, cherries 12, grapes 27 and oranges 38, each bar a different colour. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a barn owl flying straight toward the viewer with wings fully spread, heart-shaped white face and talons forward over a moonlit field. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a baseball stadium at night from behind home plate with a green diamond, packed stands, floodlights and a batter ready to swing. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a stylised basketball player mid-air dunking the ball into a hoop, the net swinging and arena lights behind. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a row of five battery icons showing empty, low in red, half, full in green and charging with a lightning bolt. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a Bauhaus-style abstract composition of circles, half-circles, triangles and bold lines in red, yellow, blue and black on off-white. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a side-view labelled diagram of a bicycle with callout lines naming the frame, saddle, handlebars, chain, pedals, derailleur, brakes, spokes and tyres. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of an empty boxing ring under spotlights with red and blue corners, taut ropes, a stool in each corner and a pair of gloves hanging. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a cast-iron skillet with two sunny-side-up eggs, sizzling bacon strips, cherry tomatoes and toast on the side. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a clear plastic cup of brown sugar milk tea with dark tapioca pearls at the bottom, a sealed top and a wide striped straw. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of an exploded vertical view of a burger with each layer floating apart: bun top, sesame seeds, lettuce, tomato, cheese, patty and bottom bun. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a circular diagram of a butterfly's life cycle: egg on a leaf, caterpillar, chrysalis and adult butterfly, with arrows between the stages. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a calendar month view for a 30-day month starting on a Wednesday, with today highlighted in a circle and three coloured event dots. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a simple campus wayfinding map with numbered buildings, a library, parking lots, footpaths, a legend and a you-are-here pin. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a deep red-rock canyon with layered striped walls and a winding green river at the bottom, seen from the rim at golden hour. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a large cargo ship stacked with colourful shipping containers sailing across the ocean, with a tugboat guiding it. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a chameleon gripping a twisted branch with its curled tail, one eye swivelled forward and its long tongue shooting out to catch a fly. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a messaging app screen with alternating grey and blue speech bubbles, a timestamp, a typing indicator and a text input bar with a send button. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a stylised chef in a tall white hat flipping vegetables in a flaming wok, mid-air ingredients and a busy kitchen behind. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a chessboard seen from a low angle in the middle of a game, with at least ten different pieces placed on correct squares and one captured piece beside. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a close-up of a green printed circuit board with a central chip, resistors, capacitors, copper traces and solder points. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a top-down map-style illustration of a city park with a pond, winding paths, a playground, trees, benches and people walking dogs. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a chalkboard sign reading FRESH COFFEE with mixed hand-lettered styles, decorative flourishes, a small coffee cup doodle and chalk texture. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a short-legged corgi leaping in mid-air to catch a bright frisbee in a sunny park, ears flopping and tongue out. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a rainy cyberpunk alley with neon signs in invented glyphs, steam vents, a hovering drone and a figure in a glowing jacket. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a peloton of road cyclists in colourful jerseys racing along a winding mountain road with spectators cheering. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a dashboard card titled Monthly Revenue showing 48,200 dollars, a green up arrow with 12 percent and a small line sparkline beneath. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of rolling sand dunes under a starry night sky with the Milky Way arching overhead and a lone oasis palm on the horizon. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of an articulated desk lamp casting a warm cone of light over a stack of three books, a pair of reading glasses and a steaming mug. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a stylised film-noir detective in a trench coat and fedora under a streetlamp in the rain, his long shadow on the wet pavement. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a stylised group of five friends of different ages and backgrounds squeezing together for a selfie at a picnic, one holding the phone. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a row of glowing clay oil lamps on a doorstep surrounded by a colourful floor pattern of flower petals and geometric rangoli. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a DNA double helix twisting vertically with a sugar-phosphate backbone and colour-coded base pairs, with a small legend for A, T, C and G. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a donut chart of an energy mix: solar 30 percent, wind 25 percent, hydro 20 percent, gas 15 percent and nuclear 10 percent, with the total in the centre. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a green dragon coiled around the top of a stone tower, wings folded and smoke curling from its nostrils, under a stormy sky. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a dragonfly with four transparent veined wings hovering above lily pads on a pond, a pink water lily open beside it. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of the words DREAM BIG as chunky extruded 3D block letters in teal with long diagonal shadows on a cream background. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a white quadcopter drone hovering with four propellers, landing legs and a camera gimbal underneath, seen from a slight top angle. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a full drum kit with a bass drum, snare, two toms, floor tom, hi-hat and two cymbals, with drumsticks resting on the snare. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a traditional brick windmill with four lattice sails beside a canal, tulip fields in rows of red and yellow in front. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a wicker basket of painted eggs with stripes, dots and zigzags nestled in green paper grass, with a small bunny peeking from behind. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of three ancient Egyptian pyramids in the desert at sunset, with a camel caravan silhouetted in the foreground. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a baby elephant spraying water from its trunk over its back in a muddy watering hole, with a savanna acacia tree and warm late-afternoon light. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a hand-drawn fantasy world map with two continents, mountain ranges, forests, rivers, a sea serpent in the ocean and invented place names. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a file upload card with a dashed-border drop zone, a cloud-upload icon, a browse button and two files in progress with percentage bars. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a silver and black 35mm rangefinder film camera in front view with a lens, shutter dial, film advance lever and leather strap. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a pink flamingo standing on one leg in shallow turquoise water, its reflection rippling beneath it and its neck in an S-curve. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a cluster of floating islands in the sky connected by rope bridges, waterfalls pouring off their edges into the clouds below. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a flowchart titled Should I Have Coffee with a start oval, three yes/no decision diamonds about time, sleep and cups so far, and two outcome boxes. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a four-tier food pyramid infographic with grains at the base, then fruits and vegetables, then proteins and dairy, then sweets at the top, each tier illustrated. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a fountain pen with a gold nib resting beside an open glass ink bottle, a curling signature-style ink line on cream paper. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a recursive fractal tree where each branch splits into two smaller branches at an angle, at least eight levels deep, with blossoms at the tips. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a still-life fruit bowl with apples, a bunch of grapes, a banana and a pear, lit from the side with soft shadows on a tablecloth. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a chunky grey retro handheld game console with a green monochrome screen showing a platform game, a D-pad and two red buttons. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a smiling gardener in overalls and a straw hat watering a vegetable patch with a metal watering can, sunflowers behind. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a full-body side view of a giraffe reaching up to eat leaves from a tall tree, with accurate patchwork coat pattern and ossicones. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a Victorian glass and iron conservatory with an arched roof, tall palm trees visible inside and a gravel path leading to its doors. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a clear glass of water with a striped straw that appears bent at the waterline due to refraction, ice cubes and a lemon slice. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of the word ERROR in a glitch art style with RGB channel offsets, horizontal slice displacement and scanlines on black. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of the phrase GOOD VIBES in bold 1970s rounded lettering with stacked orange, yellow and brown offset outlines and a sunset stripe behind. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of the front facade of a gothic cathedral with twin spired towers, a large rose window, pointed arches and flying buttresses. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a black grand piano with its lid propped open showing strings and hammers, a bench, and sheet music on the stand. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a classical Greek temple with a row of Doric columns, a triangular pediment and marble steps on a hilltop. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of the word BOO in thick slime-green drippy horror lettering with drips running off each letter onto the ground below. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a hand holding five different fruits at once: an apple, a banana, a lemon, a bunch of grapes and a strawberry, with every finger visible. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a pair of over-ear headphones with cushioned ear cups and a padded headband, resting on a small stand, soft studio shading. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a tiny hedgehog sheltering from rain under a red spotted mushroom cap, with raindrops, wet grass and a little puddle. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a red and white rescue helicopter hovering over rough sea while lowering a rescuer on a winch line toward a small boat. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of the word HELLO as a glowing pink neon sign in cursive script mounted on a dark brick wall, with visible tube bends and a soft glow. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a honeybee walking across golden hexagonal honeycomb with some cells capped and some dripping honey, with pollen baskets on its legs. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of three striped hot air balloons of different colours floating over a patchwork of green and yellow fields at sunrise. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a wooden-framed hourglass with sand halfway through, a small mound forming at the bottom and a thin falling stream in the middle. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a labelled cross-section of the human eye showing the cornea, iris, pupil, lens, retina, optic nerve and vitreous humour, with a light ray path. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a labelled cross-section of the human heart showing the four chambers, valves, aorta, vena cava and pulmonary artery, with red and blue blood flow arrows. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a front-view human skeleton with major bones labelled, including the skull, clavicle, ribcage, spine, pelvis, femur, tibia and humerus. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a ruby-throated hummingbird hovering with blurred wings, its long beak dipped into a pink trumpet flower, iridescent green back feathers. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a waffle cone with three scoops of ice cream in pink, mint and chocolate, melting and dripping down the cone on a hot day. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a repeating geometric star tiling of interlaced eight-pointed stars and crosses in deep blue, turquoise and gold. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of an isometric cutaway of a cosy corner coffee shop with a counter, espresso machine, tables, hanging plants and a striped awning. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a tumbling blocks pattern of isometric cubes shaded in three tones so the pattern flips between cubes seen from above and below. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of an isometric farm with a red barn, silo, crop fields, a tractor, fenced paddock with cows and a small pond with ducks. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of an isometric fishing harbour with a wooden pier, moored boats, stacked crates, a crane, gulls and small waves. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of an isometric workspace on a floating tile with a desk, monitor, office chair, bookshelf, plant and a cat sleeping on the rug. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of an isometric cutaway of a small space station module showing sleeping pods, a lab bench, a hydroponic garden and a porthole. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of three carved jack-o'-lanterns with different faces glowing on a porch step at night, with fallen leaves and a black cat. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a five-storey Japanese pagoda with red wooden beams and curved tiled roofs, framed by blossoming cherry trees. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a traditional overlapping wave pattern of concentric semicircles in indigo and white, arranged in offset rows. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a metal key ring holding five different keys, including an old skeleton key, a house key, a padlock key and a small car fob. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of two children in puffy jackets building a snowman, one placing a carrot nose while the other rolls a snowball. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a blue and orange kingfisher diving into a river to catch a small fish, with a splash crown and droplets frozen in time. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a stylised knight in full plate armour standing with a sword planted in the ground and a shield bearing a lion crest. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a close-up of a red seven-spot ladybug crawling along a dewy green leaf, with a single water droplet magnifying the leaf veins. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of an overhead view of a cup of latte with a rosetta leaf drawn in the foam, on a saucer with a small spoon and a biscuit. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a purple octopus on the seafloor juggling four porcelain teacups with different tentacles, small bubbles rising and seaweed swaying behind it. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a giant panda sitting upright chewing a bamboo stalk held in both paws, surrounded by a bamboo grove in flat vector style. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a polar bear and its cub standing on a drifting ice floe in a dark arctic sea, with distant icebergs under a pale sky. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a red fox mid-pounce diving headfirst into a snowbank, tail streaming behind, with pine trees and falling snowflakes in a muted winter palette. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a green sea turtle gliding through clear blue water above a coral reef, sunlight rays filtering from the surface and a few small fish nearby. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of an orange striped cat curled asleep on a round knitted cushion beside a sunny window, with a ball of yarn and soft shadow stripes from the blinds. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create a single self-contained SVG illustration of a grey wolf standing on a rocky ledge howling at a huge full moon, silhouetted pine forest below and a starry sky. Use viewBox="0 0 1200 900" with width="1200" height="900". No external assets, no raster images, no external fonts (generic font families such as sans-serif are fine), no scripts. Output ONLY the complete SVG code, starting with <svg and ending with </svg>, with no explanation or markdown fences.

Create code for an SVG of a whale flying through the clouds. Save it as whale.svg in the current directory. You may render and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

harness_selfreview

Build a playable, cinematic single-page Three.js experience: a small boat drifting through a Norwegian-style fjord / coastal mountain landscape.

Requirements:
- ONE self-contained index.html file (HTML + CSS + JS inline). No external assets of any kind (no textures, models, fonts, audio files) EXCEPT Three.js itself, loaded via an import map from this exact pinned CDN:
  "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  All textures (water normals, rock, snow, bark, clouds, etc.) must be generated procedurally in code (canvas / DataTexture / shaders).
- Scene content: steep procedural fjord walls and mountains with snow caps, rock and grass coloring by height/slope; procedural conifer forests (instanced); a water surface with animated waves and sky/landscape reflections; a lighthouse on a rocky point with a rotating beam that matters at night; a small wooden boat with 2 simple stylized 3D characters on it (one rowing/steering, one looking around, with small idle animations); distant islands; birds or other small life if cheap.
- Dynamic weather cycling clear -> fog -> rain -> storm -> clearing, with smooth transitions: fog density, cloud cover, rain particles, lightning flashes + wind and bigger waves in the storm.
- A full day/night cycle: sunrise, day, golden hour, sunset, night with stars and moon, lit lighthouse and boat lantern. Sky color, sun/moon lights, and fog color must track time of day.
- Controls: keyboard (WASD/arrows to steer and throttle the boat, C to switch camera, T toggles auto-tour, 1-5 to force weather, N to jump time) and touch (on-screen joystick/buttons on phones). Camera follows the boat in play mode.
- An "auto-tour" cinematic camera mode: slow, smooth, film-like camera moves (orbits, low water-level glides, high establishing shots, close-ups of the characters) while the boat drifts along a path through the fjord and the weather and time of day progress.
- Minimal, elegant UI: small title "Fjordlys" (or a better name of your choice), a tiny hint line for controls, fading out in tour mode.
- Must run smoothly on desktop and phone browsers: keep geometry/particle counts moderate, cap devicePixelRatio at 2, handle resize/orientation.
- IMPORTANT for automated video capture, support these URL parameters:
  ?tour=1        start directly in auto-tour mode
  ?capture=1     hide ALL UI overlays (title, hints, touch controls)
  ?cycle=40      when present, compress one complete showcase into that many seconds: the time of day goes from morning through golden hour, sunset and night, and the weather passes clear -> fog -> rain -> storm -> clearing within that span (so a 40-second recording shows everything). Without it, use a relaxed pace suited to live play.
  Drive all animation from the requestAnimationFrame timestamp / performance.now() (not from wall-clock-independent accumulators that ignore time), so that overriding those functions steps the scene deterministically. Set window.__sceneReady = true once the first frame has rendered.
- No console errors or warnings in a current Chrome. Use modern Three.js r160 APIs only (no deprecated/removed ones).

Output ONLY the complete index.html, starting with <!DOCTYPE html> and ending with </html>, with no explanation and no markdown fences. Build it as index.html (plus any local asset files you create) in the current directory. Three.js may load from a pinned CDN. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own until it looks genuinely cinematic before finishing. Close any browser you open as soon as you've taken your screenshot.

raw

Build a playable, cinematic single-page Three.js experience: a small boat drifting through a Norwegian-style fjord / coastal mountain landscape.

Requirements:
- ONE self-contained index.html file (HTML + CSS + JS inline). No external assets of any kind (no textures, models, fonts, audio files) EXCEPT Three.js itself, loaded via an import map from this exact pinned CDN:
  "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  All textures (water normals, rock, snow, bark, clouds, etc.) must be generated procedurally in code (canvas / DataTexture / shaders).
- Scene content: steep procedural fjord walls and mountains with snow caps, rock and grass coloring by height/slope; procedural conifer forests (instanced); a water surface with animated waves and sky/landscape reflections; a lighthouse on a rocky point with a rotating beam that matters at night; a small wooden boat with 2 simple stylized 3D characters on it (one rowing/steering, one looking around, with small idle animations); distant islands; birds or other small life if cheap.
- Dynamic weather cycling clear -> fog -> rain -> storm -> clearing, with smooth transitions: fog density, cloud cover, rain particles, lightning flashes + wind and bigger waves in the storm.
- A full day/night cycle: sunrise, day, golden hour, sunset, night with stars and moon, lit lighthouse and boat lantern. Sky color, sun/moon lights, and fog color must track time of day.
- Controls: keyboard (WASD/arrows to steer and throttle the boat, C to switch camera, T toggles auto-tour, 1-5 to force weather, N to jump time) and touch (on-screen joystick/buttons on phones). Camera follows the boat in play mode.
- An "auto-tour" cinematic camera mode: slow, smooth, film-like camera moves (orbits, low water-level glides, high establishing shots, close-ups of the characters) while the boat drifts along a path through the fjord and the weather and time of day progress.
- Minimal, elegant UI: small title "Fjordlys" (or a better name of your choice), a tiny hint line for controls, fading out in tour mode.
- Must run smoothly on desktop and phone browsers: keep geometry/particle counts moderate, cap devicePixelRatio at 2, handle resize/orientation.
- IMPORTANT for automated video capture, support these URL parameters:
  ?tour=1        start directly in auto-tour mode
  ?capture=1     hide ALL UI overlays (title, hints, touch controls)
  ?cycle=40      when present, compress one complete showcase into that many seconds: the time of day goes from morning through golden hour, sunset and night, and the weather passes clear -> fog -> rain -> storm -> clearing within that span (so a 40-second recording shows everything). Without it, use a relaxed pace suited to live play.
  Drive all animation from the requestAnimationFrame timestamp / performance.now() (not from wall-clock-independent accumulators that ignore time), so that overriding those functions steps the scene deterministically. Set window.__sceneReady = true once the first frame has rendered.
- No console errors or warnings in a current Chrome. Use modern Three.js r160 APIs only (no deprecated/removed ones).

Output ONLY the complete index.html, starting with <!DOCTYPE html> and ending with </html>, with no explanation and no markdown fences.

Show me what goes on inside an AI data centre.

---
Deliverable: build this in the current folder as a self-contained web page that opens in a browser with index.html as the entry point (no build step; CDN imports are fine). Work autonomously and do not ask questions.

Create a stylistic 3D environment of a busy Santa Monica beach that adapts to the time of day. The art style must be a particle illustration, which uses thousands of tiny glowing specks rather than solid fills with flowing ribbon strokes behind figures to suggest motion.

---
Deliverable: build this in the current folder as a self-contained web page that opens in a browser with index.html as the entry point (no build step; CDN imports are fine). Work autonomously and do not ask questions.

Build a short cinematic camera study in Three.js that demonstrates a dolly zoom, the 'vertigo' shot. A lone figure stands at the end of a long corridor lined with repeating columns, doors and ceiling lights. Over the shot the camera physically travels backward along the corridor while its field of view narrows at the matching rate, so the figure stays exactly the same size and position on screen while the corridor behind it visibly stretches away and then snaps back. Light it with cold overhead fluorescents and a faint fog. Ease the move in and out, then reverse it so the loop closes. The animation plays automatically, fills the window at 16:9, loops seamlessly every 8 seconds with no visible jump at the loop point, and shows a small unobtrusive caption in one corner naming the technique. Everything is built in code from Three.js geometry, shaders and materials; no external models or textures. Build it as a single self-contained index.html (inline CSS and JS) in the current directory. Three.js may load from a pinned CDN. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a short cinematic camera study in Three.js that demonstrates a Dutch angle for tension. A narrow stairwell in an old apartment block: peeling walls, a flickering bulb, a banister and a figure waiting on the landing. The shot starts level, then the camera rolls around its lens axis to a strong cant of about 15-20 degrees so the horizon and verticals tilt, and holds there uneasily with the flicker before levelling to close the loop. The animation plays automatically, fills the window at 16:9, loops seamlessly every 8 seconds with no visible jump at the loop point, and shows a small unobtrusive caption in one corner naming the technique. Everything is built in code from Three.js geometry, shaders and materials; no external models or textures. Build it as a single self-contained index.html (inline CSS and JS) in the current directory. Three.js may load from a pinned CDN. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a short cinematic camera study in Three.js in the style of classic film noir, rendered in black and white. A detective in a hat and trench coat stands in a rain-slick alley at night under a single streetlamp; venetian-blind shadows from a window fall across a brick wall, cigarette smoke curls, and the rain glints in the lamp's cone. Use one hard key light, deep black shadows covering most of the frame and high contrast. The camera drifts in very slowly. The animation plays automatically, fills the window at 16:9, loops seamlessly every 8 seconds with no visible jump at the loop point, and shows a small unobtrusive caption in one corner naming the technique. Everything is built in code from Three.js geometry, shaders and materials; no external models or textures. Build it as a single self-contained index.html (inline CSS and JS) in the current directory. Three.js may load from a pinned CDN. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a short cinematic camera study in Three.js that demonstrates a 360-degree orbit shot. A glossy sculpted trophy stands on a pedestal in the middle of a dim gallery hall with pillars, framed paintings and spotlights. The camera circles the trophy once through a full turn at a constant radius and height, always aimed at it, so the room sweeps behind it like a ribbon while the trophy stays centred. The trophy itself does not rotate. Warm key spotlights and cool rim lights make reflections slide across its surface. The animation plays automatically, fills the window at 16:9, loops seamlessly every 8 seconds with no visible jump at the loop point, and shows a small unobtrusive caption in one corner naming the technique. Everything is built in code from Three.js geometry, shaders and materials; no external models or textures. Build it as a single self-contained index.html (inline CSS and JS) in the current directory. Three.js may load from a pinned CDN. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a short cinematic camera study in Three.js that demonstrates silhouette lighting. A figure walks slowly toward a huge bright doorway (or a window onto a blazing sunset) in a dark warehouse, with haze in the air so the light pours in as visible beams. The only strong light is behind the figure, so the figure reads as a solid near-black shape with a thin bright rim, with no detail visible on the side facing the camera. The animation plays automatically, fills the window at 16:9, loops seamlessly every 8 seconds with no visible jump at the loop point, and shows a small unobtrusive caption in one corner naming the technique. Everything is built in code from Three.js geometry, shaders and materials; no external models or textures. Build it as a single self-contained index.html (inline CSS and JS) in the current directory. Three.js may load from a pinned CDN. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a short cinematic camera study in Three.js that demonstrates a side-on tracking shot. A runner (a stylised low-poly figure with an animated running cycle) jogs along a riverside path at dawn past lamp posts, benches, trees and a railing, with a city skyline far behind. The camera travels parallel to the runner at the same speed, keeping them at the same size and in the same third of the frame, while foreground objects whip past quickly, midground objects slower, and the skyline barely moves. The animation plays automatically, fills the window at 16:9, loops seamlessly every 8 seconds with no visible jump at the loop point, and shows a small unobtrusive caption in one corner naming the technique. Everything is built in code from Three.js geometry, shaders and materials; no external models or textures. Build it as a single self-contained index.html (inline CSS and JS) in the current directory. Three.js may load from a pinned CDN. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Create a seamless looping side-view animation of a red fox running through a forest at dusk. Deliver ONE self-contained index.html (inline CSS and JavaScript only, SVG and/or canvas; no external assets, libraries, fonts or network requests of any kind). The fox runs left to right, seen in profile, with an animated running gait: legs, body, head and tail all move in a believable run cycle. The scene moves past it: a dusk sky, several layers of trees scrolling at different speeds for parallax depth, and a ground strip. One loop lasts about 8 seconds and repeats forever with no visible seam or jump. Frame the scene at 16:9, scaled to fit any window, and make it look good on desktop and phone. Write everything into the working directory and finish with a short README.md.

Build a single-file web app (index.html, Three.js from a CDN, no build step) that turns a reference image into a procedural Three.js scene. Include 3 built-in reference images drawn procedurally on a canvas (a teapot on a table, a lighthouse on rocks, a red sports car) so no external files are needed. For the selected reference, analyse the image's dominant colours and silhouette, then assemble the object from primitives (boxes, cylinders, lathe and extrude geometry) with matching materials, lighting and a ground plane. Show the reference image and the 3D result side by side, with a slider that morphs from a flat "pixel cloud" of the image into the finished 3D model. Add an "Export GLB" button using GLTFExporter. IDLE AUTO-PLAY: with no input, cycle through the 3 references every 8 seconds, animating the pixel-cloud-to-model morph and slowly orbiting the camera. Must render with WebGLRenderer (no WebGPU required). Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Make a complete playable game in ONE html file under 13 KB (minified size reported in a corner): the visuals are rendered entirely by one fragment shader (raymarched or 2D SDF). Arcade loop: dodge/collect, score, increasing speed, game over + restart. Keyboard and touch controls. No libraries, no assets. IDLE AUTO-PLAY: with no input, the page starts animating immediately and runs an automatic demo (camera motion, preset or seed cycling, or an AI player) so a headless capture shows constant motion. Must render on WebGL/WebGL2 with no WebGPU required. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a complete single-file browser game (index.html, plain JavaScript and Canvas or Three.js from a CDN, no build step) controlled by ONE key only (Space, or tap on touch). One mechanic, deep execution: a neon runner on a looping track where pressing jumps, holding glides, and releasing on the beat gives a perfect-timing bonus. Procedurally generated levels that ramp difficulty, a synthesized WebAudio soundtrack whose beat the obstacles follow, particle effects on perfect hits, combo counter, score, best score in localStorage, and a game-over screen with instant restart. IDLE AUTO-PLAY: if no key is pressed for 3 seconds on the title screen, an AI demo player plays the game with near-perfect timing (and an occasional miss) so a headless capture shows real gameplay. Must render with Canvas 2D or WebGL (no WebGPU). Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

In one prompt, build a playable 3D kart racer in the browser with Three.js: one closed track with banked turns, 3 AI opponents, lap counter, 3 laps, finish screen with time. Keyboard controls. All assets procedural (no external files). Single index.html plus JS. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a browser 3D 'procedural LEGO' generator in Three.js: given a seed, it assembles a small LEGO scene (a house, tree and vehicle) from correctly proportioned studded bricks (real 8mm pitch, 9.6mm height ratio) with instancing for performance. Animate the bricks snapping into place one by one, allow orbit, and add a 'rebuild' button with a new seed. Plastic material should look right (subsurface-ish sheen, bevelled edges). Show brick count and draw calls. IDLE AUTO-PLAY: with no input, the page starts animating immediately and runs an automatic demo (camera motion, preset or seed cycling, or an AI player) so a headless capture shows constant motion. Must render on WebGL/WebGL2 with no WebGPU required. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a single-file web page (index.html, no frameworks, plain WebGL2 or WebGPU) that serves as a landing-page hero background studio. It shows 5 animated full-screen shader backgrounds: mesh gradient, liquid metal, grainy aurora, dithered dots, and flowing noise lines. A left sidebar switches presets and exposes 4-6 live sliders per preset (speed, scale, colours, grain). Over the background sits a sample hero headline and CTA button so the result looks like a real product site. Include an 'Export' button that copies a self-contained HTML/GLSL snippet of the current preset with its settings. It must run smoothly at 60 fps and auto-cycle through the presets every 4 seconds when idle, so a screen recording shows all five. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

In Three.js with WebGLRenderer (no WebGPU required), create a serpentine dragon made of 400+ segments whose body follows a boids-style flock leader through a night sky. Segments use flocking (separation, alignment, cohesion) plus a spine constraint so the body reads as one creature. Add glowing scales, a particle ember trail, mouse-attractor steering and an orbit camera. Single index.html, 60 fps target. IDLE AUTO-PLAY: with no input, the page starts animating immediately and runs an automatic demo (camera motion, preset or seed cycling, or an AI player) so a headless capture shows constant motion. Must render on WebGL/WebGL2 with no WebGPU required. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a single-file Three.js scene with real rigid-body physics (write your own or use a CDN physics lib) of a large domino run: at least 2,000 dominoes in spirals, a staircase, a bridge, splits that branch and rejoin, and a final tower that topples. Include a cinematic follow camera that tracks the leading edge of the wave, a free orbit camera, slow-motion toggle, a reset button, and an IDLE AUTO-PLAY mode that resets and replays the run with a new random layout every time it finishes. Soft shadows, a polished wooden floor, 60 fps target. Output one index.html. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a single-file Three.js generative-art garden where procedural plant-sculptures evolve: each sculpture has a genome (branching L-system params, colour palette, shader noise), the user clicks favourites to breed them (crossover + mutation) and the next generation grows in with an animation. Show a family-tree panel for the selected sculpture and an export-PNG button. Include an IDLE AUTO-PLAY mode that auto-selects and breeds every 8 seconds. Output one index.html, no external assets. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a Three.js marble-run machine in one index.html: a procedurally generated multi-level track (ramps, spirals, funnels, a lift wheel, a seesaw and a bell) with physics (cannon-es or rapier via CDN) for 40 glass marbles with refraction-like materials and soft shadows. Camera modes: overview, follow-a-marble, and cinematic. Clicking adds marbles; a 'regenerate track' button rebuilds the layout from a seed. IDLE AUTO-PLAY: marbles spawn continuously, the lift wheel recirculates them, and the camera auto-switches modes every 8 s so a headless capture shows motion. WebGL only, no build step. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a Three.js scene: A night train crossing a landscape. A passenger train of a locomotive and at least four carriages with warm, glowing lit windows travels along a track that winds through rolling hills, over a bridge across a river and past a small village with a few lit houses. A full moon lights the scene with cool blue light and casts soft shadows; stars fill the sky, the river reflects the moon, and the locomotive's headlight throws a beam ahead of the train. The train moves continuously and loops forever along the track, its wheels turning and a faint trail of steam or exhaust drifting behind it. The camera slowly follows the train by default; OrbitControls let the viewer take over, and a button switches between the follow camera and a free camera. Everything is built in code from Three.js geometry, materials and shaders; no external models, textures or fonts. The scene must visibly animate from the moment it loads and run in a browser with software WebGL (no GPU). Deliver ONE self-contained HTML file; load Three.js only through an import map from https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js (addons from https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/), with no other external requests (no image, texture, model, font or audio files): build every shape and texture in code. It must work when opened directly from disk in a current desktop or mobile browser, fit the window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Build a Three.js scene: The Eiffel Tower and its surroundings in Paris, as an interactive 3D scene. The tower is recognisable, with its four curved lattice legs, the arches between them, the platforms at its levels and the tapering lattice up to the antenna, in its bronze-brown colour. Around it: the Champ de Mars lawns with rows of trees, the river Seine with a bridge and gently moving water, a few blocks of cream-coloured Haussmann-style buildings with grey mansard roofs, streets with a few lamp posts, and a sky with soft clouds. Lighting is a warm late-afternoon sun with long shadows; a toggle switches to night, when the tower lights up with warm golden lights and occasionally sparkles. OrbitControls to look around, limited so the camera stays above the ground. Everything is built in code from Three.js geometry, materials and shaders; no external models, textures or fonts. The scene must visibly animate from the moment it loads and run in a browser with software WebGL (no GPU). Deliver ONE self-contained HTML file; load Three.js only through an import map from https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js (addons from https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/), with no other external requests (no image, texture, model, font or audio files): build every shape and texture in code. It must work when opened directly from disk in a current desktop or mobile browser, fit the window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Build a Three.js "studio product shot" page: a sneaker-like or headphone-like product modelled procedurally (no downloaded models), on a turntable in a soft-box studio with an HDR-style gradient environment, contact shadows, and physically based materials (leather, rubber, brushed metal). Progressive quality: a fast rasterised preview that refines over time (accumulated soft shadows / AO, or a path-tracing-style accumulation fallback that works on WebGL2). UI: three colourways, a material toggle, and an exposure slider. IDLE AUTO-PLAY: the turntable rotates slowly and the colourway changes every 6 seconds with no input. Must render on WebGLRenderer (no WebGPU-only features). Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a single-file Three.js scene of a low-poly PS1-era survival-horror kitchen at night: vertex-snapping jitter, affine texture warping, 320x240 render target upscaled with dithering, fog, a flickering fluorescent tube, a humming fridge whose door creaks open, and a flashlight cone. First-person WASD + mouse look with a slight head bob. Include an IDLE AUTO-PLAY mode where the camera walks a slow scripted path through the room and something shifts when it looks away. All geometry and textures procedural; output one index.html, no external assets. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a small Three.js "rocket car soccer" arena game in the browser: an enclosed stadium with ramped walls, a big physics ball, two goals, and a player car that can drive, jump and boost (boost leaves a particle trail). Simple arcade physics written by hand (no external physics engine download needed, but a CDN physics lib is allowed). Score UI, a 2-minute match timer, a goal replay flash. Controls: WASD/arrows, Space jump, Shift boost, with touch buttons on mobile. IDLE AUTO-PLAY: with no input, an AI drives the car toward the ball, scores, and the chase camera follows, so a headless capture shows gameplay. Must render on WebGLRenderer. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a Three.js interactive orrery of the inner solar system in one index.html: Sun with animated corona shader, Mercury-Mars on scaled Keplerian orbits with correct relative periods, Moon, orbit trails, and a solar-sail spacecraft that spirals outward using a simple radiation-pressure model with a visible sail mesh tilting toward the Sun. UI: time-warp slider, planet focus buttons, toggle labels/trails, sail tilt angle control. IDLE AUTO-PLAY: time warp runs at 20 days/s and the camera tours each planet then follows the sail, so a headless capture shows motion. WebGL only, CDN imports, no build step. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build "Millbrook Pond", a calm countryside pond diorama in Three.js, seen from above at a three-quarter angle. An irregular pond with soft grassy banks, rocks and reeds sits in a clearing ringed by trees and bushes, with a dirt path running around it. On one shore stands a small timber watermill cabin with a shingled roof and a stone chimney, and on its side a large wooden waterwheel turns continuously, its paddles dipping into the water and churning it. A plank dock juts out from the mill, a small arched wooden footbridge crosses an inlet, and a rowboat floats on the pond with a seated figure fishing, rod and line out; the boat bobs and drifts gently and the line's float makes small rings. The water is the star: a real-time reflective and refractive surface (a planar or render-target reflection of the mill, trees and sky; refraction of the shallow pond bed near the banks; depth-based tint from clear shallows to a dark centre) blended with a Fresnel term, soft normal-mapped wind ripples, and dynamic ripple rings from the waterwheel, the boat, the fishing float and the occasional rising fish, which spread and fade. Add gentle ambient life: swaying foliage, a few lily pads or drifting leaves, dragonflies or birds, and soft afternoon sun with shadows. The camera slowly orbits the pond on its own; the user can drag to orbit, pinch or scroll to zoom, and tap the water to make ripples, and a small unobtrusive control pauses the orbit and switches the time of day (for example afternoon and golden hour). The look is stylized and cohesive (low-poly or soft-shaded), and everything is built in code; no external models, textures or HDRIs. Also add a capture mode: opening index.html?capture=1 hides all UI and plays a scripted 12-second camera move around the pond that ends where it started, so it can be recorded as a seamless clip. Build it as index.html (plus any local asset files you create) in the current directory, with no build step; three.js and any addons may load from a pinned CDN. Aim for 60 fps on a laptop and at least 30 fps on a mid-range phone, with touch working. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls and the capture mode.

Build a single-page Three.js scene: a tiny, cozy anime-style diorama under dappled sunlight filtering through tree leaves (komorebi). In it: a girl character standing next to a glowing vending machine, surrounded by flowers, on a quiet afternoon. Stylized toon/cel shading, soft warm lighting with light shafts, gentle idle animation (breeze in leaves and flowers, subtle character idle, vending-machine light flicker), slow orbiting camera with mouse orbit controls. No external model files: build everything procedurally from primitives. One index.html, runs offline, 60 fps on a laptop. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a single-file Three.js scene (index.html, Three.js from a CDN, no build step): a stone dungeon chamber lit only by flickering wall torches, with a sleeping dragon curled on a pile of gold coins. Requirements: procedural stone walls and floor (no external textures), at least 6 torches using point lights with flickering intensity and a particle flame/ember system, a dragon built from primitives with a slow breathing animation (chest rising, nostril smoke puffs), instanced gold coins that glint, soft shadows, fog and a subtle bloom. Click the dragon to wake it: it lifts its head, eyes glow and it exhales a fire stream that lights the room. IDLE AUTO-PLAY: with no input, run a slow cinematic camera path through the chamber, and every 20 seconds the dragon wakes on its own, breathes fire, and settles back to sleep. Must render with WebGLRenderer (no WebGPU required). Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a single standalone index.html using Three.js: a generative-art 'breeding' gallery. Show a 3x3 grid of live 3D sculptures, each defined by a small parameter genome (shape primitive, noise frequency, colour palette, twist, particle count). The user clicks two parents; the app breeds 9 children by crossover + mutation and animates the new generation in. Include a 'genome' readout per tile and an export-PNG button. Smooth 60fps, no external assets. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a single index.html real-time procedural sun using volumetric raymarching in a fragment shader (Three.js or raw WebGL2). Include animated plasma granulation from 3D noise, limb darkening, a glowing corona with flares and prominences, and bloom. Add a UI for temperature (colour shift), turbulence and flare intensity. Orbit camera. No external assets. IDLE AUTO-PLAY: with no input, the page starts animating immediately and runs an automatic demo (camera motion, preset or seed cycling, or an AI player) so a headless capture shows constant motion. Must render on WebGL/WebGL2 with no WebGPU required. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a single-page "particle life" simulation that runs in the browser on WebGL2 (WebGPU optional with an automatic WebGL2 fallback). 6 colour species, 8,000+ particles, an attraction/repulsion matrix between species that produces emergent cells, worms and orbits. UI: a small panel to randomise the matrix, pick from 5 named presets, change particle count and friction, and a live FPS readout. IDLE AUTO-PLAY: with no input, the sim starts immediately and cycles to a new preset every 8 seconds with a smooth crossfade, so a headless capture shows constant motion. Must render on plain WebGL2 with no GPU-only features required. No external accounts or API keys. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a single-page WebGL2 (no WebGPU) reaction-diffusion simulator (Gray-Scott) that grows coral/brain-like patterns on a 512x512 ping-pong framebuffer, rendered with a lit, height-shaded material and a slow orbiting camera over a 3D displaced plane (Three.js allowed). Include presets (coral, mitosis, worms, spots), a brush to seed chemicals, feed/kill sliders, and pause/reset. IDLE AUTO-PLAY: with no input it starts from a random seed, cycles presets every 12 s, and keeps the camera orbiting so a headless capture shows continuous growth. Single index.html, no build step, CDN imports only, 60 fps target. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a single-file web page (index.html, no build step, Three.js r17x+ via CDN with WebGPURenderer and a WebGL2 fallback) that renders a slowly rotating 3D scene (a torus knot, a low-poly terrain and a few floating cubes, lit with a moving point light) through a full-screen ASCII post-process shader. The shader samples scene luminance per cell and maps it to a configurable character ramp. Add an on-screen panel to change cell size, character set (classic, blocks, binary, katakana), foreground and background colour, and a toggle for colour-preserving mode. It must hold 60 fps at 1080p on a laptop GPU. Include a 10-second auto camera move so a screen recording shows off the effect without input. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a single standalone index.html (CDN imports only) that renders a procedural classical atrium (columns, arches, floor tiles; no external models) with a deferred-shading pipeline in WebGPU: G-buffer pass, 64 moving coloured point lights, SSAO and bloom. Add a debug toggle to view albedo / normals / depth / final. First-person WASD + mouse-look camera. Show an FPS counter. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a complete, playable 3D fishing game in ONE standalone index.html using Three.js with the WebGPU renderer (WebGL2 fallback). A small lake at golden hour with an animated water surface (normal-mapped waves, fresnel reflections, shoreline foam), a wooden dock and a first-person rod. Mechanics: hold to charge a cast, a visible line with sag physics and a bobber that bobs on the waves, random bites with a timing minigame (tension bar; the line snaps if tension stays too high), at least 5 fish species with different rarity, size and fight behaviour, a catch log UI and a score. Ambient birds or insects, a day-progress sky. No external assets except the Three.js CDN; everything is procedural. Must run at 60 fps on a laptop and be fully playable with mouse and keyboard; show controls on screen. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a single-file WebGPU (with WebGL2 fallback) paper-marbling simulator (ebru / suminagashi). Users drop ink colors onto a water surface, then drag combs and styluses to rake the ink into feathered and peacock patterns, using a real-time 2D fluid solver (advection + pressure projection) on the GPU. Include 6 ink colors, comb/stylus/drop tools, a 'press paper' button that freezes the pattern into a printed sheet with paper texture, and an IDLE AUTO-PLAY mode that drops ink and rakes classic patterns on its own when untouched for 5 seconds. Target 60 fps at 1080p. Output one index.html, no external assets. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a single standalone index.html (no build step, CDN imports only) with Three.js WebGPURenderer and TSL: an open-ocean scene with Gerstner/FFT-style wave displacement computed on the GPU, foam on crests, sky reflection and a floating buoy that bobs physically on the surface. Add an on-screen slider panel for wind speed, wave height and choppiness that updates live. Camera slowly orbits; mouse drag overrides. Fall back to WebGL if WebGPU is unavailable. Must run at 60fps on a laptop. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a 3D 'particle life' simulation in the browser using WebGPU compute shaders: at least 50,000 particles in 6 colour species, each pair with an attraction/repulsion rule, forming emergent creatures. Orbit camera, bloom-style glow, a panel with presets and a randomise-rules button. Add an optional microphone mode where audio loudness and bass energy modulate the force strengths in real time (works without the mic too). Show particle count and fps. One index.html plus local JS/WGSL only, no external assets or CDNs. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a single-page browser sailing scene in Three.js (WebGPU renderer, TSL node materials, WebGL2 fallback). A small sailboat rides a stormy ocean: animated Gerstner-wave water with foam on crests, heavy rain, lightning flashes that light the clouds, wind that heels the boat and fills the sail. Keyboard steers (A/D) and trims the sail (W/S); the boat's speed responds to wind angle. Add a calm/storm slider. Steady 60 fps on a laptop. One index.html plus local JS files only, no external assets or CDNs. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

Build a single self-contained HTML file that renders a real-time snow simulation in the browser with WebGPU compute (fall back to WebGL2 if WebGPU is missing). Requirements: at least 200k particles simulated on the GPU; wind field the user can change with the mouse; snow accumulates on a simple terrain heightmap and on two primitive objects (a box and a sphere) so drifts visibly build up over time; a footprint/trail when the user drags across the ground; on-screen FPS and particle count; a reset button. No external assets; CDN imports allowed. Aim for 60 FPS on a laptop GPU. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.

extended

Write a single self-contained HTML file that plays an original animated short film, about 50 seconds long, drawn entirely in code.

Hard technical rules:
- One file: HTML + inline <script> (+ optional inline <style>). No external images, fonts, libraries, audio files or network requests of any kind. Every frame is drawn procedurally with Canvas 2D (or WebGL if you prefer).
- The canvas renders at a fixed internal resolution of 1920x1080 and is scaled with CSS to fit the window (letterboxed, black background).
- The animation starts automatically on page load and is driven ONLY by requestAnimationFrame and the timestamp from performance.now() (measure elapsed time from the first frame). Everything on screen must be a pure function of elapsed time t, so the film is deterministic and can be captured frame by frame. No Math.random() at draw time — use a seeded PRNG / hash noise so frames are identical run to run. No setTimeout/setInterval for animation.
- Define window.FILM_DURATION (seconds). After the film ends, hold the final frame.
- Soundtrack: write an original WebAudio score (melody, chords, a little percussion or ambience, and sound cues that match story moments) synced to the same timeline. Put ALL audio scheduling in a function window.buildSoundtrack(ctx, startTime) that schedules every note/effect on any BaseAudioContext (so it also works on an OfflineAudioContext). Also expose window.renderSoundtrack = () => an OfflineAudioContext(2, 44100*FILM_DURATION, 44100) render of it returning a Promise<AudioBuffer>. For live viewing, start the soundtrack on the first click/tap/keypress (browsers block autoplay) aligned to the current film time; show a small unobtrusive "tap for sound" hint until then. Use only oscillators, noise buffers you generate, filters, gain envelopes — no samples.
- No console errors.

The film (this is a showcase of what you can animate — make it genuinely beautiful and moving):
- An ORIGINAL story with a small emotional arc (setup, a problem or longing, a turn, a warm resolution). A single consistent main character — any character you like — who appears in every scene and is recognisably the same design throughout.
- At least 4 distinct scenes, with real transitions between them (e.g. wipes, iris, match cuts, cross-dissolves, camera moves through space).
- Expressive character animation: a proper walk cycle (legs, arms, body bob), blinking, and facial emotion changes (e.g. curious, sad, surprised, joyful) that follow the story.
- A virtual camera that pans, zooms and tracks, with parallax layers for depth.
- Lighting and time-of-day changes across the film (e.g. dawn → day → dusk → night, or a storm clearing), with colour grading, glows, and shadows.
- Particles and weather (rain, snow, fireflies, leaves, dust, stars — your choice, at least two kinds).
- On-screen story text / subtitles in a tasteful storybook style that tell the story in a few short lines.
- A cohesive art direction: a warm, hand-made "paper cut-out / storybook" look is welcome (textured paper, soft edges, slight wobble), but choose what serves your story.
- End with a title of your film and a gentle closing frame.

Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>. No explanation, no markdown fences. Save it as index.html in the current directory. You may open it in headless chromium to check it and iterate.

===== mr_engine: next user turn, sent after the previous turn has finished =====

the design looks great but i feel like we can be more creative - add animations, cool graphics that you create with svgs or whatever (they could even move etc), etc, be creative!

harness

Write a single self-contained HTML file that plays an original animated short film, about 50 seconds long, drawn entirely in code.

Hard technical rules:
- One file: HTML + inline <script> (+ optional inline <style>). No external images, fonts, libraries, audio files or network requests of any kind. Every frame is drawn procedurally with Canvas 2D (or WebGL if you prefer).
- The canvas renders at a fixed internal resolution of 1920x1080 and is scaled with CSS to fit the window (letterboxed, black background).
- The animation starts automatically on page load and is driven ONLY by requestAnimationFrame and the timestamp from performance.now() (measure elapsed time from the first frame). Everything on screen must be a pure function of elapsed time t, so the film is deterministic and can be captured frame by frame. No Math.random() at draw time — use a seeded PRNG / hash noise so frames are identical run to run. No setTimeout/setInterval for animation.
- Define window.FILM_DURATION (seconds). After the film ends, hold the final frame.
- Soundtrack: write an original WebAudio score (melody, chords, a little percussion or ambience, and sound cues that match story moments) synced to the same timeline. Put ALL audio scheduling in a function window.buildSoundtrack(ctx, startTime) that schedules every note/effect on any BaseAudioContext (so it also works on an OfflineAudioContext). Also expose window.renderSoundtrack = () => an OfflineAudioContext(2, 44100*FILM_DURATION, 44100) render of it returning a Promise<AudioBuffer>. For live viewing, start the soundtrack on the first click/tap/keypress (browsers block autoplay) aligned to the current film time; show a small unobtrusive "tap for sound" hint until then. Use only oscillators, noise buffers you generate, filters, gain envelopes — no samples.
- No console errors.

The film (this is a showcase of what you can animate — make it genuinely beautiful and moving):
- An ORIGINAL story with a small emotional arc (setup, a problem or longing, a turn, a warm resolution). A single consistent main character — any character you like — who appears in every scene and is recognisably the same design throughout.
- At least 4 distinct scenes, with real transitions between them (e.g. wipes, iris, match cuts, cross-dissolves, camera moves through space).
- Expressive character animation: a proper walk cycle (legs, arms, body bob), blinking, and facial emotion changes (e.g. curious, sad, surprised, joyful) that follow the story.
- A virtual camera that pans, zooms and tracks, with parallax layers for depth.
- Lighting and time-of-day changes across the film (e.g. dawn → day → dusk → night, or a storm clearing), with colour grading, glows, and shadows.
- Particles and weather (rain, snow, fireflies, leaves, dust, stars — your choice, at least two kinds).
- On-screen story text / subtitles in a tasteful storybook style that tell the story in a few short lines.
- A cohesive art direction: a warm, hand-made "paper cut-out / storybook" look is welcome (textured paper, soft edges, slight wobble), but choose what serves your story.
- End with a title of your film and a gentle closing frame.

Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>. No explanation, no markdown fences. Save it as index.html in the current directory. You may open it in headless chromium to check it and iterate.

raw

Write a single self-contained HTML file that plays an original animated short film, about 50 seconds long, drawn entirely in code.

Hard technical rules:
- One file: HTML + inline <script> (+ optional inline <style>). No external images, fonts, libraries, audio files or network requests of any kind. Every frame is drawn procedurally with Canvas 2D (or WebGL if you prefer).
- The canvas renders at a fixed internal resolution of 1920x1080 and is scaled with CSS to fit the window (letterboxed, black background).
- The animation starts automatically on page load and is driven ONLY by requestAnimationFrame and the timestamp from performance.now() (measure elapsed time from the first frame). Everything on screen must be a pure function of elapsed time t, so the film is deterministic and can be captured frame by frame. No Math.random() at draw time — use a seeded PRNG / hash noise so frames are identical run to run. No setTimeout/setInterval for animation.
- Define window.FILM_DURATION (seconds). After the film ends, hold the final frame.
- Soundtrack: write an original WebAudio score (melody, chords, a little percussion or ambience, and sound cues that match story moments) synced to the same timeline. Put ALL audio scheduling in a function window.buildSoundtrack(ctx, startTime) that schedules every note/effect on any BaseAudioContext (so it also works on an OfflineAudioContext). Also expose window.renderSoundtrack = () => an OfflineAudioContext(2, 44100*FILM_DURATION, 44100) render of it returning a Promise<AudioBuffer>. For live viewing, start the soundtrack on the first click/tap/keypress (browsers block autoplay) aligned to the current film time; show a small unobtrusive "tap for sound" hint until then. Use only oscillators, noise buffers you generate, filters, gain envelopes — no samples.
- No console errors.

The film (this is a showcase of what you can animate — make it genuinely beautiful and moving):
- An ORIGINAL story with a small emotional arc (setup, a problem or longing, a turn, a warm resolution). A single consistent main character — any character you like — who appears in every scene and is recognisably the same design throughout.
- At least 4 distinct scenes, with real transitions between them (e.g. wipes, iris, match cuts, cross-dissolves, camera moves through space).
- Expressive character animation: a proper walk cycle (legs, arms, body bob), blinking, and facial emotion changes (e.g. curious, sad, surprised, joyful) that follow the story.
- A virtual camera that pans, zooms and tracks, with parallax layers for depth.
- Lighting and time-of-day changes across the film (e.g. dawn → day → dusk → night, or a storm clearing), with colour grading, glows, and shadows.
- Particles and weather (rain, snow, fireflies, leaves, dust, stars — your choice, at least two kinds).
- On-screen story text / subtitles in a tasteful storybook style that tell the story in a few short lines.
- A cohesive art direction: a warm, hand-made "paper cut-out / storybook" look is welcome (textured paper, soft edges, slight wobble), but choose what serves your story.
- End with a title of your film and a gentle closing frame.

Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>. No explanation, no markdown fences.

can you make a 3d game where you walk around and spot cats inside of a van gogh painting? we can start with stary night and its town

---
Deliverable: build this in the current folder as a self-contained web page that opens in a browser with index.html as the entry point (no build step; CDN imports are fine). Work autonomously and do not ask questions.

Create a single self-contained HTML file that renders an animated pixel art wizard casting a spell, using vanilla JavaScript and Canvas 2D. No external assets, libraries, or network requests.

RENDERING
- Draw everything to an offscreen canvas at a fixed logical resolution of 128x96, then blit to a fullscreen display canvas scaled by the largest integer factor that fits the window, centered, with imageSmoothingEnabled = false and CSS image-rendering: pixelated.
- All drawing snaps to integer coordinates on the logical canvas. No sub-pixel positions, anti-aliasing, gradients, or shadowBlur.
- Fixed palette of ~24 hex colors: deep blues/purples for night sky, warm robe tones, 3-4 bright magic colors. Every pixel comes from this palette.

CHARACTER
- Build the wizard procedurally from filled rects and pixel runs, ~24x32 logical pixels: pointed hat with a bend, long beard, two-shade robe with darker outline, staff with a gem at the tip.
- Parameterize the pose (staff angle, arm raise, head tilt, robe sway). Animate parameters smoothly, then quantize to the pixel grid each frame so motion reads at an 8-12 fps pixel animation feel even though the loop runs at 60fps.

ANIMATION
- Looping state machine: IDLE (2-frame bob, beard sway) -> CHARGE (staff raises, gem flickers, sparks spiral inward) -> CAST (bright burst, projectile fires across the scene, 1-2 pixel screen shake) -> RECOVER (settle back). Ease pose parameters between keyframes.
- Pooled allocation-free particle system: preallocate and reuse. Sparks orbit the gem during CHARGE, explode outward on CAST, each particle stepping its palette index from white to magic color to dark before despawn. Snap particle positions to the grid when drawing.
- Fixed 60hz timestep update with rAF rendering. Zero object allocation inside the loop.

SCENE
- Minimal background: dark sky, a few twinkling 1px stars, moon, stone floor line. Character silhouette must read clearly.
- Subtle 1px rim light on the wizard from the gem, brightening during CHARGE and CAST.

QUALITY BAR
- Crisp pixels at any window size, seamless loop, stable 60fps, readable silhouette. Should look like a polished 16-bit sprite animation, not vector shapes scaled down.

---
Deliverable: build this in the current folder as a self-contained web page that opens in a browser with index.html as the entry point (no build step; CDN imports are fine). Work autonomously and do not ask questions.

make a Tron game.

---
Deliverable: build this in the current folder as a self-contained web page that opens in a browser with index.html as the entry point (no build step; CDN imports are fine). Work autonomously and do not ask questions.

Ink Bloom Garden: A dark canvas where every click plants an ink-drop flower that grows outward in branching, feathered petals over three seconds using layered translucent strokes. Petal colour drifts with the mouse's horizontal position. Space clears the canvas with a slow fade; S saves the current canvas as a PNG.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Pendulum Wave: Fifteen pendulums hung side by side, each with a slightly different period so that together they form travelling waves, snakes and brief alignments that repeat every 60 seconds. Show a slider for playback speed, a reset button, and draw a faint trail behind each bob.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Orbital Coffee Landing: A landing page for an invented specialty coffee roaster: a full-height hero with a CSS-drawn steaming cup, three origin cards that tilt in 3D toward the cursor, a scroll-triggered brew timeline, and a sticky header that shrinks after 80px of scrolling. Fully responsive down to 360px.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Brick Breaker Neon: A neon brick-breaker: a paddle follows the mouse or arrow keys, the ball bounces off six rows of glowing bricks, and destroyed bricks burst into particles. Include three lives, a score, a level-two layout after clearing, a pause on P, and a game-over screen with restart.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Focus Timer Orbit: A focus-session timer drawn as a planet orbiting a sun: a full orbit equals the session length. It supports 25/5 work/break cycles with editable durations, start/pause/reset, a counter of completed sessions, and a soft synthesised chime at each transition generated with WebAudio.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Rainfall Bars: An animated bar chart of monthly rainfall for an invented city (Jan 78mm, Feb 64, Mar 55, Apr 40, May 22, Jun 10, Jul 8, Aug 12, Sep 30, Oct 52, Nov 70, Dec 85). Bars fill like rain gauges, hovering shows a tooltip, and a toggle switches between millimetres and inches.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Kinetic Headline: The phrase MAKE SOMETHING WEIRD in huge letters, where each letter is an independent element that scatters away from the cursor on a spring and eases back home. Clicking cycles through three typefaces from generic font families; letters wobble slightly while idle.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Pocket Theremin: A full-screen theremin: horizontal mouse position sets pitch across two octaves on a pentatonic scale, vertical position sets volume and vibrato depth. Holding the mouse down plays a WebAudio oscillator; a glowing trail and a live waveform display follow the pointer. Keys 1-4 switch waveform.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Forest Fire Automaton: A cellular-automaton forest on a 150x100 grid: trees regrow with probability p, lightning strikes with probability f, and fire spreads to neighbours. Sliders adjust p and f live, a counter shows live trees, burning cells glow orange to red, and a click drops a spark.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Toggle Switch Gallery: A gallery of eight distinct toggle switch designs on a neutral grid: day/night, liquid blob, rocker, pill with icon, 3D push, checkbox morph, skeuomorphic lever and minimalist line. Each animates smoothly between states, is keyboard accessible, and shows its current state label underneath.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Pure CSS Sunset: A layered sunset over rolling hills built entirely with CSS gradients, shapes and keyframe animation, with no canvas or script: the sun sinks over 20 seconds, the sky shifts from gold to violet, stars fade in, and a small silhouetted windmill turns on a hill.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Magnetic Filings: Thousands of short iron-filing strokes on a pale background align to the field of two draggable magnets, one red north and one blue south. Strokes recompute live as magnets are dragged; a double click adds a third magnet and a button flips each polarity.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Soft Body Blobs: Five jelly-like blobs made of spring-connected points fall into a box, squish on impact and jostle each other. The user can grab and fling any blob with the mouse. A gravity slider and a button that tilts the box left or right are included.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Snake Reimagined: A modern snake game on a 24x24 grid with smooth interpolated movement, a gradient body that tapers to the tail, food that pulses, and walls that wrap. Speed increases every five apples. Show score and best score (saved in localStorage) and support arrows, WASD and swipe.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Color Palette Studio: A palette generator: press space to generate five harmonious colours (choose analogous, complementary, triadic or monochrome), click a swatch to lock it, and show each colour's HEX, RGB and a WCAG contrast rating against white and black. Clicking a code copies it with a toast.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Heartbeat Line: A live ECG-style monitor that scrolls a heartbeat trace across a dark grid, with a BPM readout, a slider from 40 to 180 BPM that changes the rhythm in real time, a red flash on each beat, and an optional synthesised beep per beat.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Typewriter Poem: A vintage typewriter page that types out a short original eight-line poem character by character with slight timing randomness, ink density variation and occasional struck-through corrections. Each keystroke plays a synthesised click, a bell rings at each line end, and a replay button restarts it.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Step Sequencer Grid: A 16-step, 8-row drum and synth sequencer with a lit grid. Kick, snare, hat and clap are synthesised with WebAudio, plus four pentatonic notes. Includes a tempo slider (60-180 BPM), a moving playhead, clear and randomise buttons, and swing control.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Zoom to the Atom: A cinematic 3D motion graphic that plays one continuous camera zoom lasting about 40 to 60 seconds, from the scale of a building down to a single atom, with no cuts. The journey, in order: a long aisle in a datacenter lined with glowing server racks; the camera approaches one rack; a server slides out and its lid opens; inside, a generic graphics card (no real brand names or logos) comes apart in an exploded view; the camera dives into the chip package, then the bare silicon die with its grid of functional blocks; into one circuit block with layered metal interconnects; down to a single transistor (gate, source, drain, channel); into the silicon crystal lattice; and it ends on one glowing silicon atom with its nucleus and electron shells. Each stage is modelled in 3D with its own lighting and colour mood, transitions are smooth and continuous (scale changes blended so the viewer never sees a jump), and a clean on-screen label with the approximate scale (for example "Datacenter, ~100 m" down to "Silicon atom, ~0.2 nm") fades in at each stage. Show a thin progress bar, and a Replay button when the sequence ends; clicking or tapping pauses and resumes.

Build it as ONE self-contained HTML file with inline CSS and JavaScript. You may load three.js (and its addons) from a public CDN via an import map or script tag; no other external requests (no image, texture, model, font or audio files): make every shape and texture in code. It must work when opened directly from disk in a current desktop or mobile browser, fit the window responsively, keep a smooth frame rate, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Koi Pond Garden: A calm, interactive Japanese garden seen from above at a gentle three-quarter angle, centred on a koi pond. The water must read as clear and refractive: you can see the pebbled pond floor and the koi through it, distorted by soft ripples, with caustic light patterns moving across the bottom and a subtle surface reflection and sheen. At least seven koi with detailed, varied patterned skin (kohaku, showa, ogon, tancho and similar), flowing fins and tails, swim naturally in smooth, unhurried curves, avoid each other and the pond edge, and occasionally rise near the surface. Surround the pond with natural stones and mossy rocks of varied shapes and textures, grasses, a few plants and flowers, floating lily pads (some with blossoms), and at least one small stone lantern or similar garden detail. Lighting should be warm and soft, with believable shadows.

Interaction: clicking or tapping the water drops a few food pellets that splash, float and slowly sink; nearby koi notice them, swarm toward them and visibly eat them (each pellet disappears when a fish reaches it), then disperse. At least two frogs sit on lily pads; clicking or tapping a frog makes it leap in an arc to another pad or into the water with a splash and rings of ripples. Clicking the water anywhere also sends out ripples. The camera can be orbited gently with a drag and zoomed within limits, but must not flip under the ground.

Build it as ONE self-contained HTML file with inline CSS and JavaScript. You may load three.js (and its addons) from a public CDN via an import map or script tag; no other external requests (no image, texture, model or audio files): make every texture and shape in code (procedural canvas textures, shaders or geometry). It must work when opened directly from disk in a current desktop or mobile browser, support both mouse and touch, fit the window responsively, keep a smooth frame rate, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Make me a donut in Blender. Blender 5.2 is already running on this machine with the MCP for Blender add-on connected: build the scene in that Blender through the blender MCP tools (its window is on a virtual screen and there is no GPU, so render on the CPU). When you are finished, set up a camera and render the final image at 1920x1080, saving it as render.png in the current directory (Blender's working directory is this same folder), and save the Blender file as scene.blend here too. You may take viewport screenshots and look at your own renders to check your work, and iterate on your own before finishing.

[Task]
Create a 28-second, 1920x1080, 30 fps cinematic replay of a short original chess game on a code-drawn board, with move arrows, a swinging evaluation bar and a final checkmate highlight.

[Scenes]
1. 0-4 s: The camera glides low over a polished board as the squares tile in diagonally and vector pieces rise into place with a soft spring. A title card reads LAKEPORT OPEN 1974, ROUND 3: A. MORVANE vs J. TESSALY.
2. 4-12 s: The camera settles to a 3/4 overhead view. Moves 1-5 play briskly, about 0.8 s per ply. Each move draws a translucent arrow, the piece slides along it, and the move in notation appears in a scrolling move list at the right. The eval bar at the left eases with every ply.
3. 12-17 s: Move 6.Nxe5 plays in slow motion. The camera pushes toward d1, the white queen pulses as if left hanging, and the caption reads THE QUEEN IS OFFERED.
4. 17-22 s: 6...Bxd1. The bishop captures and the queen shatters into seeded vector shards. Then the eval bar slams to full white, with a light flash along it and a counter that reads M2.
5. 22-26 s: 7.Bxf7+ Ke7 8.Nd5#. Each check draws a red ray to the king. On mate, every square the king could flee to is tinted in turn, then crossed out, and the mated king tips over.
6. 26-28 s: The camera rises to top-down, all pieces except the mating net dim, and the caption reads 1-0, MATE IN EIGHT.

[Style]
Palette: #14110F walnut dark, #E9DCC3 light squares, #8A5A3C dark squares, #F5F1E8 white pieces, #1C1C1C black pieces, #E63946 check accent. A classical serif for titles and a crisp mono for notation. Warm key light from the upper left, soft contact shadows, and a subtle wood grain built from layered strokes. Motion: pieces lift, travel on an ease-in-out cubic arc and land with a tiny settle. Arrows draw in over 8 frames.

[Data]
Moves: 1.e4 e5 2.Nf3 Nc6 3.Bc4 d6 4.Nc3 Bg4 5.h3 Bh5 6.Nxe5 Bxd1 7.Bxf7+ Ke7 8.Nd5#
Evaluation after each ply (white's view): start +0.2; 1.e4 +0.3, e5 +0.2, Nf3 +0.3, Nc6 +0.2, Bc4 +0.3, d6 +0.6, Nc3 +0.5, Bg4 +0.6, h3 +0.5, Bh5 +1.4, Nxe5 +2.8, Bxd1 M2, Bxf7+ M1, Ke7 M1, Nd5# 1-0.

[Wow]
- A continuous camera that orbits, pushes and rises with depth of field on the board, never cutting.
- Pieces cast moving shadows from a single consistent light.
- The eval bar is liquid: it sloshes with spring overshoot and glows red-white at mate.
- Captured pieces burst into deterministic particle shards that drift to a side tray.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- Every move must be legal and the board state must exactly follow the move list.

[Harness notes] Render the final video to out.mp4 (1920x1080, 28 s). Write everything into the working directory. Remotion 4.0.527 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or create-video, and a remotion.config.ts here already points rendering at the local Chromium. Render the final video yourself to out.mp4 in the current directory (for example npx remotion render <entry file> <composition id> out.mp4). You may render stills or frames and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create a 30-second explainer video, 1920x1080 at 30 fps, that follows one microchip through fabrication. Each stage is an animated cutaway diagram with clean labels, and a persistent progress rail tracks the journey.

[Scenes]
1. 0-4 s: A glowing silicon ingot rotates in 3/4 view. A wire saw slices it, and one wafer tips toward camera, filling the frame with an iridescent mirror surface. The title "Sand to Silicon" sets in, then shrinks into the top-left. The progress rail draws itself along the bottom with six nodes.
2. 4-9 s: Photolithography. The camera dives into a magnified cross-section with substrate, oxide and photoresist layers. A UV light cone passes through a mask pattern, and exposed resist cells light up and dissolve away. Label: "Photolithography: pattern transferred with light".
3. 9-14 s: Etching. A plasma glow sweeps across the cutaway, and unprotected oxide recedes cell by cell into crisp trenches. Particle ions rain down in angled streaks. Label: "Etching: carving the pattern".
4. 14-19 s: Doping. An ion beam fires dopant dots that embed in the trench floors. A heat shimmer diffuses them into soft gradient wells marked n and p. A transistor outline traces itself over the wells.
5. 19-24 s: Dicing. The camera pulls back out to the full wafer, now tiled with hundreds of tiny dies. A diamond blade scores a grid with sparks, and one die lifts free and spins toward camera.
6. 24-30 s: Packaging. Gold bond wires arc from die to lead frame, an epoxy shell folds closed, and pins bend down. The finished chip lands on a circuit-trace background that pulses with light. All six rail nodes glow, and the end card reads "Six steps. Billions of transistors."

[Style]
Palette: #0B0F1A (deep navy), #1FD1C1 (cyan), #F2B134 (gold), #E8ECF4 (paper white), #8A5CF6 (UV violet). Type is a precise geometric sans with monospaced micro-labels. The lighting is a clean-room glow with soft bloom on light sources and thin hairline leader lines. Motion uses ease-in-out cubic for camera moves, gentle springs for labels popping in, and a 40 ms stagger for repeated cells.

[Wow]
- Continuous zoom: the camera travels from wafer scale to nanometre cutaway and back without a break, with the scale bar re-labelling live (mm, then µm, then nm).
- Thin-film interference shimmer on the wafer surface that shifts with camera angle.
- Ion and plasma particle systems, seeded and directional, that interact with the layer geometry.
- The progress rail morphs its active node into each scene's key icon.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- Cross-section layers keep consistent colours across all scenes so viewers can track each material.

[Harness notes] Render the final video to out.mp4 (1920x1080, 30 s). Write everything into the working directory. Remotion 4.0.527 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or create-video, and a remotion.config.ts here already points rendering at the local Chromium. Render the final video yourself to out.mp4 in the current directory (for example npx remotion render <entry file> <composition id> out.mp4). You may render stills or frames and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create a 24-second, 1920x1080, 30 fps data film showing the fictional Republic of Valtoria's energy flows as an animated Sankey diagram from sources to uses, morphing between 2000, 2015 and 2030.

[Scenes]
1. 0-3 s: Darkness, then thin light filaments drift in from the left. The title VALTORIA: WHERE THE ENERGY GOES assembles letter by letter, then dissolves into the source nodes.
2. 3-9 s: Year 2000. Seven source bars rise on the left with labels and TWh values. Ribbons pour rightward like liquid with a moving shimmer, splitting into the four use nodes on the right. A large 2000 sits in the background.
3. 9-15 s: The year numeral rolls to 2015. Every ribbon width and node height morphs smoothly and nodes re-sort by size with springy reflow. Value labels count to their new totals. Wind and Solar ribbons pulse once.
4. 15-21 s: Rolls to 2030. Coal thins to a thread and greys out, while Wind and Solar swell and brighten. The camera dollies slightly toward the right side, where Losses shrinks.
5. 21-24 s: Ribbons freeze into a glowing still. A ring gauge morphs out of the renewable ribbons and shows the renewable share climbing 5.3% to 12.7% to 45.4%. Closing caption: A DECADE-BY-DECADE REWIRING.

[Style]
Palette: #0A0F1E night navy, #5A5F6E coal, #E8A33D oil/gas amber, #9B7BFF nuclear, #2FD3C4 hydro/wind, #FFE066 solar. Elegant wide sans for titles, tabular figures for values. Ribbons are semi-translucent with additive glow where they overlap, and there is fine film grain. Motion: long ease-in-out sine for the morphs, a slight spring on node reflow, and a 50 ms stagger per ribbon.

[Data]
Source totals in TWh (2000 / 2015 / 2030):
Coal 420 / 300 / 60
Oil 380 / 360 / 220
Gas 260 / 330 / 240
Nuclear 120 / 110 / 130
Hydro 60 / 65 / 70
Wind 5 / 70 / 260
Solar 1 / 25 / 210
Totals: 1246 / 1260 / 1190. Renewables (Hydro, Wind, Solar): 66, 160, 540.
Each source splits to uses in fixed percentages (Industry / Transport / Homes / Losses):
Coal 55/0/15/30, Oil 15/75/5/5, Gas 35/5/45/15, Nuclear 40/5/35/20, Hydro 40/5/45/10, Wind 40/10/40/10, Solar 30/10/50/10.
Use node values are the sums of the flows.

[Wow]
- Ribbons have flowing internal particle streams whose speed scales with flow size, using seeded particles.
- Morphs interpolate ribbon geometry with no popping. A ribbon that drops to zero fades to a hairline.
- The background year numerals roll like an odometer with motion blur.
- Gentle parallax separates three depth layers: background numerals, ribbons and labels.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- Ribbon widths must be proportional to the computed flows in every year.

[Harness notes] Render the final video to out.mp4 (1920x1080, 24 s). Write everything into the working directory. Remotion 4.0.527 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or create-video, and a remotion.config.ts here already points rendering at the local Chromium. Render the final video yourself to out.mp4 in the current directory (for example npx remotion render <entry file> <composition id> out.mp4). You may render stills or frames and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create a 30-second telemetry visualisation, 1920x1080 at 30 fps, of one qualifying lap by car #27 (driver R. Lindqvist, team Halvard Racing) at the fictional Valtero Park circuit. A track map and live traces run in sync, ending in a delta reveal.

[Scenes]
1. 0-3 s: Darkness. A racing line draws the circuit outline in one stroke, and corner labels T1-T8 pop in. The title "Q3 // Valtero Park" slides in, and three empty trace lanes (Speed, Throttle, Brake) unfold beneath.
2. 3-11 s: Sector 1. The car dot launches, leaving a speed-coloured trail. All three traces draw left to right in lockstep with the dot. A digital speedometer counts live. At T1 the brake lane spikes red and the camera punches in on the corner.
3. 11-19 s: Sector 2. The camera drifts across the map. The trace view auto-scrolls, and the T3 and T5 hairpin minima get annotated callouts. The sector time locks in with a purple flash, marking a personal best.
4. 19-26 s: Sector 3. The car flows through T7 and T8, and the trail completes the loop. The S3 time locks in.
5. 26-30 s: The map zooms out. The three sector tiles assemble into a lap time of 1:20.453, a ghost trace of the previous pole overlays the data, and the delta counts to -0.158 in green. Final text: "Provisional Pole".

[Style]
Palette: #07090D (carbon black), #E10600 (brake red), #00E676 (throttle green), #B388FF (purple best), #F5F7FA (white). Type is a condensed technical sans with tabular figures. Lighting uses glowing strokes, faint carbon-weave texture and scanline sheen. Motion is snappy, with quick ease-out expo, tight springs on tiles and a hard-edged 4-frame stagger.

[Data]
Samples every 200 m (lap 4,800 m), listed as distance m: speed km/h / throttle % / brake %.
0:298/100/0, 200:312/100/0, 400:318/100/0, 600:142/0/95, 800:96/30/0, 1000:168/85/0, 1200:224/100/0, 1400:262/100/0, 1600:281/100/0, 1800:118/0/90, 2000:134/45/0, 2200:201/95/0, 2400:248/100/0, 2600:276/100/0, 2800:291/100/0, 3000:84/0/100, 3200:122/40/0, 3400:188/90/0, 3600:236/100/0, 3800:264/100/0, 4000:172/20/60, 4200:158/60/0, 4400:241/100/0, 4600:289/100/0.
Sectors: S1 26.412 (green), S2 31.087 (purple), S3 22.954 (green). Previous pole: 1:20.611.

[Wow]
- The dot, traces and speedometer are frame-locked to the same distance variable.
- The trail colour is mapped continuously to speed via a gradient.
- Corner punch-in camera moves with motion-blurred trails.
- Odometer-style rolling digits for all timing values.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- Use the dataset exactly. Interpolate smoothly between samples.

[Harness notes] Render the final video to out.mp4 (1920x1080, 30 s). Write everything into the working directory. Remotion 4.0.527 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or create-video, and a remotion.config.ts here already points rendering at the local Chromium. Render the final video yourself to out.mp4 in the current directory (for example npx remotion render <entry file> <composition id> out.mp4). You may render stills or frames and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create a 25-second, 1920x1080, 30 fps cinematic simulation of two spiral galaxies colliding over 1.2 billion years. It ends with the merged elliptical galaxy and runs a time counter throughout.

[Scenes]
1. 0-4 s: Deep black field with faint background stars. Two spiral galaxies rotate as they approach on a curved path: Aurel, large and blue-white, and Nym, smaller and amber. The camera slowly pushes in, and the counter reads "0 Myr".
2. 4-9 s: First pass. The disks interpenetrate and a luminous tidal bridge forms. The camera orbits 30 degrees around the pair to show depth.
3. 9-14 s: The galaxies separate to maximum distance. Two long tidal tails sweep out in arcs, and pink starburst knots ignite along them. The camera tracks one tail.
4. 14-19 s: Second infall. The cores spiral together and dust lanes twist. A brief bright flare marks core coalescence.
5. 19-25 s: The stars relax into a smooth, glowing elliptical galaxy with faint shells. The camera pulls back to a wide frame. Title: "AUREL-NYM, 1.2 BILLION YEARS".

[Style]
Palette: void #05060B, young stars #9CC8FF, old stars #FFC27A, starburst #FF5FA2, dust #3B2A24, label #E8ECF5. Use a thin, wide-tracked sans for labels and tabular numerals for the counter. Stars are additive points with bloom, and dust is dark absorbing wisps. The camera moves on slow ease-in-out curves, and labels fade and slide 12 px.

[Data]
Aurel: 18,000 particles, mass 2.0.
Nym: 9,000 particles, mass 1.0.
Orbit: prograde.
Milestones (time, label):
- 0 Myr: Approach
- 250 Myr: First pass
- 520 Myr: Maximum separation
- 780 Myr: Second infall
- 1,000 Myr: Core coalescence
- 1,200 Myr: Relaxed elliptical

[Wow]
- Star motion comes from a seeded, precomputed restricted N-body integration, so the tails emerge physically rather than being keyframed.
- The 3D particle field supports parallax during the camera orbit, with depth-sorted dust that occludes stars.
- Particle colour shifts from blue to amber as the population ages, and starburst knots flash at the bridge.
- The time counter accelerates nonlinearly, and a thin timeline at the bottom pops each milestone label on.
- A soft lens bloom pulses at core coalescence.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- The time counter only moves forward and matches the milestone times.

[Harness notes] Render the final video to out.mp4 (1920x1080, 25 s). Write everything into the working directory. Remotion 4.0.527 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or create-video, and a remotion.config.ts here already points rendering at the local Chromium. Render the final video yourself to out.mp4 in the current directory (for example npx remotion render <entry file> <composition id> out.mp4). You may render stills or frames and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create a 25-second 'year in review' motion-graphics video, 1920x1080 at 30 fps, celebrating the coding year of a fictional developer, Juniper Okafor (@juniperbyte), on a fictional code platform called Forgeline.

[Scenes]
1. 0-3 s: A black void. One small green square pulses, splits into seven, then 371. The title 'Juniper's 2024, compiled' types in with a blinking cursor.
2. 3-9 s: The squares settle into a 53x7 contribution heatmap tilted in 3D. Weeks fill left to right in a sweeping wave, with colour intensity driven by the data. A counter climbs to 2,847 contributions. The camera dollies along the grid, and the busiest day lifts out of the grid as a glowing column labelled 'Mar 14 - 41 contributions'.
3. 9-14 s: Heatmap cells detach and stream in arcs into a donut chart of top languages. Segments grow clockwise with staggered labels and percentages.
4. 14-18 s: The donut collapses into a horizontal day strip. A streak counter rolls from 0 to 61 while a flame built from particles grows above the strip. The caption reads 'Longest streak: Aug 3 - Oct 2'.
5. 18-22 s: Four cards drop in and flip one by one on a 3D Y-axis to reveal the summary stats.
6. 22-25 s: The cards fold into a single hexagonal badge reading '@juniperbyte - 2024 shipped'. The heatmap glows faintly behind it.

[Style]
Palette: #0B0F14 background, #1B2430 cells, #39D98A, #7CF5C4, #FFB547 accent, #F2F5F7 text. Monospaced headings with a clean geometric sans for body text. Soft bloom on bright cells, faint scanline grain. Motion uses spring physics (low damping on pops) with 30 ms stagger per column.

[Data]
Monthly contributions, Jan to Dec: 180, 205, 310, 240, 198, 156, 172, 288, 341, 302, 236, 219 (total 2,847). Daily cells come from the monthly totals using a seeded PRNG (seed 2024). Mar 14 is fixed at 41.
Languages: Rust 38%, TypeScript 27%, Go 16%, Python 11%, Shell 8%.
Streak: 61 days.
Cards: Top repo 'lanternfs' 612 commits; PRs merged 184; Reviews given 233; Issues closed 97.

[Wow]
- The heatmap fill is a true 3D wave: cells rise on z, then settle, with light raking across them.
- Cell-to-donut particle transfer, where each language takes a proportional share of the cells.
- Every number uses odometer-style rolling digits.
- Card flips show distinct front and back faces with real perspective and a specular glint.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- All displayed numbers must match the dataset exactly.

[Harness notes] Render the final video to out.mp4 (1920x1080, 25 s). Write everything into the working directory. Remotion 4.0.527 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or create-video, and a remotion.config.ts here already points rendering at the local Chromium. Render the final video yourself to out.mp4 in the current directory (for example npx remotion render <entry file> <composition id> out.mp4). You may render stills or frames and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create a 24-second synthwave music visualiser at 1920x1080, 30 fps. It plays an original 120 BPM soundtrack synthesised entirely in code, and every visual is locked to the same beat grid: one beat = 0.5 s = 15 frames, and one bar = 4 beats.

[Scenes]
1. 0-4 s: Black screen. A single scanline sweeps down, then a magenta horizon line ignites from the centre outward. A filtered pad swells in, and the camera starts a slow dolly forward over a neon perspective grid that emerges from the dark.
2. 4-8 s: The kick enters on every beat. A striped sun rises behind the horizon, its horizontal gaps widening toward the bottom. On each kick the camera bumps forward and down by 8 px with a fast spring settle, and the grid lines flash brighter.
3. 8-14 s: Bass and hi-hats join. 32 equaliser bars rise along the horizon and are mirrored as blurred reflections on the grid floor. The title "NIGHTDRIVE 88" types in one letter per beat, in chrome gradient with a cyan outline.
4. 14-20 s: A lead arpeggio enters. The camera banks into a slow 6-degree roll and drifts left past two parallax layers of wireframe mountains. Snares on beats 2 and 4 trigger a brief chromatic-aberration split on the title.
5. 20-24 s: Breakdown. The kick drops out, the bars collapse in a staggered right-to-left cascade and the sun sinks. The grid fades back to the lone magenta horizon line while the audio decays to the opening pad, so the video loops.

[Style]
Palette: #0B0221 night, #FF2A6D magenta, #05D9E8 cyan, #FFB86C sun orange, #D1F7FF pale glow. Type is a wide geometric display face with italic chrome treatment. Add strong bloom, CRT scanlines, a soft vignette and seeded film grain. Motion is quantised to the 15-frame beat: springs for bumps, ease-out cubic for reveals and one-beat staggers.

[Wow]
- The soundtrack has kick, sub bass, closed hats, snare on 2 and 4, a detuned pad and an arpeggio in A minor (Am, F, C, G, one chord per bar). It is built from oscillators, noise and envelopes, then rendered to an audio track muxed with the video.
- Visuals react to the real generated signal. Bar heights come from per-band energy, and the sun glow follows bass energy. Nothing is hand-keyed.
- The grid scrolls exactly one row per beat, and the camera bump peaks on the kick frame.
- 300 seeded stars sit in three depth layers with parallax during the camera roll.
- Sun stripes drift downward continuously and shimmer in the floor reflection.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- All audio is generated in code; no samples or audio files.
- Audio and picture stay frame-accurate on the 120 BPM grid for the full 24 s.

[Harness notes] Render the final video to out.mp4 (1920x1080, 24 s). Write everything into the working directory. Remotion 4.0.527 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or create-video, and a remotion.config.ts here already points rendering at the local Chromium. Render the final video yourself to out.mp4 in the current directory (for example npx remotion render <entry file> <composition id> out.mp4). You may render stills or frames and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create a 30-second cinematic motion-graphics video, 1920x1080 at 30 fps, of an original rocket, the Kestrel IV, launching from a coastal pad and reaching orbit under a live telemetry HUD.

[Scenes]
1. 0-5 s: Dusk over a coastal launch pad. A slow push-in from a wide shot. Cryogenic vapour curls off the rocket's frosted first stage. Three gantry arms retract one after another. A small mono label reads 'PAD 39-K / T-00:00:10'.
2. 5-9 s: Countdown. Giant numerals 5, 4, 3, 2, 1 slam in one per 0.8 s. Each digit splits horizontally and slides apart to reveal the next. Camera shake builds frame by frame. At 9 s the word IGNITION flashes in white.
3. 9-15 s: Liftoff. The engine bell blooms with light and a particle plume pours sideways into billowing exhaust clouds. The camera tilts up to track the climb. The HUD assembles itself from corner brackets: T+ clock, altitude, velocity, downrange distance and a throttle bar.
4. 15-20 s: Climb through Max-Q. The sky grades from orange to deep indigo and the first stars appear. Shock diamonds pulse in the exhaust. A MAX-Q callout pops in, and a small graph traces the ascent curve live.
5. 20-25 s: Stage separation. The camera arcs to a side profile. A pyro ring flashes, the spent first stage tumbles away and two interstage panels spin off. The second stage lights with a thin blue flame. HUD: STAGE SEP CONFIRMED.
6. 25-30 s: Orbit insertion. The camera pulls far back to reveal the planet's curved limb and a thin atmosphere glow. A dotted orbit ellipse draws itself and the rocket icon settles onto it. HUD reads ORBIT NOMINAL 412 x 418 km, then resolves into the title card KESTREL IV / MISSION 07.

[Style]
Palette: #0B1026 night, #FF7A3D flame, #FFD9A0 glow, #5FE1FF HUD cyan, #F2F4F8 white. The HUD uses a condensed technical sans with tabular digits. The countdown uses a heavy display sans. Add volumetric glow, soft film grain and atmospheric haze. Moves ease with expo-out. HUD panels arrive with springy overshoot and a 60 ms stagger.

[Wow]
- The exhaust is a seeded particle system of at least 2,000 particles, with heat-coloured lifetimes and smoke that expands and drifts.
- Parallax depth: clouds, sea, pad and sky move at distinct rates during the tilt-up.
- The countdown digits cast light onto the scene, and the rocket body is rim-lit by the flame.
- Telemetry values tick continuously and follow physically plausible curves.
- The camera move is continuous from pad to orbit, with no static frames.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- Altitude and velocity only increase after liftoff, and they stay consistent with the T+ clock.

[Harness notes] Render the final video to out.mp4 (1920x1080, 30 s). Write everything into the working directory. Remotion 4.0.527 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or create-video, and a remotion.config.ts here already points rendering at the local Chromium. Render the final video yourself to out.mp4 in the current directory (for example npx remotion render <entry file> <composition id> out.mp4). You may render stills or frames and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create a 24-second cinematic motion-graphics video, 1920x1080 at 30 fps, showing a fictional satellite constellation called HALCYON-6 deploying around Earth plane by plane until global coverage locks in.

[Scenes]
1. 0-4 s: Black space with faint stars. A night-side Earth rotates slowly into frame, with city-light dots, a glowing atmosphere rim and a sharp day-night terminator. The title HALCYON-6 assembles letter by letter, then slides into a top-left HUD.
2. 4-9 s: Plane 1 draws itself as a thin luminous ellipse, tilted 53 degrees. Eight satellites pop onto it in a staggered sequence and begin orbiting. Each satellite projects a soft circular footprint onto the surface. Plane 2 follows at a 60-degree offset. The coverage counter in the bottom-right counts up to 31%.
3. 9-15 s: The camera orbits 40 degrees around Earth. Planes 3, 4 and 5 deploy in quick succession. Their footprints overlap, and where two overlap the colour brightens additively. The counter climbs to 82%.
4. 15-20 s: Plane 6 completes the shell. The camera pulls back to show all 48 satellites. Thin cyan inter-satellite laser links flicker on between neighbours, forming a moving mesh.
5. 20-24 s: The remaining dark gaps on the globe fill in. The counter lands on 97.4% with a gentle overshoot and settle. The rings fade to a single pulse, and the end card reads COVERAGE ACHIEVED.

[Style]
Palette: #05070F space, #0E2A47 ocean, #F2B544 city lights, #3EE6FF orbits and links, #FF5E7A footprint highlights, #E8EEF5 type. Use a clean monospaced HUD font for the numbers and a wide geometric sans for the titles. Add soft bloom on the orbits, subtle film grain and a rim light from an off-screen sun at the right. Motion is calm and orbital: ease-in-out cubic camera moves, spring overshoot on counters and stagger on satellite spawns.

[Data]
Constellation: 6 planes, 8 satellites per plane, altitude 1,150 km, inclination 53 degrees.
Coverage after each plane: 1: 14%, 2: 31%, 3: 49%, 4: 66%, 5: 82%, 6: 97.4%.
HUD labels: PLANE n/6, SATS n/48, ALT 1,150 km.

[Wow]
- A true 3D orbital camera move with depth: satellites behind Earth are occluded, and the rings pass correctly in front of and behind the globe.
- Footprints are projected onto the sphere's curvature, not drawn as flat circles.
- Laser links shimmer along their length with travelling light packets.
- The HUD has a parallax layer: grid lines and readouts drift slightly opposite to the camera move.
- The counter digits roll like an odometer rather than swapping.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- The coverage counter must match the dataset value at the moment each plane completes.

[Harness notes] Render the final video to out.mp4 (1920x1080, 24 s). Write everything into the working directory. Remotion 4.0.527 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or create-video, and a remotion.config.ts here already points rendering at the local Chromium. Render the final video yourself to out.mp4 in the current directory (for example npx remotion render <entry file> <composition id> out.mp4). You may render stills or frames and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create a 28-second motion-graphics video, 1920x1080 at 30 fps, in which four sorting algorithms race side by side on the same 60-bar array, with live comparison counters and a finish podium.

[Scenes]
1. 0-3 s: Sixty bars drop from above into one row with a bouncy spring. The row duplicates into four stacked lanes as the camera pulls back. Lane labels slide in: Bubble Sort, Insertion Sort, Merge Sort, Quicksort.
2. 3-19 s: The race. All lanes advance in lockstep at exactly 4 comparisons per frame. Compared bars flash, and swapped bars hop past each other on short arcs. Each lane shows a live comparison counter and a swap counter. When a lane finishes, a green sweep runs left to right, its finish time locks (e.g. '2.3 s'), and a rank number stamps in.
3. 19-23 s: The lanes compress and slide left. The final comparison totals become a horizontal bar chart, growing with stagger.
4. 23-28 s: The camera swings in 3D to a podium built from bars. The top three lane icons rise onto it, and confetti made of tiny bars falls. The title reads 'Same array. Different strategies.'

[Style]
Palette: #0E0E12 background, #2A2D3A idle bars, #4CC9F0 compare, #F72585 swap, #B8F35A sorted, #F5F3EE text. Condensed technical sans for labels and tabular figures for counters. Subtle grid floor with soft reflections under the bars. Snappy motion: ease-out-cubic hops, spring settle on finish.

[Data]
Array (bar heights 1-60, left to right): 37,13,50,26,2,39,15,52,28,4,41,17,54,30,6,43,19,56,32,8,45,21,58,34,10,47,23,60,36,12,49,25,1,38,14,51,27,3,40,16,53,29,5,42,18,55,31,7,44,20,57,33,9,46,22,59,35,11,48,24.
Quicksort uses a Lomuto partition with the last element as pivot. Merge sort is top-down. Counters must reflect the true operation counts of these exact implementations.

[Wow]
- Slow continuous camera drift that tilts across the lanes, giving parallax between bars and floor reflection.
- Quicksort pivots glow with a vertical light beam. Merge sort shows sub-array brackets splitting and joining.
- The bubble lane, finishing last, gets a tense close-up push-in for its final passes.
- Counter digits pulse on a 120 BPM grid during the race.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- The algorithms must actually run on the given array; no faked animation.

[Harness notes] Render the final video to out.mp4 (1920x1080, 28 s). Write everything into the working directory. Remotion 4.0.527 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or create-video, and a remotion.config.ts here already points rendering at the local Chromium. Render the final video yourself to out.mp4 in the current directory (for example npx remotion render <entry file> <composition id> out.mp4). You may render stills or frames and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create an 18-second brutalist, web-style promo at 1920x1080, 30 fps, for a fictional design festival called GRID/LOCK 26, held in the fictional city of Port Vessel. Everything is cut to a 120 BPM grid, which gives one beat every 0.5 s (15 frames) and 36 beats in total.

[Scenes]
1. 0-3 s: A raw white screen with a visible 12-column grid in hairline black. On each beat a heavy black block snaps into a grid cell. On beat 6 the word "GRID" slams in at 400 px, cropped by the frame edge.
2. 3-6 s: "/LOCK" crashes in beside it, pushing "GRID" left. Two marquee tickers start running in opposite directions, one reading "DESIGN FESTIVAL ✶ 3 DAYS ✶ 40 SPEAKERS ✶" and one reading "NO TEMPLATES ✶ NO MERCY ✶".
3. 6-9 s: Glitch layout shifts land on every beat. The columns jump to new widths, text blocks reflow, and an RGB-split offset hits for 2 frames on each downbeat. The dates "14—16 OCT" stamp in, rotated 90°.
4. 9-13 s: A rapid lineup. Speaker names pop into cells, one per beat, in alternating black-on-acid and acid-on-black: "MAREN OKAFOR-LUND", "TEO BRASK", "YUNA HALVERSEN", "DESMOND QUILL", "ADA PRZYBYL", "RUI CASTANHEDA", "NOOR ELLINGTON", "KASPER VOSS".
5. 13-16 s: The camera lurches. The whole page scrolls upward fast, like a browser flicked by a thumb, and overshoots. Tickers stack in four rows at different speeds, and a cursor clicks a crude "BUY TICKET →" button that inverts.
6. 16-18 s: Everything collapses into the grid, leaving "GRID/LOCK 26 — PORT VESSEL — GRIDLOCK.FEST" on acid yellow. The final beat freezes it with a single scanline flash.

[Style]
Palette: #FFFFFF paper white, #0A0A0A black, #D7FF1F acid yellow, #FF2E2E alarm red, #3A3AFF hyperlink blue. Oversized grotesk type in condensed and extended widths, paired with a raw monospace for metadata. The look is flat, with no gradients: pixel-hard edges, default-browser underlines and visible borders. Motion uses hard steps, linear tickers and snaps that land exactly on beat frames, with occasional 1-frame overshoots.

[Wow]
- Every major hit lands precisely on a multiple of 15 frames, and the downbeats (every 4th beat) get bigger moves.
- Real layout reflow: text wraps differently each time the column widths change.
- Layered marquees at four speeds create depth, with parallax on the scroll lurch.
- Controlled glitch work: RGB split, slice displacement and scanline tears, all seeded.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- Glitch effects never last longer than 3 frames and never obscure the festival name, dates or URL.

[Harness notes] Render the final video to out.mp4 (1920x1080, 18 s). Write everything into the working directory. HyperFrames 0.8.70 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or npx --yes; use the local hyperframes command (for example hyperframes init <dir> --example blank, then hyperframes render). Render the final video yourself to out.mp4 in the current directory. You may take snapshots and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create a 20-second 3D gallery piece at 1920x1080, 30 fps. A cube shows six code-drawn artworks, one per face, and rotates through them in real perspective before unfolding into a flat grid, under the fictional exhibition title "HEXAD".

[Scenes]
1. 0-3 s: A dark, glossy floor and a soft spotlight. The cube materialises edge-first as glowing wireframe lines that fill in face by face. "HEXAD — Six Generative Works" fades in above it.
2. 3-7 s: The cube turns quarter by quarter to show faces 1-3. Each turn uses a spring with a small settle wobble. The current work's title and number appear in a caption bar below.
3. 7-11 s: The camera orbits up and over and the cube tumbles on a diagonal axis to show faces 4-6. The floor reflection follows every move.
4. 11-15 s: A fast, smooth spin of one full revolution with motion-blur trails. It slows into a three-quarter hero angle showing three faces at once, and light sweeps across them.
5. 15-18 s: The cube unfolds along its edges into a cross-shaped net, with faces hinging open in sequence. The net then slides and rearranges into a flat 3x2 grid.
6. 18-20 s: The camera settles straight-on and all six titles appear under their tiles with a stagger. The HEXAD title locks up centred above the grid.

[Style]
Palette: #0A0A0F void, #E8E4DA gallery white, #FF5A36 vermilion, #2E6BFF cobalt, #FFC845 saffron. Minimal sans captions with wide tracking and small monospaced numbers. Faces get thin bevel highlights, the floor shows a blurred, fading reflection, and a soft spotlight casts a pool of light. Motion uses springs for rotations, ease-in-out for the camera and a 90 ms stagger on the unfold.

Artworks (each face animates subtly the whole time):
1. "Orbit" — pulsing concentric rings.
2. "Weave" — Truchet tiles flipping in waves.
3. "Current" — a flow field of curved lines.
4. "Block" — a primary-colour rectangle grid re-dividing itself.
5. "Interference" — two rotating line gratings making moiré.
6. "Drift" — a seeded field of twinkling stars.

[Wow]
- True 3D perspective, with correct face ordering and lighting that darkens faces turned away from the light.
- Live reflections that mirror the animated artworks, not static copies.
- The unfold hinges each face around its real shared edge.
- Depth parallax between the floor, the cube and floating dust motes.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- All six artworks keep animating during every rotation and the unfold.

[Harness notes] Render the final video to out.mp4 (1920x1080, 20 s). Write everything into the working directory. HyperFrames 0.8.70 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or npx --yes; use the local hyperframes command (for example hyperframes init <dir> --example blank, then hyperframes render). Render the final video yourself to out.mp4 in the current directory. You may take snapshots and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create a 24-second product-launch video for a fictional analytics app called Lumora, at 1920x1080, 30 fps. A frosted-glass dashboard assembles panel by panel, comes alive with data and ends on a logo lockup.

[Scenes]
1. 0-3 s: Darkness. Three soft colour orbs drift into place and bloom. A thin glass sheet slides up from below, catching a moving specular highlight. The text "Your numbers, finally clear." fades in word by word.
2. 3-8 s: The camera pulls back and tilts slightly as the dashboard builds. A sidebar, a header, four KPI cards and two large chart panels drop in with staggered springs, each with a blurred backdrop and a 1 px light border.
3. 8-13 s: The charts animate. The revenue line draws left to right with a gradient fill rising under it, the channel donut sweeps into segments, and the KPI numbers count up from zero.
4. 13-18 s: A cursor glides in on a curved path. It hovers over the September point and a tooltip springs out, then it clicks the "Region" tab. The bar chart morphs bars into their new heights, and a toggle flips to dark-glass mode.
5. 18-21 s: The camera dollies in on the retention card, where the circular progress ring fills to 92%. All the panels then fan apart in 3D depth.
6. 21-24 s: The panels fold into a single glass tile that becomes the Lumora logomark (a stylised lens of three overlapping arcs). The wordmark and the tagline "Analytics you can see through" settle in.

[Style]
Palette: #0B0F1F night, #7C5CFF violet, #22D3EE cyan, #F472B6 rose, #F8FAFC frost white. Clean geometric sans with tabular figures for every number. Glass panels use backdrop blur, a subtle noise layer, inner highlights and soft coloured shadows. Motion uses spring entries with a light overshoot, a 60 ms stagger between siblings and ease-in-out camera moves.

[Data]
Monthly revenue ($k), Apr-Sep: 42, 51, 48, 63, 71, 88.
KPIs: Active users 18,420 · MRR $88.2k · Churn 1.8% · NPS 64.
Channels: Organic 41%, Referral 27%, Paid 19%, Partners 13%.
Regions (signups): North 3,120 · South 2,480 · East 4,050 · West 2,760.
Retention: 92%.

[Wow]
- Real parallax depth: the background orbs, the panels and the cursor move at three distinct depths during camera moves.
- A specular light sweep travels across every glass edge in sync with each panel landing.
- The bar chart morph interpolates both height and colour, with no pop or jump.
- The panel-to-logo fold is one continuous, shape-preserving transformation.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- All charts must use the exact values given in the Data section.

[Harness notes] Render the final video to out.mp4 (1920x1080, 24 s). Write everything into the working directory. HyperFrames 0.8.70 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or npx --yes; use the local hyperframes command (for example hyperframes init <dir> --example blank, then hyperframes render). Render the final video yourself to out.mp4 in the current directory. You may take snapshots and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create a 20-second motion piece at 1920x1080, 30 fps, in Chinese ink-wash style, where a dragon is painted stroke by stroke as it coils through clouds and ends on a calligraphy title and red seal.

[Scenes]
1. 0-3 s: Blank warm rice paper with visible fibres. A single ink drop falls from the top of the frame, strikes the paper and blooms outward with feathered edges, and the bloom dissolves into the first misty wash.
2. 3-7 s: Clouds are brushed in from left to right as layered spiral strokes in pale grey wash. Distant mountain silhouettes bleed in at the lowest opacity, and the camera drifts slowly upward.
3. 7-12 s: The dragon's body is painted as one long serpentine brush stroke that coils through and behind the clouds, with dry-brush scales flicking along its back. The camera tracks the brush tip along the curve.
4. 12-16 s: The head forms with whiskers, horns and mane in quick tapered flicks. In a pause, a final dot paints the eye. The dragon then surges diagonally upward, and clouds part in its wake.
5. 16-20 s: The camera settles on a vertical composition. The characters 雲龍 are written stroke by stroke down the right side, a small English line reads CLOUD DRAGON, and a red square seal presses in with a slight bounce and an uneven ink print.

[Style]
Palette: #F2EAD8 rice paper, #111111 sumi ink, #6B6B6B wash, #B9B4A6 mist, #B22222 seal red. Use a brush-script CJK font for the title and a refined thin serif for the English line. The texture is paper grain and fibre with ink pooling at stroke ends. Motion has a calligraphic rhythm: fast attack, slow taper, eased pauses between strokes and gentle spring on the stamp.

[Wow]
- Strokes have variable width driven by simulated brush pressure, with dry-brush streaks where speed is high.
- Ink bleeds outward over time along stroke edges, using a feathered, noise-driven mask.
- At least three parallax cloud layers move at different rates as the camera tracks the dragon.
- The eye-dot moment triggers a subtle ink shockwave ripple through the surrounding wash.
- The seal has carved-looking characters and an imperfect print with speckled gaps.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- The dragon and all calligraphy are built from layered, tapered brush-stroke paths, never uniform-width outlines.

[Harness notes] Render the final video to out.mp4 (1920x1080, 20 s). Write everything into the working directory. HyperFrames 0.8.70 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or npx --yes; use the local hyperframes command (for example hyperframes init <dir> --example blank, then hyperframes render). Render the final video yourself to out.mp4 in the current directory. You may take snapshots and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create a 26-second, 1920x1080, 30 fps isometric motion-graphics video of a data hall coming online, suffering a rack failure and failing over to a standby rack, all tracked by a live wall status board.

[Scenes]
1. 0-4 s: An empty isometric floor grid draws itself tile by tile from the centre outward. Four rows of racks (A-D, four per row) extrude upward with a staggered spring. Overhead cable trays draw in as glowing lines. The camera drifts slowly along the diagonal.
2. 4-9 s: Power on. LEDs cascade down each rack front in a wave, and fan grilles spin. Packets (small glowing capsules) begin streaming along the trays between the racks and a core switch. The wall status board flickers on and shows OPERATIONAL.
3. 9-14 s: Traffic peaks. The packet density rises with the throughput figure. The camera tracks a single packet along a cable, zooming into rack B3 as its LEDs blink.
4. 14-18 s: Failure. B3's LEDs stutter and turn red, and seeded smoke wisps rise from its vent. A red alarm ring pulses across the floor. Packets heading for B3 stall and bunch up on the cable. The board flips to DEGRADED with a shake and a red header.
5. 18-22 s: Failover. The core switch flashes and cable routes re-light, first amber, then green, toward standby rack D4. D4's lid lifts slightly and its LEDs spin up. Queued packets release in a burst along the new route.
6. 22-26 s: Recovery. The board returns to OPERATIONAL and the latency sparkline settles. The camera cranes up to a near top-down overview as "Halvard DC-3 · Failover drill complete" assembles letter by letter.

[Style]
Palette: #0E1420 deep slate, #1F2B3D rack grey-blue, #3DF5C8 healthy teal, #FFB020 warning amber, #FF4D5E fault red, #E6EDF7 label white. Monospaced UI type on the board and condensed sans for labels. Flat isometric faces with three-tone shading, emissive LED bloom and a faint floor reflection. Motion is mechanical: linear packet travel, snappy back-out springs on extrusion and a 40 ms LED stagger.

[Data]
The status board changes by phase (throughput / p95 latency / active nodes / uptime):
Boot: 0.0 Gb/s / -- / 0 of 15 / 0.000%
Running: 38.6 Gb/s / 12 ms / 15 of 15 / 99.998%
Peak: 71.2 Gb/s / 18 ms / 15 of 15 / 99.998%
Fault: 52.4 Gb/s / 214 ms / 14 of 15 / 99.981%
Failover: 66.0 Gb/s / 31 ms / 15 of 16 / 99.981%
Recovered: 69.8 Gb/s / 14 ms / 15 of 16 / 99.983%
Event log lines: 14:02:11 B3 thermal fault; 14:02:12 reroute via CORE-1; 14:02:15 D4 standby online.

[Wow]
- True isometric depth sorting, with packets passing correctly behind and in front of racks.
- Packets follow the actual cable paths and queue physically at the fault.
- Emissive light: red and green LED glow spills onto the floor and neighbouring rack faces.
- The event log types onto the board in sync with the on-floor action.
- A continuous camera with no cuts: drift, track, crane.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- Isometric projection must stay consistent (one fixed 2:1 axis) throughout.

[Harness notes] Render the final video to out.mp4 (1920x1080, 26 s). Write everything into the working directory. HyperFrames 0.8.70 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or npx --yes; use the local hyperframes command (for example hyperframes init <dir> --example blank, then hyperframes render). Render the final video yourself to out.mp4 in the current directory. You may take snapshots and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create a cinematic 20-second motion-graphics video at 1920x1080, 30 fps, of a lighthouse on a rocky point in a violent night storm. Its rotating beam guides a small cargo ship safely past the rocks.

[Scenes]
1. 0-4 s: Total darkness and rain. A lightning flash reveals the silhouette of a tall striped lighthouse on jagged rocks, then darkness returns. The camera slowly pushes in from far out at sea.
2. 4-8 s: The lamp ignites with a warm bloom. The beam begins sweeping, a long cone with volumetric falloff. Rain streaks glitter wherever they cross it. The camera drifts left in a slow arc around the tower.
3. 8-13 s: The camera drops low to the waterline. Five parallax layers of waves roll, crest and break against the rocks, throwing seeded spray particles. Far out, the running lights of the cargo ship "Marrow Gull" appear, red and green, pitching in the swell.
4. 13-17 s: The beam sweeps across the ship. For a moment the hull is lit and the ship turns away from the rocks. A double lightning strike lights the entire seascape and the clouds glow from inside. The camera rises.
5. 17-20 s: The ship slides past into calmer distant water. The rain thins and the beam keeps turning. The title "Safe Passage" fades in, lit by the beam as it passes over the letters.

[Style]
Palette: #05080F night black, #1C2B3A storm slate, #2F4F5F sea teal, #FFD27A lamp amber, #E9F1FF lightning white, #C23B3B tower red. Use a serif display face with wide tracking, set small and elegant. Lighting is high-contrast chiaroscuro with bloom on the lamp, mist haze and grainy texture. Motion is heavy and weighty: waves on long sine cycles, a slow-eased camera and abrupt but brief lightning.

[Wow]
- A volumetric beam that brightens where rain and mist pass through it and fades with distance.
- At least five depth layers of waves with parallax, with foam lines along the crests.
- Lightning casts momentary hard shadows of the tower and the ship across the water and clouds.
- 1,500+ angled rain streaks, wind-blown with seeded variation, plus splash particles on the rocks.
- The beam rotation is constant: one full revolution every 4 s.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- Lightning flashes must stay under 6 frames each and never fill the full frame with pure white.

[Harness notes] Render the final video to out.mp4 (1920x1080, 20 s). Write everything into the working directory. HyperFrames 0.8.70 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or npx --yes; use the local hyperframes command (for example hyperframes init <dir> --example blank, then hyperframes render). Render the final video yourself to out.mp4 in the current directory. You may take snapshots and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create a 24-second premium product reveal of an original smartwatch, the "Vessel One" by the fictional maker Halden, at 1920x1080, 30 fps.

[Scenes]
1. 0-4 s: Total darkness. A thin rim light sweeps left to right and reveals only the bevelled edge of a round watch case in silhouette. Fine dust motes drift through the beam.
2. 4-9 s: The camera slowly orbits about 35 degrees of yaw. A softbox light rakes across the brushed titanium case, the sapphire crystal throws a travelling specular streak, and the knurled crown turns a quarter rotation.
3. 9-15 s: Exploded view. The watch lifts and separates vertically into six layers: crystal, OLED display, haptic ring, logic board, battery and ceramic sensor back. The layers spread on staggered springs, and thin leader lines draw out to tracked uppercase labels.
4. 15-19 s: The layers re-stack with a soft click-settle. The display wakes with a radial dial animation. Three callouts slide in with counting numerals: "14-DAY BATTERY", "2.1 MM SAPPHIRE" and "HEART · SPO2 · SKIN TEMP".
5. 19-24 s: Hero shot. The camera pulls back to a front three-quarter view of the watch on a mirrored plinth. A final light sweep crosses the case, the wordmark "VESSEL ONE" letter-spaces in, and the tagline "Time, held closer." fades up beneath it.

[Style]
Palette: #07080A near-black, #1C1F24 graphite, #B9BEC6 titanium, #E8C27A warm gold accent, #5FD3C6 display teal. Use a wide geometric sans, light weight for labels and heavy tracking for the wordmark. Brushed metal is built from fine seeded linear striations under layered gradients, and specular highlights are moving gradient masks. Lighting is low-key studio with deep falloff. Motion: slow exponential ease-out for the camera, critically damped springs for the layers, and a 60 ms stagger on labels and callouts.

[Wow]
- The specular streak on the crystal and the case highlights respond to camera angle, so the light visibly slides as the camera orbits.
- The exploded view has true depth sorting, per-layer parallax and soft contact shadows between layers.
- The dial is live: a sweeping second hand, a ticking date ring and a pulsing heart-rate complication.
- The volumetric light beam in scene 1 carries drifting, softly lit particles.
- The mirrored plinth reflects every motion with a blurred, fading reflection.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- The watch must read as the same object in every scene: identical proportions, materials and dial design.
- No real brands or logos; use only the Halden and Vessel One names.

[Harness notes] Render the final video to out.mp4 (1920x1080, 24 s). Write everything into the working directory. HyperFrames 0.8.70 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or npx --yes; use the local hyperframes command (for example hyperframes init <dir> --example blank, then hyperframes render). Render the final video yourself to out.mp4 in the current directory. You may take snapshots and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create a 25-second motion-graphics video at 1920x1080, 30 fps, of a retro CRT terminal that cold-boots a fictional operating system and transforms into a live system-monitoring dashboard.

[Scenes]
1. 0-4 s: Black screen. The CRT powers on: a bright horizontal line expands vertically into a phosphor glow. Firmware text appears: "HALCYON FIRMWARE v3.1", then a memory counter ticks up to 65536K OK.
2. 4-9 s: A cursor types commands at a human pace with small timing variations: "> mount /core", "> init --profile=night", "> net up eth0". Each command is followed by status lines that end in green [ OK ], plus one yellow [ WARN ] ("fan2: rpm low").
3. 9-13 s: A large ASCII-art "HALCYON" logo assembles character by character from scattered glyphs that fall into place. Three progress bars, drawn with block characters, fill underneath it.
4. 13-18 s: The log scroll accelerates into a blur of lines. The screen splits along box-drawing borders into panels while the camera eases back slightly, revealing the curved bezel.
5. 18-25 s: A live dashboard runs with sparklines for CPU, service tables, gauges and a scrolling event log. A final prompt with a blinking cursor holds for the last 2 s.

[Style]
Palette: CRT black #050806, phosphor green #39FF7A, amber #FFB000, warning red #FF4D4D, dim green #1C5E35. Type: a monospaced font only, with box-drawing characters for all chrome. Lighting: bloom on bright glyphs, scanlines, slight barrel distortion, vignette and faint phosphor persistence trails. Motion: typed text runs on a character clock, panels slide with snappy expo easing, and nothing bounces.

[Data]
Services (name / CPU % / memory MB / status): auth 12 / 210 / UP; relay 47 / 880 / UP; archive 8 / 1420 / UP; scheduler 23 / 340 / UP; mailer 71 / 512 / DEGRADED.
CPU history (12 samples): 18, 22, 35, 31, 44, 58, 52, 61, 49, 55, 63, 57.
Network: in 482 KB/s, out 131 KB/s. Uptime: 00:00:21. Load: 0.82 1.04 0.97.
Log lines: "relay: handshake 10.4.0.12 accepted", "archive: index rebuilt (3,204 files)", "mailer: queue depth 41", "auth: token refresh ok".

[Wow]
- Authentic CRT rendering: chromatic fringe, rolling refresh band and glow that intensifies with text density.
- The ASCII logo forms from a deterministic glyph-particle simulation.
- The terminal splits into panels as a choreographed reflow, not a cut.
- The dashboard values animate continuously, and the mailer row pulses amber.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- All text, including the dashboard, uses a single monospaced font aligned to a character grid.

[Harness notes] Render the final video to out.mp4 (1920x1080, 25 s). Write everything into the working directory. HyperFrames 0.8.70 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or npx --yes; use the local hyperframes command (for example hyperframes init <dir> --example blank, then hyperframes render). Render the final video yourself to out.mp4 in the current directory. You may take snapshots and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

[Task]
Create a 24-second neon-noir opening title sequence at 1920x1080, 30 fps, for an original film called "AFTERGLOW DISTRICT". It takes place on a rain-slick back street at night, drawn entirely in code.

[Scenes]
1. 0-4 s: Total dark and falling rain. Streaks are lit only by a distant streetlamp. The camera hangs low over wet asphalt, and ripples bloom in puddles on the beat.
2. 4-9 s: The neon signs stutter on one by one: "NOODLE", "HOTEL KAGERO", "BAR 24" and a vertical arrow sign. Each one flickers twice before holding steady. Their colours bleed into the puddle reflections below. The camera begins a slow dolly forward down the street.
3. 9-14 s: Credits slide through the reflections. "A FILM BY MIRA OKANE" glides across a puddle, rippling with the water, then rises up into the real space above it. "STARRING JUN TAKEDA · ELSA VOIGHT" follows.
4. 14-18 s: A delivery scooter's headlight sweeps across the scene, raking long shadows across rain-beaded walls. Credits for "MUSIC BY KAITO REN" and "CINEMATOGRAPHY BY ODA SAEKI" fragment and reassemble in its beam.
5. 18-22 s: The camera cranes up past fire escapes and dripping cables. A train passes overhead on an elevated track, and its lit windows strobe across the street.
6. 22-24 s: Every sign cuts out except one pink tube, which redraws itself as the title "AFTERGLOW DISTRICT". The title buzzes, flickers once, then holds over the rain.

[Style]
Palette: #07070D wet black, #FF2E88 neon pink, #2EF2FF cyan, #FFB13B sodium amber, #8A5CFF violet haze. Credits are set in a wide, tracked-out grotesk. The title is drawn as a single-stroke neon tube with a hot white core and a coloured bloom. Lighting comes from volumetric haze, chromatic fringing on bright edges and fine grain. Motion is slow and heavy, with long ease-in-out moves and sharp electrical flicker accents.

[Wow]
- Reflections are real: a mirrored, ripple-distorted render of the signs and type in every puddle, updating as the camera moves.
- Thousands of seeded rain streaks with motion blur and depth falloff, plus splash particles where drops hit the ground.
- Beat-synced motion on a 92 BPM grid: puddle ripples, sign flickers and credit entrances land on beats, with the train passing over one full bar.
- Credits travel through depth, crossing the boundary between reflection and real space.

[Rules]
- Every frame is drawn in code (SVG, canvas, CSS or WebGL). No image files, no image generation, no external assets beyond fonts.
- Deterministic: no unseeded randomness at render time.
- Text must be crisp, spelled correctly and readable at 1080p.
- No hard cuts between scenes: every change is a designed transition.
- All sign text, names and the film title are exactly as written here. Show no real brands.

[Harness notes] Render the final video to out.mp4 (1920x1080, 24 s). Write everything into the working directory. HyperFrames 0.8.70 is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install or npx --yes; use the local hyperframes command (for example hyperframes init <dir> --example blank, then hyperframes render). Render the final video yourself to out.mp4 in the current directory. You may take snapshots and inspect your own output (headless chromium is available at /usr/bin/chromium) and iterate on your own before finishing.

A video explaining recursion, where every explanation about recursion has a radically different video style, make this self-referential & clever & fast moving.

---
Deliverable: build this in the current folder as a self-contained web page that opens in a browser with index.html as the entry point (no build step; CDN imports are fine). Work autonomously and do not ask questions.

explain a token bucket rate limiter, canvas only, no libraries, every frame a pure function of time so my renderer can screenshot it.

---
Deliverable: build this in the current folder as a self-contained web page that opens in a browser with index.html as the entry point (no build step; CDN imports are fine). Work autonomously and do not ask questions.

4 seasons passing outside a train window, a cozy carriage, a cup of coffee on the table, Grand Budapest Hotel style

---
Deliverable: build this in the current folder as a self-contained web page that opens in a browser with index.html as the entry point (no build step; CDN imports are fine). Work autonomously and do not ask questions.

Build a 45-second machine that plays an original piece of music, where every note comes from a visible collision.

---
Deliverable: build this in the current folder as a self-contained web page that opens in a browser with index.html as the entry point (no build step; CDN imports are fine). Work autonomously and do not ask questions.

make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out.

---
Deliverable: build this in the current folder as a self-contained web page that opens in a browser with index.html as the entry point (no build step; CDN imports are fine). Work autonomously and do not ask questions.

Build an interactive dashboard for one week of a city bike-share scheme from the exact dataset below (CSV: trips started per hour, one row per day, columns h00 to h23). Embed the data in the page verbatim and compute every number from it; do not invent or alter any value.

day,h00,h01,h02,h03,h04,h05,h06,h07,h08,h09,h10,h11,h12,h13,h14,h15,h16,h17,h18,h19,h20,h21,h22,h23
Mon,26,24,24,26,23,25,49,311,627,313,67,119,199,231,107,70,205,546,492,197,45,27,25,24
Tue,24,23,24,25,25,26,45,322,716,319,69,119,201,214,106,69,206,485,513,212,48,25,27,23
Wed,26,27,26,27,25,24,48,317,694,301,72,104,215,200,111,32,86,251,248,94,45,26,26,23
Thu,24,23,26,27,27,26,49,284,663,320,69,104,199,201,121,62,201,516,550,191,46,27,23,24
Fri,23,27,24,25,25,27,50,310,664,295,70,105,220,208,109,66,218,589,540,210,51,27,30,28
Sat,41,42,38,43,40,42,47,62,94,142,255,357,458,582,583,505,352,265,179,147,125,101,64,49
Sun,42,40,40,39,43,41,49,61,93,144,226,371,450,538,575,443,386,252,173,141,111,86,66,47

The dashboard needs: a 7 x 24 heatmap (days by hours) with a clear colour legend; a line chart of the average hourly profile for weekdays versus the weekend; a bar chart of total trips per day; KPI cards for total trips, the busiest day, and the single busiest hour of the week (day and hour); and an automatic callout that spots the anomaly in the data (one weekday evening that is far below the other weekdays at the same hours) and names it. Clicking a day highlights that day's row in the heatmap and draws its hourly line over the profile chart; hovering any heatmap cell shows its exact count. Draw the charts yourself with SVG or Canvas. So the page is alive without input, on load the heatmap fills in hour by hour like a clock sweeping across the week (about 5 seconds), then the anomaly callout appears. Make it look like a polished product, readable on desktop and phone.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build an interactive sales dashboard for a small coffee chain from the exact dataset below (CSV, 48 rows: 4 stores x 12 months of 2025). Embed the data in the page verbatim and compute every number from it; do not invent, round away or alter any value.

month,store,cups,revenue_usd,new_members
2025-01,Harbour St,8620,48001.40,219
2025-01,Uni Quad,4670,22784.08,136
2025-01,Airport T2,9980,72817.87,285
2025-01,Old Mill,5140,26339.15,156
2025-02,Harbour St,8660,48132.70,179
2025-02,Uni Quad,7510,36583.14,176
2025-02,Airport T2,10710,78626.32,196
2025-02,Old Mill,5120,26783.20,145
2025-03,Harbour St,9600,53507.52,224
2025-03,Uni Quad,8140,40574.60,197
2025-03,Airport T2,11420,85142.33,222
2025-03,Old Mill,5980,31337.13,191
2025-04,Harbour St,9950,55661.36,280
2025-04,Uni Quad,8080,40043.67,147
2025-04,Airport T2,12350,92727.38,298
2025-04,Old Mill,6240,33325.28,151
2025-05,Harbour St,10520,61004.42,275
2025-05,Uni Quad,8460,41597.39,177
2025-05,Airport T2,12500,94954.01,301
2025-05,Old Mill,6130,32148.65,176
2025-06,Harbour St,10620,61721.59,313
2025-06,Uni Quad,9200,45959.02,213
2025-06,Airport T2,12750,96839.34,255
2025-06,Old Mill,6940,37380.48,168
2025-07,Harbour St,10960,63515.58,232
2025-07,Uni Quad,5610,28440.56,130
2025-07,Airport T2,13010,97534.46,267
2025-07,Old Mill,7310,39219.21,204
2025-08,Harbour St,11000,62556.63,252
2025-08,Uni Quad,9900,49592.99,265
2025-08,Airport T2,13860,104199.02,279
2025-08,Old Mill,6750,35505.26,164
2025-09,Harbour St,9960,56831.50,271
2025-09,Uni Quad,8750,44825.12,174
2025-09,Airport T2,12770,99211.32,301
2025-09,Old Mill,6520,35173.20,204
2025-10,Harbour St,9800,57724.32,231
2025-10,Uni Quad,8510,43550.50,222
2025-10,Airport T2,11410,88144.32,282
2025-10,Old Mill,5920,31946.68,180
2025-11,Harbour St,10260,59774.09,229
2025-11,Uni Quad,8660,44209.58,203
2025-11,Airport T2,12430,96807.87,266
2025-11,Old Mill,6160,33615.60,188
2025-12,Harbour St,12660,75310.44,360
2025-12,Uni Quad,6550,32992.14,188
2025-12,Airport T2,14490,110341.47,368
2025-12,Old Mill,7280,39635.82,218

The dashboard needs: KPI cards for total revenue, total cups, average ticket (revenue / cups) and total new members; a monthly revenue line chart with one line per store; a stacked bar chart of cups per quarter split by store; a ranking of stores by revenue; and a table of the raw rows that can be sorted by clicking any column header. Store filter toggles must update every KPI, chart and the table together. Hovering any chart point or bar shows a tooltip with its exact values. Format money as US dollars with thousands separators. Draw the charts yourself with SVG or Canvas. So the page is alive without input, it plays a short guided tour on load: it highlights each store in turn for about 2 seconds (dimming the others in every chart), then returns to all stores; any click or key press stops the tour. Make it look like a polished product, readable on desktop and phone.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a balanced search tree visualizer: three trees side by side (stacked on narrow screens) receive the same sequence of integer keys at the same time: an AVL tree, a red-black tree and a B-tree of order 4 (2-3-4 tree). Insert one key per step and animate every structural change honestly: nodes sliding to new positions, AVL single and double rotations with the pivot highlighted and balance factors shown on each node, red-black recolouring and rotations with node colours, B-tree node splits with the middle key rising to the parent. Lay each tree out cleanly so it never overlaps, and scale to fit its panel as it grows. Show height, node count, rotations or splits so far, and the number of comparisons for the last operation in every panel. After 25 inserts, perform 8 deletions with their own rebalancing animations, then search for 4 keys showing the comparison path. Controls: key sequence presets (random, ascending 1..31 which wrecks a naive tree, alternating zig-zag, few repeats), type a key to insert, delete or search, speed slider, play, pause, step, reset. So the page is alive without input, on load it runs the random preset automatically, then waits 3 seconds and runs the next preset, forever, until the user touches a control. Make it elegant, with smooth motion that makes rotations finally make sense.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a convex hull algorithm race: four panels (a 2 x 2 grid, stacked on narrow screens) each run a different algorithm on its own copy of the same cloud of 120 random points: Graham scan, Jarvis march (gift wrapping), Quickhull and Andrew's monotone chain. Advance every panel one primitive step per tick (one orientation test, one push or one pop) so the speeds are honestly comparable. Draw the candidate hull growing as glowing edges, flash the point being tested, show rejected points dimming, animate stack pops as edges snapping away, and keep a live counter of orientation tests and stack operations per panel. When a panel finishes, fill its hull with a soft gradient, sweep a highlight around the perimeter and stamp its finishing place. Controls: point-set presets (uniform random, circle with noise, clustered blobs, points on a parabola, nearly collinear), a point-count slider (20 to 400), click or tap to add points, speed slider, play, pause, single step and reset. After each race show a small results table (steps, orientation tests, hull size). So the page is alive without input, on load it starts racing the uniform preset automatically, and after each finish it waits 3 seconds and races the next preset in turn, forever, until the user touches a control. Make it precise and beautiful, like a figure from a great algorithms textbook brought to life.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a single-page WebGPU compute-shader boids visualizer that runs 50,000 boids at 60fps, with a CPU (JS) mode capped at 2,000 for side-by-side comparison. Show separation/alignment/cohesion sliders, a predator that follows the mouse, spatial hashing grid overlay toggle, and an FPS + ms-per-step readout for each mode so the speedup is visible. Include a short in-page explanation panel of the algorithm and the spatial hash. One HTML file, no external assets. The GPU mode must use a WebGPU compute shader when navigator.gpu is available and otherwise fall back to a WebGL2 GPU path (for example float-texture ping-pong) so it still runs 50,000 boids where WebGPU is missing; label which GPU path is active. Make the page start a demo on load with no input (the predator follows a scripted path until the mouse moves) so a headless capture shows constant motion.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a hash table collision showdown: four hash tables of 31 buckets each receive the same stream of string keys (words like city names) at the same time, one insert per tick, using separate chaining, linear probing, quadratic probing and cuckoo hashing with two tables. Show each key flying in, the computed hash value as a number, every probe step as a hop between buckets, chains growing as stacks, clusters forming in linear probing (highlight primary clusters), and cuckoo evictions as keys being kicked out and flying to their alternate slot. Each panel shows live load factor, average and worst probe count, and total probes. When a table passes its load-factor limit (0.75 for open addressing, 0.9 for cuckoo, chaining never), animate a resize to the next prime size with every key re-hashed into place. Every 20 inserts, run a burst of 10 lookups (half present, half missing) and show their probe paths. Controls: key stream presets (city names, sequential numbers as strings, adversarial keys that collide under the default hash), choice of hash function (djb2, FNV-1a, a deliberately bad sum-of-chars), speed slider, play, pause, step, reset. So the page is alive without input, on load it starts streaming the city names automatically and after the stream finishes it waits 3 seconds and moves to the next preset, forever, until the user touches a control. Make it clear enough to teach and pretty enough to watch.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a maze generation and solving show: four panels side by side (a grid on narrow screens) each carve the same-size 31 x 21 maze with a different generator at the same time: recursive backtracker (depth-first), randomized Prim's, randomized Kruskal's with union-find, and Wilson's loop-erased random walk. Show each generator's working state honestly: the backtracker's stack as a glowing trail, Prim's frontier cells, Kruskal's sets as distinct colours that merge as walls fall, Wilson's wandering walk with its loops being erased. Count steps per panel. When a maze is complete, solve it in the same panel with A* from the top-left to the bottom-right corner, drawing the open set, the closed set and the final path as a bright line, and show path length and cells explored. Then display a small comparison (generation steps, dead ends, longest corridor, solution length) so viewers see how the generators produce different textures of maze. Controls: maze size presets, speed slider, play, pause, single step, regenerate, and a toggle to solve with breadth-first search instead of A*. So the page is alive without input, on load it generates and solves automatically, then waits 3 seconds and starts a new round with a fresh seed, forever, until the user touches a control. Make it feel like a calm, hypnotic museum installation.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a pathfinding race visualizer: four copies of the same grid maze, side by side (stacked on a phone), where A*, Dijkstra, breadth-first search and greedy best-first search solve the same start-to-goal problem at the same time, step by step. Show each algorithm's frontier, visited cells and final path in distinct colours, and live counters for cells visited, path length and steps taken; when all four finish, show a small results table ranking them and say which found the shortest path and which explored the fewest cells. Controls: generate a new random maze (a perfect maze with some extra openings so paths differ), clear the grid, draw or erase walls by dragging on any grid (the edit applies to all four), move the start and goal by dragging them, a speed slider, play, pause and single step. Diagonal moves are off; every move costs 1. So the page is alive without input, on load it generates a maze and starts the race automatically, and when a race finishes it waits 3 seconds and runs a new maze, forever, until the user touches a control. Make it clear and beautiful, the kind of visual a teacher would put on a projector.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a sorting algorithm race: six panels side by side (a grid on narrow screens), each sorting its own copy of the same 60-element array drawn as vertical bars, with bubble sort, insertion sort, selection sort, merge sort, quicksort and heapsort running at the same time, one comparison or write per tick. Highlight the bars being compared and the bars being written in each step, and show live counters for comparisons and array writes in every panel. When a panel finishes, play a quick sweep across its bars and stamp its finishing place (1st to 6th). Controls: input presets (random, nearly sorted, reversed, few unique values), a speed slider, play, pause, single step and reset; an optional soft tone per comparison through WebAudio that is off by default, with a mute toggle. After every race, show a small table of comparisons and writes per algorithm for that input. So the page is alive without input, on load it shuffles and starts a race on the random preset automatically, and after each finish it waits 3 seconds and races the next preset in turn, forever, until the user touches a control. Make it clear and beautiful, the kind of visual a teacher would put on a projector.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a working maps app in one page in the spirit of a navigation app. Generate a fictional city procedurally from a fixed seed: a coastline and river, parks, a road network with highways, main roads and side streets (each with a speed), named streets, and about 60 named places (cafes, museums, stations, parks, hospitals) with category icons drawn in code. Render it as a crisp vector map on canvas with smooth pan and zoom (mouse wheel, drag, pinch), level-of-detail labels that appear as you zoom, and a compass and scale bar. It needs: a search box with fuzzy matching over place names and categories; tapping a place opens a card; directions between any two places computed with A* on the road graph with a choice of fastest versus shortest route, the route drawn as a bold line with estimated time and distance and a step list of turn-by-turn instructions (turn left onto River Road, and so on) derived from the geometry; a simulated drive mode where a car marker follows the route and the map rotates and follows it; and a traffic toggle that slows some roads and recomputes the route. So the page is alive without input, on load it runs a scripted demo: searches for a museum, opens its card, requests directions from the central station, shows the step list, starts drive mode, turns traffic on mid-drive so the route reroutes, then picks a new pair of places and repeats, until the user touches anything. Make it look like a premium, modern map style.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a working code editor in one page in the spirit of a lightweight VS Code. It needs: a file explorer sidebar with a small seeded project (index.html, style.css, app.js, utils.js, README.md) where files can be created, renamed and deleted; tabs for open files with unsaved-change dots; an editor component you write yourself (no libraries) with line numbers, syntax highlighting for JavaScript, CSS, HTML and Markdown, auto-indent, bracket matching and auto-closing, multi-line indent and outdent of selected lines from the keyboard, current-line highlight, and a minimap; find and replace with match count and regex toggle; a command palette (Ctrl+Shift+P) with fuzzy search over commands and files; a run button that executes app.js in a sandboxed iframe with the project's HTML and CSS and shows its output plus console logs and errors in a bottom panel; light and dark themes; and persistence of the whole project to localStorage. So the page is alive without input, on load it runs a scripted demo: the cursor opens app.js, types a small function character by character with realistic pauses, autocloses brackets, uses find and replace to rename a variable, opens the command palette, runs the project so a little animation appears in the preview and a log line in the console, then reverts and repeats with a different snippet, until the user touches anything. Make it feel fast and professional.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a working browser music studio in one page, in the spirit of a classic drum machine plus a tiny DAW. It needs: an 8-track by 16-step sequencer (kick, snare, closed hat, open hat, clap, tom, bass, lead) where every sound is synthesized with the Web Audio API (no samples); per-step velocity (click or tap cycles levels) and per-track mute, solo, volume, pan and a simple filter knob; a piano-roll editor for the bass and lead tracks over two octaves; tempo (60 to 180 BPM) and swing controls; four pattern slots A to D with a song arranger row to chain them; a master section with a compressor and a visual spectrum analyser and waveform scope driven by an AnalyserNode; transport with play, stop and a playhead that lights each step in time; and export of the current pattern as JSON plus import from JSON. Audio must start only after a user gesture (show a clear Start audio button), but the visuals must not wait for it. Seed it with four good-sounding patterns that make a short song. So the page is alive without input, on load it runs the sequencer silently in demo mode with the playhead moving, steps lighting, the scope and spectrum animating from the synthesized signal (route audio to the analyser but keep the output muted until the user presses Start audio), cycling through the four patterns and occasionally toggling steps as if someone were jamming, until the user touches anything. Make it look like premium music hardware: knobs, LEDs, tactile buttons.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a working clone of a Trello-style kanban board app in one page. It needs: a board with lists (Backlog, To do, Doing, Review, Done) that can be added, renamed, reordered and deleted; cards that can be created, edited in a detail modal (title, description with simple markdown rendering, checklist with progress bar, coloured labels, due date with overdue styling, assignee avatars drawn as initials), and dragged between and within lists with smooth placeholder animation using pointer events so it works with mouse and touch; a search box and label filter that dim non-matching cards; undo and redo for every change (Ctrl+Z / Ctrl+Shift+Z plus buttons); keyboard shortcuts (n new card, / search, arrow keys to move focus); an activity sidebar logging each change; and persistence to localStorage with a reset-to-sample button. Seed the board with about 18 realistic cards for a small team shipping a mobile app. So the page is alive without input, on load it runs a scripted demo tour: it creates a card, types its title, adds a checklist, drags cards across lists, ticks checklist items, filters by a label, undoes a move, and then repeats with variations every 30 seconds, until the user touches anything, at which point the demo stops and the app is fully theirs. Make it look and feel like a polished commercial product, not a demo.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a working digital painting app in one page, a compact cross between MS Paint and Procreate. It needs: a large canvas with pressure-friendly smooth strokes using pointer events (mouse, touch and pen) with stroke smoothing; brushes (round, soft airbrush, marker, calligraphy nib whose width depends on direction, pixel pencil, eraser, smudge); a colour wheel with hue ring and saturation-value square, hex input and a palette of recent colours; flood fill with tolerance; shapes (line, rectangle, ellipse) with shift to constrain; layers panel with add, delete, reorder by drag, opacity, visibility, blend modes (normal, multiply, screen, overlay) and live thumbnails; unlimited undo and redo; pinch and wheel zoom plus pan with the space bar; and export of the flattened image as a PNG download. So the page is alive without input, on load it plays a scripted painting demo with a visible cursor: it paints a small landscape at dusk on several layers (sky gradient, mountains, a moon, trees with the calligraphy brush, smudged fog), changes blend modes, zooms in and out, undoes a stroke and redoes it, then clears and paints a different scene, looping until the user touches the canvas or any control. Make the interface sleek and dark, with the painting as the hero.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a working photo editor in one page in the spirit of Lightroom. Since no image files can be loaded from the network, first render a detailed photo-like scene procedurally onto a canvas (a mountain lake at golden hour with sky gradient, clouds, layered mountains, reflections, trees and noise grain), and also let the user open their own image file from disk. It needs non-destructive editing with a full adjustment panel: exposure, contrast, highlights, shadows, whites, blacks, temperature, tint, vibrance, saturation, clarity, a tone curve editor with draggable points per channel, HSL sliders per colour band, vignette and grain; crop and straighten with rule-of-thirds overlay and aspect presets; a live RGB histogram; a before and after split view with a draggable divider; preset looks (cinematic teal-orange, faded film, black and white high contrast, moody) that can be applied and then tweaked; full undo and redo history listing each step; and export to PNG. Processing must stay responsive: work on a preview-size buffer while dragging and render full resolution on release. So the page is alive without input, on load it runs a scripted demo: slides exposure and temperature, bends the tone curve, applies two presets, drags the before and after divider back and forth, crops, then resets and repeats with different settings, until the user touches anything. Make it look like a pro tool: dark UI, precise controls.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a working 1990s-style desktop operating system inside one web page. It needs a desktop with a wallpaper and icons, a taskbar with a start button, a start menu and a live clock, and real windows: each window can be dragged by its title bar, resized from its corner, minimised to the taskbar, maximised, restored and closed, and clicking a window brings it to the front. Include three working apps that open in those windows: a Notepad that edits text and saves to and reopens from localStorage under a file name; a Paint app with a pencil, brush sizes, a 16-colour palette, a flood fill and an eraser on a canvas; and a Calculator with the four operations, decimals, clear and a keyboard input path. Double-clicking a desktop icon or choosing an app from the start menu opens it. Several windows of the same app can be open at once. Everything is drawn with HTML and CSS (no images): bevelled grey buttons, a classic title-bar gradient and pixel-crisp borders. So the first view is not an empty desktop, on load the system shows a short boot screen (about 2 seconds) and then opens Notepad with a welcome note and the Calculator, cascaded. On a phone, windows open maximised and the taskbar stays usable.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a working mini spreadsheet app in one web page. It needs a grid with column letters A to Z and row numbers 1 to 50, a formula bar that shows the raw content of the selected cell, and editing by typing or double-clicking. Cells hold numbers, text or formulas starting with =. Formulas support + - * / and parentheses, cell references (A1), ranges (A1:B5) and the functions SUM, AVERAGE, MIN, MAX and COUNT; every dependent cell recalculates instantly when a referenced cell changes. Show #REF! for a bad reference, #DIV/0! for division by zero and #CIRC! for a circular reference instead of hanging. Support selecting a rectangular range by dragging or shift-clicking, with a status bar showing that range's sum, average and count; copy and paste within the grid (references in pasted formulas shift relative to the move); bold and number-format buttons (plain, 2 decimals, currency, percent); and a save to and load from localStorage. So the first view is meaningful, on load the sheet opens with a household budget already filled in: twelve expense rows with monthly amounts, a total row and an average row built with formulas, and a percent-of-total column built with formulas, all computed live. Make it look like a clean modern spreadsheet that is usable on desktop and phone.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a working team chat app in one page in the spirit of Slack. It needs: a workspace sidebar with channels and direct messages, unread counts and bold unread channels; a message view with grouped messages by author and time, day dividers, avatars drawn as coloured initials, markdown-lite formatting (bold, italic, inline code, code blocks, links rendered as text), emoji reactions with counts that toggle on click or tap, threaded replies in a side panel, message editing and deletion, @mentions with an autocomplete popup, and a composer with Enter to send and Shift+Enter for a new line; a search box that finds messages across channels and jumps to them; typing indicators; and persistence to localStorage. Simulate four teammates as small scripted bots who reply in character after a delay when mentioned, react to messages, and occasionally start threads, so the workspace feels alive. Seed the workspace with realistic history for a small startup team (general, design, engineering, random channels). So the page is alive without input, on load it runs a scripted demo: switches channels, types and sends a message with a mention, a bot shows a typing indicator and replies, reactions appear, a thread opens and gets a reply, a search finds an older message, and the loop continues with new conversation every 30 seconds, until the user touches anything. Make it polished, friendly and fast.

Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.