The craft · Motion
Motion with a job.
Motion is useful when it tells a visitor something: that a press worked, where they are, what comes next. When it only decorates, it costs speed and gives nothing back.
Three examples
Slow drift on a photo
The Ken Burns effect: 60 seconds on the home page, and only on large screens with a mouse.
Staggered arrival
- Fit Call booked
- Written scope in progress
- Build started
Each item moves up and fades in. It changes opacity and position only, never layout.
A press that answers back
A small change when you press tells you it worked.
A test for each effect
| Effect | Its job | Keep it when | Cut it when |
|---|---|---|---|
| Micro-interaction | Confirms an action | The change is immediate and small | It delays the action it confirms |
| Staggered reveal | Shows what is new, and in what order | Items arrive in under a second | A visitor has to wait to read |
| Parallax | Adds depth between layers | It runs on transforms, on capable devices | It moves text or fights the scroll |
| Slow zoom (Ken Burns) | Keeps a still photo alive | It is slow, behind the content and optional | It sits behind moving glass on a phone |
| Page transition | Shows where you came from | It is quick and can be skipped | It hides slow loading |
How we keep it fast
- Animate opacity and transform only. Height, width, top and left make the browser lay the page out again on every frame. Opacity and transform do not.
- Gate the heavy effects. The photo drift on the home page runs for 60 seconds, and only on large screens with a mouse.
- Keep the content in plain HTML. Motion arrives after the words, so search engines and slow phones still get the page.
- Honor the visitor’s setting. Reduced motion turns the effects off.
These habits protect the page’s speed scores: how fast the main content paints, how little the layout shifts and how quickly the page answers a tap. The glass rules are on the glassmorphism page.
Questions
What is a micro-interaction?
A small response to something a visitor does: a button that presses in, a field that confirms, a toggle that slides.
Does parallax hurt SEO or speed?
It can hurt speed if it runs on layout properties or on phones. Keep it to transforms, limit it to large screens and keep the content in plain HTML.
How do I respect reduced motion?
Use the prefers-reduced-motion media query to stop animations and to replace smooth scrolling with a direct jump, as the demo above does.
Want a site or an app built this way?
The Fit Call is a working session on one real workflow. It is where we look at what you have and say what we would build.
Or see automotive operations, the work and the rest of the craft.