GPT-6 Astra · 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.

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.

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.

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.

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!

Design a giant desert sandworm re-engineered as a robot, presented as an engineering blueprint. Deliver ONE self-contained index.html (SVG and/or canvas, inline CSS and JS, no external assets, libraries or fonts). It must include: an animated robotic worm that moves through sand, with segments that articulate as it burrows and surfaces; a labelled segment-by-segment mechanical breakdown (for example head and mouth assembly, drive segments, sensor ring, power core, tail) with callouts naming each part and what it does; a cross-section diagram of the mouth showing the grinding and intake mechanism; and a terrain and operations map showing the worm's route, depth and working zones. Everything must share one cohesive blueprint style: blueprint-blue background, white and cyan line work, grid, dimension lines, title block and technical lettering. It must look good on desktop and phone. Write everything into the working directory and finish with a short README.md.

ok here it is - my first Opus 5.5 vibecoded threejs 3D experience

my God!! Opus is creative!!

I made a road that forgets which way is down.

It folds 90° up a yellow wall, runs upside down across a ceiling, and turns into sheet music: steer through the notes to play each street's melody.

Watercolour. Ink. A radio on the roof.

#vibejam 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 before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a GPU-accelerated fluid simulation in a single HTML file using WebGL, no external libraries. Dragging the mouse or a finger should push colorful dye through the fluid, with a soft glow. Make it look stunning and run smoothly.

Build it as a self-contained index.html in the current directory, with WebGL/WebGL2 shaders you write yourself; no libraries and no CDNs; interactive with mouse or touch input. 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 Three.js scene (one index.html file, no build step, three.js from a pinned CDN) with a rigged humanoid character (a procedural skeleton and simple body meshes are fine) that plays walk, run and jump cycles, with on-screen buttons or keys to switch between them and blend smoothly from one to the next. The motion must look human, not spider-like: respect realistic joint limits (knees and elbows bend one way only, no joint rotates past a human range), feet plant on the ground with no sliding while in contact, the pelvis bobs and the torso stays upright with natural counter-rotation of shoulders and hips, and arms swing opposite to the legs. Include a ground grid, an orbit camera and a toggle that shows the skeleton. It must run at 60 fps in a desktop browser and work with touch. Write everything into the working directory and finish with a short README.md describing the controls.

Build a small playable 3D game in Three.js: an ant defends its home from a furious giant gardener. The player controls the ant on the ground of a lush garden, seen from a low third-person camera that makes the grass blades, pebbles and flowers feel huge. The gardener towers over the scene and sweeps a humming string trimmer back and forth, chasing the ant and throwing up clippings. The ant fights back with a tiny slingshot: aim with the mouse, fire pebbles at the gardener and dodge the trimmer's swings. Show a health bar for the ant and a large health bar for the gardener at the top of the screen, with hit flashes, a clear win or lose message and a restart. Warm afternoon sunlight falls through the leaves overhead, casting moving dappled light and soft shadows, with dust drifting in the light beams. Keep the controls simple (WASD or arrow keys to move, click to shoot) and show them on screen. Everything is built in code from Three.js geometry and materials; no external models or textures. 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 before finishing. Close any browser you open as soon as you've taken your screenshot.

# Test: threejs_artwork_style_pass

Build a real-time 3D scene in three.js: a **caped flying hero** flies through a row of **large framed artworks**, and each time he passes through a frame **his rendering style changes to match that artwork's style**.

- The hero is an original, generic caped flyer (your own design, not any existing or trademarked character): a stylised humanoid in a flying pose, fists forward, with a cape that flutters and ripples in the wind as he flies.
- A row of at least **five big picture frames** stands along his flight path, spaced out, each with a gilded frame and a procedurally generated canvas in a different style, for example: **oil painting** (thick brush strokes), **ukiyo-e woodblock** (flat colours, bold outlines, wave pattern), **pixel art**, **comic book / halftone** (dots, ink outlines), **watercolour** (soft bleeding washes). More styles are welcome.
- As he flies **through** each frame, the hero's look switches to that artwork's style (custom shaders / materials / post-processing, e.g. toon shading + outlines, halftone dots, pixelation, painterly noise, paper texture), ideally with a short visible transition at the moment he crosses the frame plane. Optionally the world around him can also take on the style.
- Motion must be **smooth and continuous** (no teleporting or snapping): he flies along a gentle curved path through all frames, and the whole sequence loops seamlessly.
- The **camera follows** him smoothly (chase camera with slight lag), keeping both the hero and the next frame in view.
- Good lighting, sky/background and atmosphere; aim for a polished, showcase-quality look.


