My home page has a sea in it, and a button that says "Play waves". Sound is the obvious way to make a site like this feel alive, and it is the one channel I cannot rely on. Browsers keep audio suspended until a click, tap or key press, and scrolling does not count (Chrome (opens in a new tab)). On an iPhone in Silent mode, web audio is muted by default (WebKit bug 237322 (opens in a new tab)). Whatever tells a visitor "this responds to you" has to work in silence, in the first seconds, before any click.
So before adding anything I read: the award juries' recent winners, the interaction designers whose work I admire, and the attention research behind notifications. This is what I took from it, and what I built.
The best sites change the world, not the interface
The juried winners of the last few years answer input by changing the substance of a scene. In Igloo Inc, particles change colour with their speed (case study (opens in a new tab)). In Messenger, the 2025 Developer Site of the Year, your character's clothes get wet and "slowly 'dry off'" (case study (opens in a new tab)). OceanX's annual report steers a ship that keeps forward momentum through a wake driven by the mouse (Communication Arts (opens in a new tab)). None of them adds an arrow or a tooltip. The world responds, and you notice that it did.
Awards are not usability evidence, and the juries' own scores say so: Igloo Inc scored 9.60 for animation and 6.60 for accessibility (Awwwards (opens in a new tab)). What transfers is the principle, not the spectacle: input moves the material. For my site that means scroll speed could become foam and ink bleed in the sea, drying back to crisp lines at rest.
Speed into colour / Wet cloth / A wake
Ration the flourishes
Interaction designers agree on one rule more than any other: motion the visitor causes is cheap and rarely annoying, while motion that happens to the visitor must be rationed. Apple's advice is to "work with behavior rather than animation" (WWDC18 (opens in a new tab)) and to let "the resting state stay visually quiet" until touched (WWDC25 (opens in a new tab)). Family's delight-impact curve says delight grows as a feature gets used less often (Family Values (opens in a new tab)). Stripe's test is the sharpest: remove the animation, and keep it only if the flow then feels broken (Villar, via translation (opens in a new tab)).
The research agrees in its own terms. People in NN/g's tests called an animation "nice the first time, but now it's getting annoying" (NN/g (opens in a new tab)), and irrelevant animation measurably hurts information seeking, most of all when it looks like the task (Zhang 2000 (opens in a new tab)).
Rare is delightful / Frequent is noise
A gull, by the rules
I wanted one moving hint that "Play waves" exists. My idea was a bird that flies in and sits on the button: enough of a signal, without doing it in anyone's face. Before drawing it, I looked for evidence that a creature on a control makes people click it. I found none: no case study, no A/B test. So the gull is a bet on delight, and the research decided its shape.
The onset of motion catches attention even when it means nothing (Abrams & Christ 2003 (opens in a new tab)). Bartram, Ware and Calvert found motion cues were missed less than 2% of the time, against 6–25% for colour; that travelling motion distracts far more than motion anchored in place; and that cues distract more during reading (2003 (opens in a new tab)). Interruptions at a natural break cost less (Iqbal & Bailey 2007 (opens in a new tab)), and WCAG's own example of an acceptable attention cue stops after five seconds (W3C (opens in a new tab)).
That gave me the gull's life:
| Phase | What it does |
|---|---|
| Wait | Comes once per page load, about 2 s after the button is fully in view and scrolling has stopped |
| Arrive | One short flight, about 2.3 s, with flapping, gliding and a braking flare |
| Perch | Lands inside the pill beside the label, which it never covers; sings a few amber notes |
| Settle | Turns its head, blinks, shakes its feathers, then keeps still after 45 s |
| Pressed | Takes off as the waves start; pressing the gull is pressing the button |
| Reduced motion | Already perched and still, two still notes by its beak |
The button's words still say what it does. Screen-reader users never perceive the gull, and anyone with Reduce Motion never sees it arrive, so the gull can only be the only moving hint, never the only hint. It sits inside the button, so it can never hide the focus ring. Nothing about it is stored: a visitor who turned the waves off yesterday gets the invitation again today, and the press is still their choice.
Arrive once / Move in place / Leave when ignored
What drawing a gull taught me
The gull is drawn from geometry, a faceted body with jointed wings, not from a sprite. A few things went wrong on the way, and each is general:
- A folded wing is a shape, not a pose. Folding the wing by its skeleton alone left it hanging below the belly. Blending each wing panel towards a hand-placed folded shape on the body's flank read as a gull even at 44 px.
- A second canvas silently changes old tests. My checks found the sea with
querySelector('canvas'). The gull's canvas came first in the page, so they started reading a 2D canvas as if it were WebGL. Select by a name, never by position. - "Stop when nothing changed" never starts. A frame loop that sleeps when nothing moved this frame never begins an ease, because the first frame after rest has a zero time step. Compare the state against its target instead.
- Screenshot clips are in page coordinates. After scrolling, a clip built from
getBoundingClientRect()needsscrollYadded, or it captures the wrong place.
44 px / Two canvases / A zero time step
Vibration has gone quiet too
I had hoped a phone could buzz a little. As of October 2026 only Chromium-based browsers on Android still vibrate, WebKit opposes the API and Firefox removed it (W3C (opens in a new tab)). Android's own guidance puts a good click at 10–20 ms and says "choose no haptics" over buzzy ones (Android (opens in a new tab)). An iPhone gives one system tick when someone really taps a native switch, and since iOS 26.5 that tick can no longer be triggered from script. So the vibration on my site should be visual: the ship rolling and recovering, not a button shaking for attention.
Chromium on Android only / 10–20 ms / One tick on iPhone
What I have not measured
Everything above is design from evidence, not a result. I do not know yet whether the gull draws presses, how short pulses feel on real phones, or how people with vestibular or attention disorders experience a sea that reacts to scrolling. My analytics do not count presses of "Play waves" yet, so even the first question needs a small change before it can be answered. The others need people, not dashboards.
No click data yet / No tests with real people
Let the world answer the visitor, then let it fall quiet.