Catalogue · S1
Text fills in
Words get brighter as you read and scroll. The eye stays on the text, not on the animation.
Motion explains something. It guides the eye to where it is needed, and it stops once it has nothing more to say.
Catalogue
What websites can do today.
A selection of what we can build, to try out. Scroll, move the mouse over the buttons, press Tab. Each effect comes with a note on what it's good for and what we watch out for.
Scroll effects
Nine building blocks. The small stages react while they pass through the screen; the two large ones stay put and turn pages.
Catalogue · S2
Lines rise
Headlines slide up out of an invisible line. Feels calm and cut clean.
Structure first.Style after.Checked in the end.
Catalogue · S3
Depth through layers
Background, image and type move at different speeds against each other.
Catalogue · S4
Image opens up
An image crop grows as you scroll, from a small card to the full area.
Catalogue · S5
Ring opens
A circle grows and reveals the image, as on our home page, where the measurement symbol is the window.
Catalogue · S6
Stage stays, scene changes
The screen stays put, scrolling turns the pages of the steps.
- 1 / 3Brief We listen and clarify what the site has to achieve.
- 2 / 3Concept Structure and design are set before anything is built.
- 3 / 3Launch Go-live and handover, so everything stays with you.
Catalogue · S7
Sideways through content
Vertical scrolling pushes a row to the left. Like unfolding without a click.
Catalogue · S8
Line draws itself
A line is drawn as you scroll and connects stations.
Catalogue · S9
Ticker that only runs as you scroll
The type moves only when the page scrolls, never on its own.
Special buttons
Nine variations for the same job: getting people to the next step. Please try them, with the keyboard too.
B1
Magnetic
The button follows the pointer a few pixels.
Mouse only. Keyboard and touch get a calm button.
B2
Text roll
The label rolls up and is replaced by a copy.
The copy is hidden from screen readers.
B3
Fill wave
The fill grows from the spot where the pointer enters.
With the keyboard it grows from the centre.
B4
Arrow glide
The arrow leaves the button and returns from the other side.
Signals direction: this way on.
B5
Edge run
A streak of light runs around the edge.
Runs only on hover and focus, never permanently.
Hold to confirm
B6
Press and hold
Confirms only after holding for a second.
Only for risky actions. Always offer an alternative that works without holding.
B7
Tilt
The surface leans towards the pointer, a gleam moves along.
Decorative. The content stays flat and readable.
B8
States
Send, sending, sent: the button explains what is happening.
The status is read out (aria-live).
B9
Switch
A switch with a springy knob.
A real switch (role=switch), operated with the space bar.
Ground rules
How we use motion, on this page and on yours.
Motion explains something.
If an effect doesn't explain or guide, it stays out.
Everything works without a mouse.
Keyboard, touch and screen readers get the same content. Hover is never the only way.
Calm on request.
With “reduce motion” set in the system, the calm version appears. In addition, the “Pause animations” switch at the bottom of every page stops everything.
Stay light.
Only transform, opacity and clip-path, no libraries. The first view of this page stays small.
Nothing flashes.
No element flashes more than three times a second, nothing keeps running by itself.
Stay measurable.
Contrast, focus ring and target size stay compliant in every state.
Next
Want any of this for your website?
Tell us what your site should be able to do. We'll tell you what's worth it and what isn't.