Deliverable: reply with exactly one complete, self-contained `index.html` file in a single ```html code block. Requirements:
- Use three.js (r160 or newer) loaded from a CDN through an `<script type="importmap">` (e.g. jsDelivr or unpkg); addons such as OrbitControls may be imported from the same CDN via the import map.
- No other files: no external textures, models, fonts or images. Generate any textures procedurally in code.
- It must run by simply opening index.html in a modern desktop browser, fill the window, and handle resize.
- Animate with requestAnimationFrame and a clock, so it looks right at any frame rate.
- No explanation is needed outside the code block.

Build a Three.js scene: A red and cream vintage biplane performs loops, barrel rolls and a hammerhead over a grassy airfield, trailing white smoke ribbons that persist and slowly fade. Its propeller spins as a motion-blurred disc and the ailerons visibly deflect during rolls. Pressing keys 1-3 selects the next manoeuvre, and the camera tracks the plane from the ground like a spectator. Use a bright blue summer sky with puffy instanced clouds. 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. 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: A retro arcade claw machine with a glass cabinet, chasing marquee lights and a pile of round pastel plush creatures stands in a dim arcade. Use the arrow keys to move the three-pronged claw over the pile and Space to drop it; the claw descends, closes, and may grip a plush that sometimes slips during the lift. A successful grab drops the plush down the prize chute with a burst of confetti; the camera is front-facing with slight mouse parallax. 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. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Build a single self-contained Three.js scene of a fantasy sailing ship at sea, seen from a cinematic three-quarter view. The ship has a carved dragon figurehead at the bow with an open jaw and horns, a wooden hull with visible planking and a raised stern castle, three masts with full canvas sails that billow and a few pennants, rigging lines, and lanterns along the rail. It sails on animated water with rolling waves, foam at the bow, reflections and a sun path on the surface. Behind it a rocky coast with a small harbour town: stone houses with tiled roofs, a lighthouse, a pier and scattered trees on green hills. Warm late-afternoon lighting with a low sun, long shadows, light haze in the distance and a sky with a few clouds. The camera slowly orbits the ship. Everything is built in code from Three.js geometry and materials; no external models or textures.

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.

Build the Eiffel Tower in Three.js. 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 before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a Three.js scene: A single-cylinder engine is shown in a half-transparent steel block, with crankshaft, connecting rod, piston and two cam-driven poppet valves animating in sync through intake, compression, power and exhaust. Fuel-air mix is shown as blue particles, the spark as a white flash, and exhaust as grey smoke particles. The up and down arrow keys change RPM, and a floating label names the current stroke. The camera orbits on drag with a workshop-grey backdrop and warm key light. 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. 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: A dozen hot air balloons with striped procedural envelopes rise at different rates over rolling green fields, their burners flaring orange and lifting them in pulses. Clicking a balloon fires its burner, so it visibly glows and climbs faster. Balloons drift with a gentle wind field and the camera slowly rises with the fleet. The sky is a pale dawn gradient with soft volumetric-looking haze bands. 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. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Build a real-time 3D world in Three.js that looks like a living impressionist oil painting (one HTML file, CDN imports only, no external assets or textures; everything procedural). The whole frame must read as painted, not as a 3D render with a filter: a brush-stroke post-process (oriented, varied-size strokes that follow surface direction and color, visible canvas grain), a painterly sky with broken-color clouds, water with dappled reflections of the sky and shore, and a small landscape (garden, footbridge or shoreline, trees, flowers). Add falling snow that is painted too, and flocks of birds flying through the scene. Include two or three painted figures; clicking one opens a short in-world dialogue in a hand-lettered caption style. Interactive camera (orbit plus a gentle walk mode), a time-of-day slider that shifts the palette from cool morning to warm dusk, and a toggle that compares the painted view with the plain render. Must stay smooth on a laptop and usable on a phone (touch controls, adaptive quality). It should feel like stepping into a painting.

Build a Three.js scene of a huge glowing jellyfish walking through a rainy city at night on very tall, thin, jointed legs, presented as a live disaster news broadcast. The jellyfish's translucent bell pulses with soft bioluminescent light, its tentacles sway beneath it, and each slow stride steps between the towers while rain streaks through the light and wet streets reflect neon signs and headlights. Frame it like a TV emergency broadcast: a main camera feed plus several smaller feeds from other angles (street level, a helicopter, a rooftop) that update as the creature moves; a HUD with a channel logo, a red LIVE badge, a scrolling news ticker, a clock and coordinates; and an event log panel that adds timestamped entries as the jellyfish crosses the city. Keep the mood tense and cinematic, with fog, flickering streetlights and flashing red and blue emergency lights. Everything is built in code from Three.js geometry, shaders and materials; no external models or textures. 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 before finishing. Close any browser you open as soon as you've taken your screenshot.

# Test: threejs_mechanical_bee

Build a real-time 3D scene in three.js of an animated **mechanical (clockwork) bee**.

- The bee is built from many distinct parts: a segmented abdomen, thorax, head with compound-eye lenses, antennae, six jointed legs and two pairs of wings.
- Materials are physically based (MeshStandardMaterial or MeshPhysicalMaterial): polished and aged **brass**, brushed **steel**, a little dark enamel or glass, with believable metalness/roughness. Use an environment map (e.g. RoomEnvironment with PMREMGenerator) so the metal reflects.
- The **wings beat fast** (a visible blur-like flutter, thin translucent panels with a metal frame/veins).
- Several visible **gears turn** inside the body (meshing gears turn in opposite directions at speeds consistent with their tooth counts).
- The whole bee **hovers with a gentle bob and slight sway loop** in mid-air; legs and antennae move a little.
- **OrbitControls** let the viewer orbit, zoom and pan around the bee, with damping.
- **Nice lighting**: a key light with soft shadows, a fill and a rim light, tone mapping (ACES or AgX) and sRGB output; a tasteful backdrop or ground so the shadow reads.
- Aim for a polished, showcase-quality look.


Deliverable: reply with exactly one complete, self-contained `index.html` file in a single ```html code block. Requirements:
- Use three.js (r160 or newer) loaded from a CDN through an `<script type="importmap">` (e.g. jsDelivr or unpkg); addons such as OrbitControls may be imported from the same CDN via the import map.
- No other files: no external textures, models, fonts or images. Generate any textures procedurally in code.
- It must run by simply opening index.html in a modern desktop browser, fill the window, and handle resize.
- Animate with requestAnimationFrame and a clock, so it looks right at any frame rate.
- No explanation is needed outside the code block.

Build a complete, polished mobile-first 3D arcade game in Three.js as one self-contained index.html (no external assets; all geometry, textures and sound procedural). Portrait orientation, touch controls (swipe/drag and tap) with keyboard fallback for desktop. Include a title screen, at least 3 increasing difficulty phases, score and best-score persistence in localStorage, juicy feedback (screen shake, particles, procedural Web Audio sfx), pause/resume when the tab is hidden, and a game-over screen with restart. Must hold 60 fps on a mid-range phone; keep draw calls low with instancing.

Build an interactive Three.js scene of a single red Japanese maple (momiji) standing on a small rocky island in a still, misty lake. Its leaves are deep autumn red and orange; some drift down onto the water, where they float and leave gentle ripples. Low mist hangs over the lake and soft mountain silhouettes fade into the haze behind. A stone lantern stands beside the tree with a warm flame inside. Let the viewer interact: dragging across the water stirs the floating leaves and sends ripples through them, clicking the lantern makes it swing so its light sways across the water, and a dial turns the time of day from dawn through day and dusk to moonlight, changing the sky, the colour of the mist, the lighting and the reflections, with the moon and its reflection at night. Keep the mood calm and painterly, with a light wind moving the branches. Everything is built in code from Three.js geometry, shaders and materials; no external models or textures. 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 before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a Three.js scene: A synthwave hover-bike race down an infinite grid highway beneath a striped magenta sunset sun and wireframe mountains. Steer between three lanes with A and D to dodge glowing pylons and collect cyan energy rings while speed slowly increases. The chase camera tilts into turns with a bloom-like glow, and a distance score is shown in retro chrome lettering. 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. 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: 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: A full 3D pinball table themed as outer space, with planet-shaped bumpers, a ringed-Saturn spinner and LED-like emissive lane lights. The Z and M keys flip the left and right flippers, and Space pulls and releases the plunger with a held power charge. Bumpers flash and bounce the steel ball, the score shows on a floating dot-matrix panel, and the camera sits at a classic tilted player view. 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. 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: A small floating diorama chunk of island with a cliff cross-section shows layered rock, a palm tree, a wooden pier, a beached rowboat and a hidden treasure cave lit by a lantern. Waves lap the shore via a shader, gulls circle, and the palm sways. Click the X-marked sand to dig: sand particles fly and a chest rises and opens with a golden glow; the camera slowly orbits the floating base against a teal sky gradient. 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. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Build a single self-contained index.html using Three.js (imported from a pinned CDN; no external models, textures or other assets) that shows a full humanoid powered-armour suit built only from code: primitives, extruded shapes, lathes and generated geometry. Aim for 500 or more distinct mesh parts (plates, joints, pistons, vents, bolts, cables, lights) with a coherent, detailed design and good materials and lighting. Include an assemble / explode animation (parts fly in and lock into place, and can be exploded back out), a sci-fi HUD overlay (targeting reticle, part labels that track parts on screen, a system status panel), orbit controls, and buttons to trigger assemble and explode. It must run smoothly and work with touch on mobile. When the suit is built, log the total number of distinct mesh parts to the console as: PART_COUNT <n>. Write everything into the working directory and finish with a short README.md.

Build a Three.js scene: A pastel kitchen countertop holds a chain-reaction contraption: a rolling marble tips dominoes, which trigger a seesaw, release a toy car down a ramp, pull a string that drops toast into a toaster, and finally flip a lever that pours a cup of cereal. Click to start the sequence and press R to reset it, and each stage must visibly cause the next. A cinematic camera follows the active stage along a smooth spline path. 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. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Build a single Three.js page with five physics scenes and a scene switcher (buttons or tabs) to move between them; each scene can be restarted. 1) An explosion in a desert: a blast with a fireball, smoke, sand and debris thrown outward and falling back under gravity, and a shockwave rippling across the dunes. 2) A tornado: a funnel of swirling dust and debris over flat land that picks up small objects and spins them upward. 3) A balloon pop: a rubber balloon inflates, stretches and bursts, its fragments flying off and settling. 4) A water drop fall: a drop falls into still water, making a splash crown, a rebound jet, droplets and spreading ripples. 5) A Newton's cradle: five steel balls on strings where the end ball swings in and its momentum passes through the row, with believable collisions and slowly damped swinging. Make the motion physically believable (gravity, momentum, collisions, damping), light each scene well and label it. Everything is built in code from Three.js geometry, shaders and materials; no external models or textures. 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 before finishing. Close any browser you open as soon as you've taken your screenshot.

