Claude Opus 5.5 in a raw API call

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.

Copy promptShow all