165 design references

Trionn · abstract graphics, agency positioning

Reel by Andrew Chornyy

Let a dark studio mark answer the pointer with a small glow, and leave the two real next steps as text that does not move.

Visit website · Trionn

What to look at

The page is black. Large white type at the upper left reads "Designed to" and "mean," and the last word changes. The reel shows "something," then a blurred word that reads as purpose while it is moving. Dark bars form a standing mark on a faint grid to the right. The pointer rests on a bar, a blue spark appears, and an orange edge lights along the bar. Under the headline, two lines stay put: DISCUSS YOUR PROJECT and BOOK A 30-MINUTE CALL. Near the bottom, small type says HOLD TO BLAST and DARE TO TOUCH THE LINES. Andrew moves across the mark and does not click the two lines.

The resting hero: "Designed to mean," the two text actions under it, and the dark mark before the pointer hits it.
The resting hero: "Designed to mean," the two text actions under it, and the dark mark before the pointer hits it.
The pointer on the mark, with a blue spark on one bar. This is the feedback. The headline is mostly off this crop.
The pointer on the mark, with a blue spark on one bar. This is the feedback. The headline is mostly off this crop.

Why it works

The spark and the orange edge are feedback. Nielsen Norman Group says useful motion is a brief sign that the page noticed an action, and that the same motion pulls the eye, so it can take attention off the task. Here the glow says the pointer hit the mark. It also sits on a black page, where a small light is hard to ignore, which is why the two lines under the headline have to stay still and readable. Andrew says he has seen sites like this, that they grab attention, that a visitor remembers them, and that visitors come back. That is his say-so. The reel is not a memory test. The live HTML on 2026-11-13 still contains "Designed to mean something," "hold to blast," "Dare to touch the lines," and buttons for Discuss Your Project and a 30-minute call.

Try it

  1. Keep one short headline, and if a word must change, hold the new word until it is sharp. Do not leave it blurred, the way "purpose" is in the reel.
  2. Put the two real actions, a project inquiry and a booked call, in plain text that does not move when the mark does.
  3. Use a short glow on the mark as the sign that the pointer hit it, and keep that glow off the headline.
  4. If a visitor has asked for less motion, show the mark still and one finished headline, and skip the hold effect.
  5. Treat "people will remember this and come back" as a claim to test. After one visit, ask which line they can repeat.

What it costs

A rotating word and a hold-to-blast are decorative motion. web.dev explains that prefers-reduced-motion detects an operating-system request to cut animation, because effects a person did not ask for can bring on dizziness and nausea. Mid-swap, the reel's last word is too blurred to read, so the headline fails at the moment it is changing. If the glow is the only sign the mark can be touched, a still view of the page does not explain the hold.

Words worth knowing

Sources