Build an explorable tropical island in Three.js. The island has white sand beaches, palm trees, a green hilly interior and a small fishing village of wooden huts with thatched roofs, joined to the sea by a long wooden pier with boats moored alongside. The ocean around it is animated, with waves, foam along the shore and clear shallow water over a reef where fish swim among corals and sea plants, fading to deep blue further out. Let the player switch between modes: walk on the island, swim at the surface, dive underwater (with underwater fog and caustic light), sail a small boat around the island, and fly a free camera. Add a time-of-day panel with a slider that moves the sun from morning through sunset to night, changing the sky, lighting and water colours, with stars and lit windows in the village at night. Show the controls on screen. Everything is built in code from Three.js geometry, shaders and materials; no external models or textures. 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 before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a single-page Three.js scene that recreates three Victorian optical toys in 3D: a zoetrope (spinning slotted drum with a strip of 12 frames), a phenakistiscope (spinning disc viewed in a mirror), and a praxinoscope (mirror drum). Each toy must actually produce the illusion of motion by simulating the slit/mirror shutter, not by playing a canned animation: the viewer sees a galloping horse or bouncing ball emerge only when the drum spins at the right speed. Controls: pick a toy, drag to spin (with inertia), a speed slider, a toggle for 'look through the slits' vs orbit camera, and a strobe-sync readout showing frames per second seen. Procedural frame art only, no external assets. One self-contained index.html, runs on desktop and phone.

Build a conceptual X-16 engine in 3D with Three.js: four cylinder banks, one crankshaft and exposed mechanics inspired by experimental multi-bank engine architectures. Make it animate (pistons, rods and crank moving in sync) with orbit controls. 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 in the current directory. Three.js may load from a CDN or be vendored. 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 one-page scroll-driven WebGL story in the style of an award-winning Codrops demo: 'The life of a raindrop', in 5 scroll chapters (cloud, fall, river, ocean, evaporation). Each chapter has a distinct shader-driven scene (Three.js, WebGPU renderer with WebGL fallback), with smooth transitions tied to scroll position (no scroll hijack jank), crisp typography overlays, and a progress indicator. Must hold 60 fps on a mid-range laptop and degrade gracefully on phones. Procedural visuals only, no external images or video. One self-contained index.html plus inline JS/CSS.

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.

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.

A complete chess board with all 32 pieces in a midgame position, pieces lathe-modelled (pawn, rook, bishop, knight simplified, queen, king) in polished light and dark wood, on a checkered board with a bevelled frame. Low-angle camera, soft area light, shallow depth of field. 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). Then render a wireframe view of the same scene from the same camera at 1920x1080 (for example the Workbench engine with wireframe shading, or a wireframe pass) and save it as wireframe.png here too, 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.

A cosy isometric room cutaway: two walls and a floor holding a bookshelf with varied books, a desk with a lamp, laptop and mug, a reading armchair with a throw blanket, a rug, potted plants and a window with night sky. Warm lamp light plus soft moonlight. 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). Then render a wireframe view of the same scene from the same camera at 1920x1080 (for example the Workbench engine with wireframe shading, or a wireframe pass) and save it as wireframe.png here too, 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.

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.

Using Blender's Python API only (a script run headless with blender -b -P), build a humanoid character with an armature (hips, spine, neck, head, arms with elbows and hands, legs with knees and feet) skinned to a simple stylised body mesh, and animate a seamless looping walk cycle of 32 frames at 24 fps. The walk must look human: knees and elbows bend one way only within realistic joint limits, feet plant with no sliding during contact, the pelvis bobs and the torso stays upright, and arms swing opposite to the legs. Add a three-point light and a camera. Render a 1280x720 PNG still of a mid-stride frame to render.png, render a turntable video to turntable.mp4 (the character walking in place while the camera orbits once around it, 1280x720, 24 fps, at least 4 seconds), save scene.blend, and export walk.glb with the armature and the walk animation (no cameras or lights). Write everything into the working directory.

A circular diorama base with a rocky islet, a striped lighthouse with a lantern room and railing, a keeper's cottage, a small jetty with a rowing boat, and stylised low-poly waves. Blue-hour lighting with a warm glow from the lantern and cottage windows. 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). Then render a wireframe view of the same scene from the same camera at 1920x1080 (for example the Workbench engine with wireframe shading, or a wireframe pass) and save it as wireframe.png here too, 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.

Make a low-poly scene in Blender of a dragon guarding its treasure: a stylised low-poly dragon curled protectively around a heap of gold coins, gems and an open treasure chest in a rocky cave, lit by the warm glow of the gold and a cool light from the cave mouth. 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). Then render a wireframe view of the same scene from the same camera at 1920x1080 (for example the Workbench engine with wireframe shading, or a wireframe pass) and save it as wireframe.png here too, 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.

A sci-fi pilot helmet with a tinted visor, panel seams, side vents, a small antenna, cable connectors and chipped painted armour plates in two tones. Display it on a stand against a dark gradient backdrop with a three-point light setup and a subtle emissive strip along the visor rim. 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). Then render a wireframe view of the same scene from the same camera at 1920x1080 (for example the Workbench engine with wireframe shading, or a wireframe pass) and save it as wireframe.png here too, 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.

Using Blender's Python API only (a script run headless with blender -b -P), model SpongeBob SquarePants as a stylised 3D character: porous yellow sponge body, white shirt, red tie, brown square pants, big eyes with blue irises, buck teeth, thin arms and legs with white socks and black shoes. Use real material colours (Principled BSDF base colours, not procedural-only) so the model keeps its colours when exported. Add a simple three-point light and camera, render a 1280x720 PNG to render.png, save scene.blend, and export model.glb (apply modifiers, no cameras or lights). Write everything into the working directory.

A classic steam locomotive and tender on a short stretch of track: boiler with rivet bands, smokestack, steam dome, cab with windows, six driving wheels with connecting rods and cowcatcher. Dark painted metal with brass accents, lit by a low late-afternoon sun. 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). Then render a wireframe view of the same scene from the same camera at 1920x1080 (for example the Workbench engine with wireframe shading, or a wireframe pass) and save it as wireframe.png here too, 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.

A 1950s-style rangefinder film camera with no logos: knurled dials, a leatherette-textured body, a chrome top plate, a collapsible lens barrel with engraved-looking rings, and a wrist strap. Place it on a walnut desk and light it with a warm key light and a cool rim light. 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). Then render a wireframe view of the same scene from the same camera at 1920x1080 (for example the Workbench engine with wireframe shading, or a wireframe pass) and save it as wireframe.png here too, 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.

Build a HyperFrames composition titled "Artemis II: Return to the Moon" — a
cinematic 60-second explainer video (16:9, 1920x1080) visualizing NASA's
Artemis II crewed lunar flyby mission (April 1–11, 2026).
VISUAL IDENTITY
Style: "Mission Control Cinematic" — dark deep-space canvas with precision
data overlays, inspired by NASA flight dynamics consoles and cinematic
space documentaries.
- Palette: #05070D (void black), #0B1426 (deep navy), #E8EEF7 (bone white),
  #FF6B35 (ignition orange), #4FC3F7 (telemetry cyan), #FFD166 (lunar gold)
- Typography: "Space Grotesk" for titles/headings, "JetBrains Mono" for
  telemetry, coordinates, timestamps, distances
- Motion: precise, weighted easing (power3.out, expo.out). No bouncy motion.
  Data counters use tabular-nums. Subtle starfield parallax on all scenes.
