Title: SVG Tides — Harbor of Seven Currents
Prompt: Chart three harbors breathing through SVG-only tides with layered sine waves, drifting foam, rocking buoys and a draggable moon. Give the page the feel of a brass-and-teak tidehouse with coral signal flags. Let moon pull, wind chop and swell period reshape the water live.
Design: A deep-sea two-column layout with a tide-read strip and slate control card beside a tall arched SVG sea frame; foam white, sand amber and coral accents on teal water, with three harbor cards carrying three different corner radii.
Visual techniques:
- Three recomputed SVG wave paths with sine-sum displacement and dashed current lines
- Draggable moon node that repositions high and low water marks
- CSS rock, bob and shimmer keyframes for buoys, gulls and foam dots
- Procedural foam particles generated as SVG circles each few frames
- Tide-clock bar and flood/ebb readout driven by the same phase clock
Interaction model: Moon, wind and swell sliders reshape wave height, chop and cycle speed, harbor tabs swap bathymetry presets and notes, pause and slack buttons freeze or slow the tide clock, and dragging the moon directly sets gravitational pull while foam and readouts follow.