The concept
MAKE STILL TYPE FEEL FAST.
Hydroplane imagines a fictional 1977 Gold Cup archive through the confidence of river-race ephemera: compressed headlines, industrial yellow, checkerboard timing marks, and civic information set like it has a deadline. The page is not a tribute to a manufacturer or championship. It is a historical-generic exhibition about the peculiar instant when a boat stops displacing water and begins balancing above it.
The sequence moves from spectacle to mechanics, race arithmetic, graphic memory, and responsibility. The safety chapter deliberately drains the sunshine and slows the tempo. Canopies, restraint cells, independent inspection, and a driver’s right to refuse bad water are treated as culture—not decoration. Every visual is code-built; no generated assets, stock pictures, or external visual requests are used.
Signature system
THE PAGE THROWS RIVER.
VELOCITY
trackScroll() in main.js divides scroll distance by elapsed time, then uses different attack and release easing. A hard gesture snaps the wake open; coasting lets it decay instead of vanishing.
ROOSTER TAIL
makeWake() draws two broad Bézier jets, low mist, and at most 380 ballistic droplets on #wake-canvas. The explicit burst() method powers the hero’s “Throw water” control.
ROCKING DECK
The same wake value updates --rock. Consoles, maps, and posters translate and rotate with the passing force, while a fixed load gauge makes the otherwise invisible input legible.
PHOTO FINISH
finishReplay() measures its course, runs three compositor-only hulls to the line, announces the result, and calls the same wake burst. Reduced motion jumps directly to the official frame.
Procedural river
TWENTY-TWO MOVING BANDS.
makeWater() paints a depth gradient, twenty-two differently phased wave bands, broader swell lines, and a moving vertical shine field beneath the hero. Pixel density is capped at 1.5 for consistent frame time. visibilitychange cancels the animation frame when the document is hidden; reduced motion receives one static river frame and no loop.
The three-point console is a second, instructional form of motion. throttleControl() maps one range input to speed, wetted area, ride angle, propeller RPM, and SVG hull lift. At full flight, only two sponson tips and the half-submerged propeller touch the river.
Print archive
INK WITH CROOKED KNEES.
Four race posters are constructed as inline SVG from rectangles, paths, circles, and Anton headlines. Unequal widths, hard shadows, imperfect rotations, and a faux accession ticket break the polished four-card rhythm. Coral behaves like a registration error; paper remains warm enough to feel handled rather than pristine.
Palette & type
FOUR INKS. TWO VOICES.
Reproduce this
PROMPT FOR PHYSICS.
Ask an AI frontend agent for a no-assets, 1970s river-racing exhibition in semantic HTML, CSS, SVG, and canvas. Name a velocity-reactive particle signature, procedural water, and a functional control that teaches three-point flight. Require invented race data, a sober safety chapter, asymmetrical print ephemera, responsive layouts at 390/834/1440, reduced-motion behavior, hidden-tab frame cancellation, and screenshot-based iteration. Supply the yellow, teal, ink, coral, and paper tokens with Anton and Outfit, then require every visual to be drawn in code.