TITLE Semaphore — Say It with Flags PROMPT A tool that translates any typed message into flag semaphore, performed by an animated signaller standing on a ship's signal deck. Type a sentence, press send, and the figure spells it out letter by letter with two flags, with correct arm positions, proper rests between words, and the cadence of a trained signaller. It also runs in reverse as a small trainer: the figure signals, the viewer reads. Concept: a legible, joyful code; body language as typography. Accuracy: use the standard flag-semaphore alphabet, defined in the page as pairs of arm directions on the eight-point compass (positions at 45° steps: down, low, out, high, up for each side). The implementer must encode the standard chart carefully: A = right arm low (down-right diagonal on the signaller's right) with left arm down; B = right arm out; C = right arm high; D = right arm up (left down); E = left arm high; F = left arm out; G = left arm low; H = right out + left... : derive every letter from the well-known circular scheme (first circle A–G with one arm at rest, second circle H–N with one arm at "low", and so on, with J, V and the remaining letters at their standard irregular places), and double-check the table against that scheme; include the rest/space position (both flags down in front), the "numerals follow" and "letters follow (J)" signals, attention, and cancel/error (both arms waving). State on the page that the diagram is shown as seen by the observer (mirrored from the signaller's own left and right), and be consistent everywhere. Mood: brisk, nautical, sunny, mid-century instructional poster. Palette: sailcloth white #F6F4EC page, flag red #D62828 and flag yellow #F6BD16 (the classic diagonally divided red-and-yellow flags used at sea), navy #14213D for the figure, type and rules. Light page, flat colour, crisp shapes, a faint canvas weave texture and a thin navy border with rope-twist corners drawn in SVG. The signaller (SVG, flat geometric illustration): a sailor figure in navy with a white cap and a striped collar, standing on a deck with a rail, the sea horizon and one small cloud behind; arms are two-segment limbs pivoting at the shoulder (straight arms with the flag staff as an extension), each holding a square flag divided diagonally red/yellow. Flags are not rigid: they trail the motion: implement follow-through with a simple secondary spring on the flag's rotation and a wave deformation of the flag cloth (animated path with two or three control points) so they snap and flutter at the end of each move, and ripple gently in the wind when held. Arm transitions take the shortest path with an eased, slightly anticipatory motion (cubic-bezier(.5,0,.2,1.2)-like spring), about 380ms at standard speed, with a hold on each letter; double letters get a brief drop to rest between them. Layout: the signaller large on the left/top; on the right/below, the message panel: a text input styled as a signal pad form ("MESSAGE FORM S.1320-like invented naval stationery": ruled lines, boxes for TO / FROM / TIME), the message typed in capitals in a typewriter or stencil-like face; beneath it the message appears as a strip of small static semaphore glyphs (tiny figures or clock-like diagrams, one per character, wrapping in rows) with the current letter highlighted in red as the signaller performs it and the large current letter shown beside the figure in huge stencil type. Controls: SEND (starts/stops), speed (words per minute dial: slow / standard / "yeoman"), LOOP, and a row of canned messages on signal-flag-shaped chips: "ENGLAND EXPECTS THAT EVERY MAN WILL DO HIS DUTY"-style historical quotation is fine but also add playful ones: "SEND MORE TEA", "WE ARE NOT LOST", "PLEASE STOP WAVING BACK". Signature moment: the performance: a whole sentence signalled fluently, flags cracking through each position with follow-through, while the glyph strip lights up in step: it should look like a real person who has done this ten thousand times. On load the signaller raises both flags for "attention", then spells "HELLO" without being asked. Trainer mode ("Read the signal"): the figure signals a random letter or short word; the viewer types what they read; correct answers ring a ship's bell (if sound is on) and advance a streak counter; mistakes show the correct glyph side by side with the guessed one. A reference chart section below shows the whole alphabet as a 6×5 grid of small diagrams with letters, grouped by the "circles" of the system with a short explanation of the logic; hovering/focusing a diagram makes the big signaller take that position, and pressing any letter key on the keyboard (when not typing in the input) does the same instantly: so the viewer can "play" the signaller like an instrument. Typography: bold stencil/condensed caps for headings (a stack such as "Stencil", "Arial Narrow", Impact with tracking) in navy; body in a clean humanist sans ("Gill Sans"/"Trebuchet MS"); title "SEMAPHORE" with each letter sitting under its own tiny flag diagram. Optional sound toggle (off by default): flag snaps (short noise bursts), sea ambience, bell. Reduced motion: arms move directly between positions without flutter; flags static. Touch: large targets; the text input uses the system keyboard. Unsupported characters are skipped with a note; numerals are sent with the numerals sign. DESCRIPTION A sunny mid-century instructional poster that is also a working instrument. A flat, geometric sailor stands on a signal deck with a rail, a lifebuoy, a coil of rope, the sea horizon, a steamer and one small cloud, holding two diagonally divided red-and-yellow flags. Type a message onto an invented naval message form (S.1320, with TO / FROM / TIME boxes and ruled typewriter lines), press SEND, and the signaller spells it out in correct flag semaphore: arms snapping the shortest way round an eight-point clock with a slight wind-up and overshoot, flags folding edge-on through the move and cracking open with follow-through, the body leaning and bobbing with each position, rests between words, a quick drop between double letters, and the numerals and letters-follow signs inserted automatically. A strip of tiny static glyphs lights up in red in step with the performance while the current character stands beside the figure in huge stencil type. On load the signaller calls attention with both flags and spells HELLO unasked. A second tab turns the page into a reading trainer with a streak counter and a ship's bell, and a reference chart of thirty positions, grouped by the seven circles of the code, lets the viewer play the signaller like an instrument by hovering, tapping or pressing letter keys. Everything is shown as seen by the observer, and says so. VISUAL TECHNIQUES - Inline SVG scene in four flat colours (sailcloth, flag red, flag yellow, navy) with CSS-animated sun rays, drifting cloud, swell and a distant steamer - Arms as rotating SVG groups driven by a custom cubic-bezier solver (anticipation and overshoot), shortest-path angle interpolation with an own-side rule for half turns - Flag cloth rebuilt every frame as two curved triangles: quadratic and cubic paths fitted through a deformation function, with a damped spring that folds the flag edge-on against the motion and a travelling wave for wind ripple - Secondary springs for body lean, knee bob, head counter-tilt and fluttering cap ribbons - Semaphore table encoded once as arm-position pairs on an eight-point compass and reused for the big figure, title glyphs, message strip, trainer comparison and chart - Stencil lettering made from condensed system faces with a CSS mask bridge cut (and an SVG bridge on the big letter) - Canvas weave from layered repeating gradients, double-rule poster border with rope-twist corner knots drawn in SVG - Signal-flag chips cut with clip-path (swallowtail and pennant shapes), a rotary speed dial, perforated message-pad paper with ruled lines - Web Audio synthesis, off by default: filtered-noise flag snaps, breathing sea ambience and an additive ship's bell - Sticky signal deck so the figure stays in view beside the pad, trainer and chart; reduced-motion mode with direct arm moves and static flags INTERACTION MODEL Type in the message form (capitals are applied automatically) and press SEND or Enter: the signaller performs the message while the glyph strip highlights each sign in red; SEND becomes STOP, which makes the signaller give the cancel sign and stand down. The speed dial (click the knob or SLOW / STANDARD / YEOMAN) sets the cadence, LOOP repeats the message, and the flag-shaped chips load and send ready-made signals. Characters with no flag are skipped with a note; digits are sent after the numerals sign and followed by the letters sign. The READ THE SIGNAL tab starts the trainer: the figure signals a random letter (or a short word), the viewer types the reading, correct answers swing the bell (and ring it if sound is on) and raise the streak, mistakes show the guessed and correct glyphs side by side while the figure holds the right position; REPEAT replays and NEXT SIGNAL moves on. In the chart, hovering, focusing or tapping any diagram makes the signaller take that position at once, and with focus outside a text field any letter key does the same, Space drops to rest and Escape stands down. The sound button toggles flag snaps, sea and bell. All controls are keyboard-operable and touch-sized.