SCENE BREAKDOWN (7 scenes, ~8–9s each, shader crossfade transitions)
Scene 1 — TITLE CARD (0–8s)
Hero title "ARTEMIS II" at 180px, subtitle "First Crewed Lunar Flyby in
Over 50 Years" at 36px. Mission patch silhouette fades in behind. Mono
datetime stamp bottom-left: "APR 01 2026 · 22:35 UTC · KSC LC-39B".
Scene 2 — LAUNCH & HIGH EARTH ORBIT (8–16s)
SLS rocket SVG silhouette with animated exhaust plume. Heading "PHASE 01 ·
LAUNCH + HIGH EARTH ORBIT". Ticker with live telemetry: altitude counting
up, velocity in km/s, T+ mission elapsed time. Annotation: "~24h elliptical
orbit for system checkouts".
Scene 3 — TRANS-LUNAR INJECTION (16–24s)
Animated orbital diagram: Earth (left), Moon (right), curved free-return
trajectory drawn with SVG stroke-dashoffset animation in cyan. Label
"TRANS-LUNAR INJECTION BURN · 6 MIN" with flame icon at burn point.
Stat card: "Δv: +3.05 km/s".
Scene 4 — OUTBOUND COAST (24–32s)
Orion capsule wireframe drifting across frame. Progress bar "EARTH → MOON"
filling left-to-right over 4 days. Distance counter animating from
384,000 km down to closest-approach value. Subtle earthrise reference.
Scene 5 — LUNAR FLYBY (32–42s) — HERO MOMENT
Full-frame Moon with crater texture. Trajectory arc sweeps behind the far
side. Pulsing marker labeled "CLOSEST APPROACH · APR 06 2026 · 6,545 km".
Secondary stat: "DISTANCE FROM EARTH · 406,771 KM — FARTHEST HUMANS HAVE
EVER TRAVELED". Crew name plate fades in: Wiseman · Glover · Koch · Hansen.
Scene 6 — RETURN COAST (42–50s)
Mirror of Scene 4 in reverse — trajectory arc completing the figure-8.
Heading "FREE-RETURN · GRAVITY BRINGS THEM HOME". Re-entry velocity
counter climbing toward 11 km/s.
Scene 7 — SPLASHDOWN (50–60s)
Pacific Ocean horizon at dawn, Orion under three parachutes. Final stat
block: "10 DAYS · 1 FLYBY · 4 ASTRONAUTS · ∞ AMBITION". Closing title
"APR 11 2026 · PACIFIC OCEAN · MISSION COMPLETE". Fade to black on
"NEXT: ARTEMIS III — BOOTS ON THE MOON".
TECHNICAL
- Generate a DESIGN.md before writing any HTML with the palette, typography,
  and "What NOT to Do" list (no generic blues, no Roboto, no bouncy easing,
  no full-screen linear gradients on dark backgrounds).
- Use sub-compositions for each scene (scene-1.html through scene-7.html).
- Shader crossfade transitions between scenes (~0.6s each).
- All data counters deterministic (seeded PRNG if needed, no Date.now).
- Run `npx hyperframes lint` and `npx hyperframes validate` before finalizing.

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 60-second motion-graphic explainer video on the history of the printing press, from its origins to the present day.

[Roles]
- Higgsfield: creates every image in the video (still images only).
- You: create all motion graphics and animation.

[Style]
Newspaper cutouts with mixed-media collage, highly polished: layered paper cutouts, torn edges, halftone textures, soft shadows, and bold editorial typography.

[Rules]
- Keep every fact and date accurate.
- No text inside the Higgsfield images. Add all text yourself as animated typography.
- Keep the look consistent across every scene.
- End on the opening frame so the video loops. Never end on a hard cut.

