Prompt:
Build a standalone HTML page called "Small Lenses": a full-screen canvas that looks like a macro photograph of a leaf at dawn, covered in dew drops that really refract the scene. Clicking adds new drops. Palette: deep forest black-green (#071209), leaf greens from #1c4816 through #68ad3c to a bright midrib highlight #94cf58, pale vein lime (rgba 215,240,150), warm dawn gold (#f3e3a2, rgba 255,230,160) and a muted sage (#a9c3a0) for small print. Type: Georgia / Iowan Old Style italic for a large title "Small Lenses" with an uppercase tracked subtitle "A study of dew"; ui-monospace for a time stamp ("Dawn · 05:42 · 98% humidity", with a breathing lime dot), the hint, the drop counter and pill buttons; a big italic Georgia numeral for the count.
Rendering: draw the static macro scene once per resize into an offscreen, DPR-scaled canvas. That scene has a diagonal dark-green gradient; about 46 soft bokeh discs in gold and green, seeded for stability; a huge leaf (two bezier curves) running diagonally from the bottom-left to the top-right with a drop shadow; a cross-width gradient that lights the midrib; a base-to-tip shading gradient; 3200 tiny light and dark texture specks; 13 pairs of curved lateral veins with highlight and shadow strokes and fine branch veins; a bright midrib; a dark outline; a warm light leak from the top-left; and a vignette. The leaf outline is kept as a Path2D for hit-testing. Each frame, blit the scene, add a soft warm glow at the light position, then draw the drops from smallest to largest. Each drop gets a soft contact shadow cast away from the light, then an elliptical clip inside which a 2.3x wider region of the scene is drawn flipped on both axes (an inverted wide-angle refraction, like real dew), a faint brightening, an edge-darkening radial gradient, a bright caustic crescent on the side away from the light, a twinkling specular highlight with a sharp hot spot toward the light, and a thin dark rim. Tiny drops (under 3 px) are drawn as a dark bead with a highlight dot.
Physics: drops ease toward a target radius. Overlapping drops merge, conserving area and weighting the new position by size. Drops larger than a threshold slide downward with gravity and a slight wobble, leave a trail of tiny beads (taking area from the sliding drop) and collect smaller drops they pass. Drops that leave the screen are removed.
Interaction: the pointer acts as the sun; every highlight, caustic and shadow re-orients toward it with easing, and it drifts back to the top-left when the pointer leaves. Tapping the leaf (checked with isPointInPath) places a drop, and holding swells it until release, when a large drop starts to slide. "Mist" sprinkles 34 tiny new drops that grow in. "Shake leaf" jolts every medium or large drop into a brief slide. The counter tracks the number of drops. Layout: copy top-left, hint bottom-left (hidden on phones), counter and buttons bottom-right. Reduced motion stops sliding and makes growth instant. The canvas is DPR-aware (capped at 2), and drop positions scale proportionally on resize.
Title: Small Lenses at Dawn
Description: A quiet, photographic close-up of a backlit leaf beaded with dew. Every drop works as a small lens: inside it the leaf and the golden bokeh appear upside down and compressed, framed by a dark rim, a bright caustic and a glinting highlight that turns to follow the visitor's light. Drops can be placed, swelled, merged and sent sliding down the leaf, leaving trails of tiny beads, under a calm serif title that reads like a naturalist's caption.
Visual techniques:
- Offscreen canvas pre-render of the leaf, veins, texture specks, bokeh, light leak and vignette
- Inverted, minified refraction by clipping and drawing a flipped, wider source region into each drop
- Radial-gradient lens shading: edge darkening, caustic crescent, specular highlight, contact shadow
- Pointer-driven light direction for all highlights and shadows, with eased tracking
- Area-conserving drop merging, gravity sliding with bead trails, and hold-to-grow
- Path2D leaf hit-testing with isPointInPath
- DPR-aware canvas, proportional resize, requestAnimationFrame loop and a reduced-motion fallback
Interaction model: Move the pointer to steer the morning sun and watch every drop's highlight and shadow turn with it. Tap the leaf to place a drop of dew, or hold to swell it until it grows heavy enough to slide, merging with the drops below. "Mist" adds a fresh scatter of tiny drops, and "Shake leaf" jolts the larger ones into motion.