Motion should explain, not decorate

This portfolio uses a lot of motion. The name unmasks on load, a chapter pins while roles resolve into a single line, project plates reveal as you reach them, a progress line draws down the method section as you read it. It would have been easy to make it a showreel. The rule I tried to hold instead was: motion is narrative infrastructure. Every animation has to support hierarchy, sequence, orientation or — occasionally, deliberately — delight. If it cannot say which, it goes.

What each kind of motion is for

Sequence. The method section is a pipeline: understand, validate, architect, design, build, measure, iterate, scale. A line that draws as you scroll through it makes the order physical. You know where you are in the process.

Hierarchy. On a project chapter, the title arrives first, then the visual, then the details. The order of arrival is the order of importance.

Orientation. A thin progress bar at the top shows how far through the page you are. On a long, single-page narrative, that is genuinely useful.

Delight. The hero reveal exists mostly to make a good first impression. That is a legitimate job — but it is one job, in one place, and it has a performance budget.

Rules that kept it honest

Content first, motion second. Everything is readable with animation switched off, with JavaScript disabled, and while animations are running. Body text is revealed once and then left alone; only images and decorative elements move while you scroll, so nothing you are reading slides out from under you.

Transform and opacity only. Animating layout properties forces the browser to recalculate the page every frame. Moving things with transforms and fading them with opacity lets it stay smooth on ordinary phones.

Different choreography for different devices. Desktop gets pinned sections and horizontal travel. Phones get a plain vertical narrative with short reveals. This is not the desktop version scaled down; a pinned section on a small touch screen feels like the page has stopped responding.

Reduced motion means reduced, not removed content. When someone has asked their system for less motion, the pinned choreography is never even constructed. All the content is simply there, in order.

No scroll hijacking. The page scrolls at the speed the reader scrolls. Motion responds to scrolling; it never takes it over.

What got cut

A custom cursor that replaced the system pointer — it made text selection and links feel wrong, so it became a subtle ring alongside the real cursor instead, and only on devices with a mouse. Animations that fired on every section just because they could. A decorative loop that turned out to cost main-thread time on every frame for no information at all.

The test

For any animation, finish this sentence: "This helps the reader understand ___." If the blank is hard to fill, the animation is decoration. Sometimes decoration is worth it. Usually it is worth less than a page that loads faster and reads more calmly.