[Harness notes] Images come from the image-generation tool available to you (still images only). Render the final video to out.mp4 (1920x1080, 60 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.

Create a single self-contained HTML file (inline CSS and JavaScript only; SVG for all graphics; no canvas, no external libraries, fonts or network requests) that plays a polished motion graphic, like a studio-made data animation.

The motion: one dataset of 6 values (Mon-Sat: 42, 68, 55, 90, 74, 61) morphs through three chart states in a continuous loop:
1. Bar chart: 6 bars grow up from the baseline, with axis, gridlines and value labels.
2. The bars smoothly morph into a line chart: each bar collapses into a point at its top, the points connect with a line that draws itself, and an area fill fades in beneath it.
3. The line chart morphs into a donut chart: the 6 values become 6 coloured arcs that sweep around a ring, with the total counting up in the centre.
4. The donut morphs back into the bar chart and the loop repeats.
Each state holds for about 2 seconds and each transition takes about 1.5 seconds, so one loop is about 14 seconds. Every element must visibly travel from one state to the next (true morphing, not a crossfade). Each state shows a small label naming it ("Bars", "Line", "Donut"), and labels animate in and out.

Requirements:
- Use expressive easing (ease-in-out, overshoot, staggered delays between the 6 elements).
- Dark, modern design with a cohesive colour palette; portrait 4:5 layout, scaled to fit the browser window and centred.
- Motion starts immediately at page load: something is already moving in the first half second.
- Drive all animation with requestAnimationFrame and performance.now; no user interaction needed.
- No other text, titles, buttons or UI beyond the chart labels, values and state labels.

Reply with only the complete HTML file.

Create a single self-contained HTML file (inline CSS and JavaScript only; no external libraries, fonts, images or network requests) that paints a detailed watercolour painting live, step by step, the way a real artist works.

Scene: a Venetian canal at golden hour. A gondola with a gondolier in the foreground, an arched stone bridge in the middle distance, tall old buildings with balconies, shutters, flower boxes and hanging laundry on both sides, a church dome and bell tower against a warm sky, soft reflections rippling in the water.

The painting builds itself on a canvas and/or SVG over about 25 seconds, in four visible stages:
1. Pencil sketch (about 0-6 s): light grey graphite construction lines and contours drawn stroke by stroke, slightly wobbly and hand-made.
2. Ink lines (about 6-11 s): confident dark brown/sepia pen lines trace over the key contours, stroke by stroke.
3. Layered washes (about 11-21 s): transparent watercolour washes bloom in, from light to dark: sky first, then buildings, water, shadows. Soft bleeding edges, pigment pooling at the edges of each wash, granulation, visible paper texture showing through.
4. Details (about 21-25 s): final darker accents, window details, highlights on the water, a few loose splatters.
Then hold the finished painting on screen (do not loop or restart).

Requirements:
- Start drawing immediately at page load; the first strokes must be visible within the first half second.
- Portrait 4:5 composition on warm off-white textured paper, scaled to fit the browser window and centred; the page background around it is a neutral colour.
- Drive all animation with requestAnimationFrame and performance.now (no setTimeout-only timing, no user interaction needed).
- No text, titles, labels, captions, buttons or UI of any kind on the page. Only the painting.
- Make it as beautiful and detailed as you can: it should look like a real watercolour, not flat vector shapes.

Reply with only the complete HTML file.

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 an interactive e-commerce conversion funnel dashboard from the exact dataset below (CSV: one row per week and acquisition channel with sessions, product views, add-to-cart events, checkouts started, orders and revenue in US dollars). Embed the data in the page verbatim and compute every number from it; do not invent or alter any value.

week,channel,sessions,product_views,add_to_cart,checkout_started,orders,revenue_usd
W01,Organic search,41078,23808,3022,1664,1007,61604.87
W01,Paid social,29553,16291,2453,1413,439,28577.0
W01,Email,9676,6212,765,421,263,17543.38
W01,Affiliates,12459,8376,1123,612,294,19534.46
W02,Organic search,39462,27334,3685,1940,1028,71414.28
W02,Paid social,30938,17683,2757,1524,410,27158.28
W02,Email,9600,6541,909,539,348,21743.58
W02,Affiliates,12881,8218,1003,504,263,17113.4
W03,Organic search,44423,24608,3329,1856,1259,86784.87
W03,Paid social,30858,18201,2214,1150,460,31397.77
W03,Email,9521,5537,625,323,201,12787.56
W03,Affiliates,12450,7220,807,369,252,14706.22
W04,Organic search,42148,27564,4059,1961,1211,80712.33
W04,Paid social,31643,21078,2811,1606,424,28675.25
W04,Email,8990,5420,621,300,186,12825.63
W04,Affiliates,11171,6965,891,459,260,18220.72
W05,Organic search,40552,24076,2693,1602,1065,73137.37
W05,Paid social,27957,19064,2258,1166,380,22865.57
W05,Email,8419,5117,768,458,333,23433.12
W05,Affiliates,13002,8405,991,519,305,21023.72
W06,Organic search,41353,25171,2806,1464,1037,69935.08
W06,Paid social,31261,20635,2962,1610,478,34375.73
W06,Email,8785,5180,602,350,243,14675.03
W06,Affiliates,10876,6911,846,419,217,13958.06
W07,Organic search,45923,26492,2996,1453,1009,63590.97
W07,Paid social,30650,19483,2477,545,397,24507.5
W07,Email,9762,5572,885,427,274,19092.88
W07,Affiliates,12569,8516,1339,607,290,19871.0
W08,Organic search,39257,22508,3067,1608,1090,80304.82
W08,Paid social,27396,18815,2887,1521,370,24924.69
W08,Email,8732,4905,694,357,256,16113.52
W08,Affiliates,12974,7423,871,490,300,18588.38
W09,Organic search,43769,27584,3167,1885,1164,80776.52
W09,Paid social,32979,21507,2954,1761,474,29511.87
W09,Email,9766,5958,740,349,222,13038.74
W09,Affiliates,11969,7534,986,487,256,15410.29
W10,Organic search,62108,38464,5685,2645,1591,112152.09
W10,Paid social,43357,28900,4203,2065,628,42320.58
W10,Email,9833,5660,688,400,279,19964.74
W10,Affiliates,15861,10838,1246,663,324,20077.73
W11,Organic search,61607,38179,4958,2802,1692,112147.42
W11,Paid social,36623,25030,3720,1756,497,33026.25
W11,Email,9552,5336,669,369,239,14580.06
W11,Affiliates,15696,10500,1268,676,317,19178.7
W12,Organic search,40329,25455,3443,1880,1081,70528.56
W12,Paid social,29585,20344,2424,1159,401,24455.8
W12,Email,8312,5695,677,330,203,12879.42
W12,Affiliates,13056,7443,910,502,296,17318.13

The dashboard needs: an animated funnel chart (sessions to orders) with the drop-off at every stage as a count and a percentage; KPI cards for revenue, orders, conversion rate, average order value and revenue per session, each with its change versus the previous four weeks; a channel comparison of conversion rate and revenue per session; a weekly trend chart with a metric switcher; a stage-by-week heatmap of step conversion rates that makes anomalies obvious, with any week where a step rate falls below 60 percent of its channel average flagged and explained; a what-if panel with sliders to lift each stage's conversion and see projected orders and revenue; filters by channel and week range that update everything; and hover or tap tooltips with exact values. Make it sharp, modern and executive-ready. So the page is alive without input, on load the funnel pours in stage by stage and a tour cycles forever: it switches channels on the funnel, steps through the weeks on the trend chart, flags the anomaly on the heatmap, and moves the what-if sliders to show the projection, until the user touches a control.

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 football league season dashboard from the exact dataset below (CSV: every match of a 10-team double round-robin season, 18 rounds, with home and away team and goals). Embed the data in the page verbatim and compute every number from it; do not invent or alter any value. Use 3 points for a win and 1 for a draw; rank by points, then goal difference, then goals scored, then team name.

round,home,away,home_goals,away_goals
1,Harbour City,Dunmore,1,0
1,Northgate,Eastholm,1,0
1,Riverside,Westvale,1,4
1,Old Town,Millbrook,3,1
1,Kingsport,Ashford,1,4
2,Harbour City,Eastholm,1,1
2,Dunmore,Westvale,1,0
2,Northgate,Millbrook,3,0
2,Riverside,Ashford,0,0
2,Old Town,Kingsport,0,1
3,Harbour City,Westvale,0,0
3,Eastholm,Millbrook,1,0
3,Dunmore,Ashford,0,0
3,Northgate,Kingsport,2,2
3,Riverside,Old Town,2,2
4,Harbour City,Millbrook,0,1
4,Westvale,Ashford,3,0
4,Eastholm,Kingsport,1,0
4,Dunmore,Old Town,3,0
4,Northgate,Riverside,4,1
5,Harbour City,Ashford,1,0
5,Millbrook,Kingsport,2,0
5,Westvale,Old Town,1,0
5,Eastholm,Riverside,2,0
5,Dunmore,Northgate,1,0
6,Harbour City,Kingsport,1,1
6,Ashford,Old Town,4,0
6,Millbrook,Riverside,0,0
6,Westvale,Northgate,1,1
6,Eastholm,Dunmore,1,2
7,Harbour City,Old Town,1,1
7,Kingsport,Riverside,4,2
7,Ashford,Northgate,2,0
7,Millbrook,Dunmore,1,1
7,Westvale,Eastholm,1,1
8,Harbour City,Riverside,1,0
8,Old Town,Northgate,2,2
8,Kingsport,Dunmore,1,2
8,Ashford,Eastholm,3,0
8,Millbrook,Westvale,1,3
9,Harbour City,Northgate,1,3
9,Riverside,Dunmore,1,0
9,Old Town,Eastholm,0,2
9,Kingsport,Westvale,0,1
9,Ashford,Millbrook,1,1
10,Dunmore,Harbour City,3,1
10,Eastholm,Northgate,1,1
10,Westvale,Riverside,1,0
10,Millbrook,Old Town,1,1
10,Ashford,Kingsport,3,1
11,Eastholm,Harbour City,1,2
11,Westvale,Dunmore,2,2
11,Millbrook,Northgate,0,4
11,Ashford,Riverside,3,0
11,Kingsport,Old Town,3,1
12,Westvale,Harbour City,2,1
12,Millbrook,Eastholm,3,2
12,Ashford,Dunmore,4,0
12,Kingsport,Northgate,1,1
12,Old Town,Riverside,0,0
13,Millbrook,Harbour City,1,0
13,Ashford,Westvale,1,0
13,Kingsport,Eastholm,2,0
13,Old Town,Dunmore,0,1
13,Riverside,Northgate,0,1
14,Ashford,Harbour City,2,1
14,Kingsport,Millbrook,2,0
14,Old Town,Westvale,0,0
14,Riverside,Eastholm,0,2
14,Northgate,Dunmore,2,0
15,Kingsport,Harbour City,4,1
15,Old Town,Ashford,2,1
15,Riverside,Millbrook,0,1
15,Northgate,Westvale,1,3
15,Dunmore,Eastholm,0,2
16,Old Town,Harbour City,1,0
16,Riverside,Kingsport,2,4
16,Northgate,Ashford,0,1
16,Dunmore,Millbrook,0,0
16,Eastholm,Westvale,0,0
17,Riverside,Harbour City,1,0
17,Northgate,Old Town,2,0
17,Dunmore,Kingsport,0,3
17,Eastholm,Ashford,1,1
17,Westvale,Millbrook,2,0
18,Northgate,Harbour City,4,2
18,Dunmore,Riverside,0,3
18,Eastholm,Old Town,0,1
18,Westvale,Kingsport,3,1
18,Millbrook,Ashford,0,2

The dashboard needs: the final league table (played, won, drawn, lost, goals for, goals against, goal difference, points, and a form guide of the last five results as coloured chips); a position-by-round bump chart showing every team's league position after each round, with a team highlighted on hover or tap; a round slider that recomputes the table as it stood after any round; home versus away performance bars per team; a results matrix (home team rows by away team columns) with scores and win/draw/loss colouring; KPI cards for total goals, goals per match, home win percentage and the biggest win; a team detail panel with its points trajectory and results list; and filters for home-only or away-only tables. Make it look like a premium sports data site. So the page is alive without input, on load it animates the bump chart round by round with the table re-ordering live as the round slider advances from 1 to 18, then spotlights the champion, the biggest climber and the biggest win, and restarts, forever, until the user touches a control.

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 race results dashboard for a city marathon from the exact dataset below (CSV: one row per finisher with bib number, running club, gender, age, and cumulative split times at 10 km, 21.1 km, 30 km and the finish, as h:mm:ss). Embed the data in the page verbatim and compute every number from it; do not invent or alter any value.

bib,club,gender,age,split_10k,split_21k,split_30k,finish
101,Trail Foxes,M,42,0:38:49,1:23:18,2:00:42,2:53:35
102,Hill Striders,M,31,0:56:17,2:00:23,2:54:35,4:08:29
103,Trail Foxes,F,32,0:53:48,1:57:22,2:48:26,3:59:47
104,Harbour Harriers,F,34,0:38:43,1:22:03,1:58:26,2:50:16
105,Unattached,M,63,0:49:28,1:47:17,2:35:54,3:41:18
106,Harbour Harriers,F,47,0:43:01,1:33:33,2:15:02,3:10:08
107,Riverside RC,F,46,0:57:12,2:01:54,2:56:06,4:11:08
108,Hill Striders,F,65,0:58:44,2:04:07,2:59:04,4:14:16
109,Trail Foxes,M,23,0:47:00,1:41:05,2:27:59,3:33:42
110,Riverside RC,F,33,0:38:05,1:22:31,1:58:42,2:47:09
111,Hill Striders,F,24,0:49:32,1:46:25,2:33:20,3:36:35
112,Riverside RC,M,31,0:40:53,1:25:55,2:04:02,2:56:05
113,Hill Striders,F,23,0:59:57,2:07:30,3:05:48,4:24:21
114,Hill Striders,F,56,0:43:40,1:31:52,2:12:51,3:08:42
115,Night Owls,F,27,1:04:18,2:16:58,3:17:51,4:43:11
116,Trail Foxes,F,32,0:52:37,1:53:05,2:43:31,3:50:54
117,Riverside RC,F,61,0:58:21,2:06:34,3:03:57,4:21:53
118,Night Owls,M,56,1:09:04,2:29:52,3:35:02,5:03:19
119,Trail Foxes,F,41,0:51:51,1:50:44,2:39:58,3:48:28
120,Trail Foxes,M,46,0:50:39,1:47:19,2:33:58,3:37:12
121,Unattached,F,23,0:43:04,1:31:38,2:12:22,3:09:08
122,Night Owls,M,23,1:02:58,2:15:44,3:15:51,4:35:10
123,Harbour Harriers,M,20,1:00:07,2:08:57,3:05:52,4:23:52
124,Hill Striders,M,43,1:01:59,2:11:47,3:11:33,4:34:11
125,Riverside RC,F,22,0:50:26,1:48:00,2:33:34,3:36:33
126,Trail Foxes,F,39,0:58:33,2:04:49,3:00:44,4:19:12
127,Trail Foxes,M,46,0:54:21,1:56:35,2:45:20,3:52:00
128,Night Owls,F,64,0:45:32,1:37:06,2:21:19,3:22:05
129,Night Owls,M,65,1:11:26,2:30:42,3:41:16,5:16:12
130,Night Owls,M,52,0:49:55,1:45:53,2:31:22,3:31:47
131,Night Owls,M,60,1:03:35,2:15:31,3:13:10,4:33:22
132,Harbour Harriers,F,55,0:48:01,1:42:09,2:27:37,3:29:17
133,Riverside RC,M,43,1:00:00,2:10:39,3:06:46,4:24:18
134,Harbour Harriers,M,65,1:03:38,2:17:14,3:18:32,4:39:33
135,Trail Foxes,M,19,0:41:42,1:29:20,2:09:13,3:04:28
136,Unattached,F,47,1:08:22,2:25:56,3:30:25,4:56:39
137,Hill Striders,F,27,0:48:32,1:43:43,2:29:29,3:34:35
138,Riverside RC,F,35,0:37:55,1:20:58,1:58:03,2:49:59
139,Hill Striders,F,24,1:00:43,2:10:31,3:11:15,4:35:15
140,Harbour Harriers,F,67,0:52:15,1:52:16,2:45:10,3:58:17
141,Riverside RC,F,40,0:43:29,1:32:31,2:14:14,3:11:05
142,Unattached,M,31,0:57:26,2:02:30,2:58:16,4:18:08
143,Unattached,F,30,0:53:17,1:51:21,2:41:12,3:50:40
144,Hill Striders,F,28,0:44:48,1:37:12,2:20:19,3:19:02
145,Trail Foxes,F,34,0:42:36,1:31:24,2:10:59,3:03:51
146,Harbour Harriers,F,56,0:41:36,1:28:29,2:09:20,3:08:14
147,Unattached,F,57,0:52:02,1:49:55,2:40:54,3:53:11
148,Night Owls,F,56,0:45:58,1:36:48,2:18:55,3:15:52

The dashboard needs: a sortable, searchable results table with overall place, gender place, age group (under 30, 30-39, 40-49, 50-59, 60 and over), finish time and average pace per km; KPI cards for finishers, winning time, first woman, median finish time and the number of negative splits (second half faster than the first); a finish-time histogram with five-minute bins; a pace chart showing every runner's pace per segment as faint lines with the selected runner highlighted; a 'race replay' visual where every runner is a dot moving along a stylised course in proportion to their splits, with a time scrubber and leaderboard; club and age-group comparison bars; filters by gender, age group and club that update everything; and hover or tap details for any runner. Make it feel like a premium sports-broadcast graphic. So the page is alive without input, on load it plays the race replay from the gun to the last finisher on a loop with the leaderboard updating, then highlights the winner, the first woman and the runner with the strongest negative split in turn, forever, until the user touches a control.

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 electricity grid dashboard for one day on a regional power grid from the exact dataset below (CSV: hourly average generation by source in megawatts, battery output where negative values mean the batteries are charging, total demand, and the wholesale price in US dollars per megawatt-hour). Embed the data in the page verbatim and compute every number from it; do not invent or alter any value.

hour,solar_mw,wind_mw,hydro_mw,gas_mw,coal_mw,battery_mw,demand_mw,price_usd_mwh
00:00,0,908,477,2389,1134,0,4908,66.39
01:00,0,1029,489,1949,1187,0,4654,56.87
02:00,0,1314,469,1408,1216,0,4407,45.61
03:00,0,1416,389,1348,1155,0,4308,48.33
04:00,0,1444,389,1400,1217,0,4450,50.12
05:00,0,1420,472,1781,1150,0,4823,53.61
06:00,0,1364,425,2478,1100,0,5367,70.84
07:00,574,1275,457,2517,1149,0,5972,72.42
08:00,1115,1114,449,2543,1186,0,6407,69.67
09:00,1591,1034,421,2210,1181,0,6437,65.77
10:00,1975,737,428,1798,1154,0,6092,57.38
11:00,2244,644,520,1345,1161,-256,5658,43.57
12:00,2383,422,503,1220,1150,-309,5369,-5.25
13:00,2383,407,517,1047,1182,-287,5249,-6.24
14:00,2244,313,465,1324,1239,-345,5240,48.61
15:00,1975,459,430,1334,1158,0,5356,44.95
16:00,1591,448,380,2092,1205,0,5716,60.08
17:00,1115,697,510,2375,1220,431,6348,65.74
18:00,574,809,515,3503,1199,312,6912,133.18
19:00,0,1027,408,3908,1164,405,6912,139.23
20:00,0,1161,491,3178,1124,394,6348,82.08
21:00,0,1326,487,2768,1135,0,5716,74.8
22:00,0,1226,477,2481,1171,0,5355,71.86
23:00,0,1411,501,2088,1231,0,5231,64.7

The dashboard needs: a stacked area chart of the generation mix over the 24 hours with demand drawn as a line on top and battery charging shown below the zero axis; KPI cards for total energy in MWh, renewable share of generation, peak demand and its hour, and the daily average and minimum price; a price line chart with negative-price hours shaded and labelled; a donut of the daily energy mix by source; a live 'grid now' panel driven by an hour scrubber that shows each source as an animated flow into the demand bar; source toggles that update every chart; hover or tap tooltips with exact values; and a short auto-written insights panel computed from the data (for example when solar exceeded half of demand, when batteries charged and discharged). Style it like a control-room display: dark, precise, glowing. So the page is alive without input, on load the charts draw in and the hour scrubber plays through the day on a loop with the flow panel animating, tooltips following the playhead and the insights highlighting as their hours pass, forever, until the user touches a control.

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 SaaS growth dashboard from the exact dataset below (CSV: one row per month and plan with customers at the start of the month, new and churned customers during it, and the monthly list price per customer in US dollars). Embed the data in the page verbatim and compute every number from it; do not invent or alter any value. Ending customers = customers_start + new_customers - churned_customers, and MRR = ending customers x price_usd.

month,plan,customers_start,new_customers,churned_customers,price_usd
2025-05,Starter,220,36,15,19
2025-05,Team,90,10,3,79
2025-05,Enterprise,12,3,0,499
2025-06,Starter,241,39,15,19
2025-06,Team,97,12,3,79
2025-06,Enterprise,15,1,1,499
2025-07,Starter,265,46,16,19
2025-07,Team,106,9,4,79
2025-07,Enterprise,15,1,0,499
2025-08,Starter,295,33,24,19
2025-08,Team,111,18,3,79
2025-08,Enterprise,16,2,0,499
2025-09,Starter,304,29,18,19
2025-09,Team,126,13,4,79
2025-09,Enterprise,18,3,0,499
2025-10,Starter,315,47,23,19
2025-10,Team,135,16,6,79
2025-10,Enterprise,21,2,1,499
2025-11,Starter,339,36,20,19
2025-11,Team,145,13,4,79
2025-11,Enterprise,22,3,0,499
2025-12,Starter,355,45,25,19
2025-12,Team,154,17,6,79
2025-12,Enterprise,25,0,0,499
2026-01,Starter,375,38,26,19
2026-01,Team,165,16,4,79
2026-01,Enterprise,25,2,0,499
2026-02,Starter,387,28,31,19
2026-02,Team,177,15,25,79
2026-02,Enterprise,27,1,0,499
2026-03,Starter,384,31,25,19
2026-03,Team,167,17,5,79
2026-03,Enterprise,28,2,1,499
2026-04,Starter,390,29,20,19
2026-04,Team,179,9,6,89
2026-04,Enterprise,29,1,0,549
2026-05,Starter,399,32,34,19
2026-05,Team,182,16,6,89
2026-05,Enterprise,30,2,0,549
2026-06,Starter,397,30,33,19
2026-06,Team,192,12,8,89
2026-06,Enterprise,32,0,1,549
2026-07,Starter,394,43,27,19
2026-07,Team,196,15,8,89
2026-07,Enterprise,31,0,1,549
2026-08,Starter,410,41,28,19
2026-08,Team,203,17,7,89
2026-08,Enterprise,30,0,0,549
2026-09,Starter,423,43,35,19
2026-09,Team,213,15,5,89
2026-09,Enterprise,30,2,0,549
2026-10,Starter,431,28,25,19
2026-10,Team,223,19,7,89
2026-10,Enterprise,32,3,1,549

The dashboard needs: KPI cards for current MRR, MRR growth over the period, current customers, average monthly logo churn rate and net revenue retention estimate; a stacked area chart of MRR by plan over time; a waterfall chart that decomposes the most recent month's MRR change into new, churned and price-change effects; a churn-rate line per plan with any month above twice its plan's average flagged and explained in an annotation; a cohort-style table of customers by plan and month with heat colouring; plan and date-range filters that update every chart; hover or tap tooltips with exact values; and a short auto-written insights panel (three sentences) computed from the data, such as which plan drives growth and when prices changed. Use a refined, modern product-analytics look. So the page is alive without input, on load the charts animate in and then a guided tour cycles forever: it highlights each KPI, steps a cursor through the months on the area chart with live tooltips, rebuilds the waterfall, applies and clears a plan filter, and points out the churn anomaly, until the user touches a control.

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 climate dashboard comparing six weather stations from the exact dataset below (CSV: one row per city and month with the average daily high temperature in Celsius, total rainfall in millimetres and sunshine hours). Embed the data in the page verbatim and compute every number from it; do not invent or alter any value.

city,month,avg_high_c,rain_mm,sun_hours
Reykjavik,Jan,0.4,77,54
Reykjavik,Feb,0.9,76,81
Reykjavik,Mar,3.8,67,116
Reykjavik,Apr,6.3,48,147
Reykjavik,May,10.1,32,221
Reykjavik,Jun,12.9,24,247
Reykjavik,Jul,13.2,24,274
Reykjavik,Aug,12.2,29,233
Reykjavik,Sep,9.9,37,214
Reykjavik,Oct,6.2,51,160
Reykjavik,Nov,3.1,59,103
Reykjavik,Dec,2.6,74,77
Lisbon,Jan,13.3,100,52
Lisbon,Feb,14.1,99,77
Lisbon,Mar,18.5,69,113
Lisbon,Apr,20.3,47,168
Lisbon,May,25.3,31,222
Lisbon,Jun,27.9,15,245
Lisbon,Jul,28.5,1,259
Lisbon,Aug,27.6,5,259
Lisbon,Sep,24.3,21,212
Lisbon,Oct,21.1,51,146
Lisbon,Nov,18.0,83,100
Lisbon,Dec,15.4,89,84
Singapore,Jan,29.6,254,152
Singapore,Feb,30.6,249,136
Singapore,Mar,30.4,223,151
Singapore,Apr,31.4,201,174
Singapore,May,31.6,183,132
Singapore,Jun,30.9,158,155
Singapore,Jul,31.8,164,167
Singapore,Aug,31.0,163,160
Singapore,Sep,30.8,182,130
Singapore,Oct,31.9,203,172
Singapore,Nov,30.7,235,129
Singapore,Dec,29.9,237,146
Denver,Jan,5.9,47,63
Denver,Feb,7.5,42,76
Denver,Mar,11.6,41,101
Denver,Apr,18.0,40,160
Denver,May,24.9,27,219
Denver,Jun,30.0,23,251
Denver,Jul,30.7,22,253
Denver,Aug,29.4,25,241
Denver,Sep,24.9,38,201
Denver,Oct,17.6,29,153
Denver,Nov,12.2,33,106
Denver,Dec,7.4,35,64
Cape Town,Jan,27.6,9,269
Cape Town,Feb,25.9,16,279
Cape Town,Mar,24.9,30,236
Cape Town,Apr,23.3,60,192
Cape Town,May,21.0,68,142
Cape Town,Jun,18.1,87,111
Cape Town,Jul,17.8,94,111
Cape Town,Aug,18.8,79,131
Cape Town,Sep,20.3,69,163
Cape Town,Oct,22.7,46,187
Cape Town,Nov,24.4,35,227
Cape Town,Dec,25.9,16,280
Mumbai,Jan,30.2,7,62
Mumbai,Feb,30.0,6,68
Mumbai,Mar,29.9,11,121
Mumbai,Apr,32.1,79,166
Mumbai,May,33.0,247,205
Mumbai,Jun,33.0,481,245
Mumbai,Jul,33.2,601,273
Mumbai,Aug,32.3,494,241
Mumbai,Sep,32.5,252,225
Mumbai,Oct,31.5,67,166
Mumbai,Nov,29.8,3,115
Mumbai,Dec,30.1,7,81

The dashboard needs: small-multiple climate charts, one per city, each with monthly temperature as a line over rainfall as bars and the two axes clearly labelled; a radial (polar) chart of the selected city's year with temperature as radius and rainfall as colour; a heatmap of temperature by city and month; KPI cards per city for annual rainfall, hottest and coldest month, temperature range and total sunshine; a 'best month to visit' calculator with sliders for preferred temperature range, maximum rain and minimum sunshine that scores every city-month and lists the top five; a Celsius and Fahrenheit toggle; hover or tap tooltips with exact values; and a short auto-written comparison panel computed from the data. Make it beautiful, editorial and calm, like a data feature in a great magazine. So the page is alive without input, on load the charts draw in and a tour cycles forever: it rotates the radial chart through each city, sweeps a highlight across the heatmap month by month, adjusts the visit calculator sliders to show the ranking change, and toggles units once per loop, until the user touches a control.

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 dynamic programming visualizer centred on edit distance (Levenshtein). Show two words and the full DP table between them; fill it one cell per tick, for each cell highlighting the three neighbours it reads (left, up, diagonal), showing the candidate costs for insert, delete and substitute or match, and writing the minimum with a small pop. Colour the table as a heatmap as it fills. When the table is complete, trace back the optimal path from the bottom-right corner with a glowing line, then animate the alignment below: the first word morphing into the second letter by letter, with insertions, deletions and substitutions coloured and labelled, ending on the final distance. Beside it show a second, smaller panel solving the 0/1 knapsack problem (8 items, capacity 15) with the same cell-by-cell filling and a traceback that lights up the chosen items. Controls: two text inputs for the words, word-pair presets (kitten/sitting, intention/execution, sunday/saturday, algorithm/altruistic), speed slider, play, pause, step, reset, and a toggle to show the recurrence formula for the current cell. So the page is alive without input, on load it starts solving the first preset automatically and then cycles through the presets with a 3 second pause between them, forever, until the user touches a control. Make it the clearest explanation of dynamic programming anyone has seen.

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 Fourier epicycles visualizer that shows how the discrete Fourier transform rebuilds a drawing from rotating circles. Start from a closed path (presets: a heart, a treble clef, a five-pointed star, a cat silhouette and the outline of a guitar, each defined as point lists in code), resample it to 256 evenly spaced points, compute the DFT yourself in JavaScript, and draw the epicycles: a chain of circles sorted from largest to smallest, each rotating at its frequency, with the tip tracing the reconstructed path as a glowing trail that fades over time. Show the original path faintly underneath so viewers can compare. A slider sets how many terms are used (1 to 256), and the reconstruction updates live so people can watch the shape sharpen as terms are added; a small bar chart shows the magnitude spectrum with the active terms highlighted. Let the user draw their own closed shape with the mouse or a finger and then watch it transformed. Controls: preset picker, term slider, speed slider, play, pause, show or hide circles, clear and draw. So the page is alive without input, on load it plays the heart while slowly sweeping the term count from 1 up to 128, then moves to the next preset after one full drawing, forever, until the user touches a control. Make it mesmerizing, dark background, crisp thin lines and luminous trails.

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 minimum spanning tree race on a map of 40 towns: the towns are random points connected by a Delaunay-style or k-nearest-neighbour road network with weights equal to road length. Two panels side by side (stacked on narrow screens) run Kruskal's and Prim's algorithms at the same time on the same graph, one primitive step per tick. Kruskal's panel shows the edge list sorted by weight on the side with a cursor moving down it, each considered edge flashing, accepted edges turning bright, rejected edges (that would make a cycle) crossing out red, and the union-find forest drawn as coloured town groups that merge as edges are added. Prim's panel shows the growing tree from a starting town, the priority queue of frontier edges as a small sorted list, and the cheapest frontier edge being chosen each step. Count edges considered and total weight so far in each panel; when both finish, overlay them to show they found the same total weight, and highlight any edges where ties made them differ. Controls: town-count slider (10 to 120), layout presets (uniform, clustered, ring, grid with jitter), start town for Prim (click or tap a town), speed slider, play, pause, step, reset. So the page is alive without input, on load it races automatically and then starts a new random map after a 3 second pause, forever, until the user touches a control. Make it look like a beautiful glowing night map.

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 an interactive visualization of the Raft consensus algorithm with five server nodes arranged in a circle. Implement the real protocol logic in JavaScript: follower, candidate and leader states, randomized election timeouts drawn as shrinking rings around each node, terms, RequestVote and AppendEntries messages animated as packets travelling along the links with their contents readable on hover or tap, vote granting rules, heartbeats, and log replication with each node's log shown as a row of coloured entries (term colour, committed entries solid, uncommitted hollow) and the commit index advancing when a majority acknowledges. Clients submit commands to the leader at a steady rate. Show an event log panel describing what just happened in plain language. Controls: click or tap a node to crash or restart it, a button to create a network partition that splits the cluster 2 / 3 and another to heal it, message drop-rate slider, speed slider, play, pause, step, reset. So the page is alive without input, on load it runs an automatic scenario forever: a leader is elected, commands replicate, the leader crashes and a new election happens, a partition creates a minority and a majority, the partition heals and the stale leader steps down, then it starts again, until the user touches a control. Make it calm, clear and correct, the way a distributed systems course would want to show it.

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 calendar app in one page in the spirit of Google Calendar. It needs: day, week, month and agenda views with smooth transitions; a mini month picker; events created by dragging across time slots in day and week views, moved by dragging, resized by their bottom edge, and edited in a popover (title, time, colour, location, notes); correct side-by-side layout of overlapping events; all-day events in a top strip; recurring events (daily, weekly on chosen weekdays, monthly) with edit-this-or-all choices; a current-time line that moves; keyboard navigation (t today, d/w/m/a views, arrows for previous and next); multiple calendars with colour toggles in a sidebar; search across events; and persistence to localStorage with a reset-to-sample button. Seed two realistic weeks of events for a busy product manager around today's date. Compute dates correctly across month boundaries and leap years. So the page is alive without input, on load it runs a scripted demo: switches views, drags out a new meeting, resizes it, drags it to another day, creates a weekly recurring event, toggles a calendar off and on and searches for an event, then resets and repeats, until the user touches anything. Make it calm, clean and genuinely 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 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 (Enter commits and moves down, Tab moves right, Escape cancels, arrow keys move the selection). 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.