TITLE: Type River — a sentence, flowing downstream
PROMPT: Build a single self-contained HTML page (no external assets, no libraries, all CSS in one inline <style>, all JS in one inline <script> at the end of body) called "Type River". Concept: a kinetic-typography river. A long sentence is split into individual words, each word is an absolutely positioned <span> inside a full-viewport layer, and every word is advected across the screen by a value-noise flow field written in plain JS (hash + bilinear smoothed noise, angle = (noise(x*0.0016 + t*0.02, y*0.0024 - t*0.014) - 0.5) * 2.6), with a dominant rightward drift so the river always flows left-to-right and wraps around at the right edge. Palette: #0d1117 deep water background, #161b22 bank, #58a6ff current (accent words), #c9d1d9 foam (body type), #f0b429 gold ripple (foam words, stone rings). Typography: one system serif, Georgia / "Times New Roman" / serif, at varied sizes 13-54px, weights 300/400/700, letter-spacing from -0.01em to 0.05em, so the sentence itself is the art. Layout: a full-bleed river band occupying the middle ~52% of the viewport, framed top and bottom by opaque #161b22 bank shapes cut with a hand-written clip-path polygon wave, each bank with a 3px rgba(88,166,255,.20) rim light offset 3px below the wave; a soft radial blue glow and a slowly drifting 27px repeating hairline texture sit behind the words. Title upstream top-left: mono kicker "031 — kinetic typography", Georgia h1 "Type River" (River in italic gold), a gold hairline rule, and a mono interaction legend. Controls bottom-right in a glass panel (rgba(22,27,34,.74), 1px rgba(88,166,255,.22) border, backdrop blur): a "flow" range 0-100 (default 42) and a "density" range 24-170 (default 72) with a live mono readout. Bottom-left mono label names the current sentence. Motion: words are integrated each rAF with dt clamped to 50ms, vertical containment is a soft spring toward the band centre, opacity falls off toward the banks (floor 0.32 so a frozen render still reads), roughly 16% of words flip to gold "foam" with a text glow, and words that leave the right edge wrap to the left, take the next word of the sentence and re-randomise size/weight/colour. Entrance and layout must never use opacity 0->1; the words are laid out spread across the whole band at boot so a frozen-clock screenshot shows the finished river. Interaction: pointermove parts the water (a 104px invisible rock at the cursor pushes words radially), pointerdown drops a visible stone (gold radial ring, dashed rotating inner ring, drifts downstream, lives 10-16s then scales out), dragging stirs a tangential swirl, the mouse wheel or arrow keys swap between five sentences and re-spread the words across the band, and prefers-reduced-motion cuts flow speed to 45%. Performance: transform-only writes via translate3d, opacity and colour written only when the value changes by more than a threshold, geometry measured on resize with a debounce, no filters on the animated words. Zero console errors, every null guarded, everything inside one IIFE.
DESCRIPTION: A calm, mesmerising typographic river. A single sentence is broken into words that drift across the middle of a dark screen like debris on slow water, bunching and spreading under a hidden current while the top and bottom banks frame the flow in near-black. The cursor is an invisible stone that parts the stream; clicking drops a visible gold ring that keeps deflecting the current as it is carried away. Words are set in one system serif at wildly different sizes and weights, most in pale foam grey, a minority in current blue, and the occasional word glows gold like foam catching light. The page reads as a single piece of moving type rather than an interface: the only chrome is a small upstream title and a glass control panel in the bottom-right corner.
TECHNIQUES: Value-noise flow field (hash + smoothed bilinear interpolation) driving per-word velocity; transform-only advection with translate3d and dirty-gated opacity/colour writes; distance-based radial deflection from cursor and clickable stone bodies; soft spring containment to keep the stream inside a horizontal band; wrap-around recycling that reassigns the next word of the sentence; clip-path polygon banks with a rim-light duplicate offset 3px; radial gradient water glow plus a drifting repeating-linear-gradient hairline texture; custom-styled range inputs with webkit and moz thumbs; rAF loop with dt clamping and visibilitychange reset; debounced resize re-layout; prefers-reduced-motion matchMedia reducing flow speed.
INTERACTION: Move the pointer to part the water (words within 104px are pushed away radially). Click anywhere outside the control panel to drop a stone — a gold ring appears with a scale-in animation, deflects nearby words, drifts downstream and fades out after 10-16 seconds; up to seven stones are kept. Drag with the pointer held down to stir a tangential swirl through the words. The "flow" slider sets current speed (0-100, default 42) and the "density" slider sets word count (24-170, default 72), both with a live mono readout showing flow, word count and stone count. Scroll the wheel or press the arrow keys to cycle through five sentences, each of which re-spreads the words across the band and pulses the sentence label. Resizing re-measures the band and re-styles the words. With prefers-reduced-motion the river still flows but at less than half speed.