Motion should prove the mechanism
A restrained interaction system for the Aurelian landing page: six animations that make craftsmanship legible, product comparison more inviting, and the route to a boutique easier to follow.
The seconds hand may move forever. Every other animation must earn its moment, complete its thought, and become still.
One journey, six kinetic proofs
The sequence follows the shopper’s changing question—from “Is this worth my attention?” to “Where can I try it?”
Make the watch tell real time
The product should behave like an instrument before the copy asks visitors to believe that it is one.
A living first impression
Set the hour and minute hands to the visitor’s local time. Let the accent-coloured seconds hand sweep at the cadence appropriate to the movement. On first arrival only, pass a very faint reflection across the crystal.
- Why it earns motion
- It turns the watch from illustration into evidence. The movement is inseparable from what the product is and immediately reinforces “Chronometer.”
- TriggerBegin after the hero copy settles, approximately 600–800ms after first paint.
- CadenceContinuous sweep for mechanical character; optionally test a precise 1Hz tick as a contrasting expression.
- CrystalOne reflection pass, 900–1200ms. Never loop it conspicuously.
- Conversion roleIncrease hero dwell and “Discover the model” engagement without delaying the call to action.
Persistent motion budget: one element only
Turn comparison into inspection
The three references currently read as a catalogue row. Motion can make them feel like watches handled one at a time.
Hover or focus a reference to inspect it
One watch enters focus
On hover, keyboard focus, or first tap, scale the watch—not its card—by roughly 5–8%. Start only that dial’s seconds hand and reveal a direct product action beneath the reference.
- Why it earns motion
- The response acknowledges shopper intent at the exact object being considered. It creates preference formation rather than generic spectacle.
- Duration500–700ms entering; 300–450ms returning. Use a soft deceleration, never a spring.
- Material cueA tiny highlight shift may clarify Ivory, Slate, and Rose Gold, but must not alter perceived product colour.
- MobileFirst tap opens the inspection state; the revealed action remains explicit and large enough to tap.
- MeasureReference-page click-through rate, distribution of attention among variants, and appointment starts by reference.
Show energy becoming precision
“Wound by the wrist” is a causal claim. The animation should explain that cause instead of merely spinning decorative gears.
A mechanical sentence
As the section enters view, the rotor turns with one weighted swing. Motion transfers inward through two gear stages, then ends as a controlled pulse at the escapement. The entire sentence takes about three seconds and does not repeat.
- Why it earns motion
- It reduces the cognitive distance between wrist movement, stored energy, and chronometric regulation. The shopper understands why the calibre matters.
- Act IRotor: 0–1200ms. A weighted acceleration and overshoot communicates physical mass.
- Act IITransfer: 700–2200ms. Adjacent elements move with slight delay, preserving mechanical causality.
- Act IIIEscapement: 1800–3000ms. Two restrained pulses resolve the sequence.
- LinkageTime the title and body reveal to the mechanism, then expose “Inside the Calibre 8412.”
One causal sequence · no decorative loop
Let each number demonstrate its meaning
Avoid identical count-up effects. Each specification describes a different physical property and deserves a different visual verb.
Convergence · capacity · equilibrium · depth
Change the mode from browsing to ownership
The closing invitation should feel like entering a private viewing room—not another campaign banner.
A room with no clocks
As the invitation enters view, the surrounding field gently darkens while a controlled pool of light remains on the message and action. Reveal the button only after the sentence is readable.
- Why it earns motion
- The light transition makes the site’s most evocative line spatial. It creates a deliberate pause before the highest-intent action.
- Duration1600–2200ms. Slow enough to feel architectural, not theatrical.
- SequenceRoom darkens → invitation resolves → button appears. Never animate all three simultaneously.
- RestraintNo floating particles, lens flare, cursor magnetism, or pulsing call to action.
- MeasureBoutique-finder opens, location searches, appointment starts, and completion rate.
Try it on, in a room with no clocks
Private appointments at forty-one boutiques. No purchase expected, ever.
Find a boutiqueA spatial pause before the commercial action
Prioritise evidence over spectacle
Impact estimates are hypotheses to test, not promises. Complexity includes design, engineering, QA, and cross-device behaviour.
| Concept | Shopper value | Commercial hypothesis | Complexity | Priority |
|---|---|---|---|---|
| Living hero dial | Immediate product vitality and authenticity | More hero dwell and model discovery | Low–medium | Build first |
| Reference inspection | Faster visual comparison and preference | More product-detail visits | Medium | Build second |
| Calibre causality | Technical understanding and brand proof | More movement-content engagement | Medium–high | Build third |
| Compact navigation | Orientation and lower interaction cost | More deep-page navigation and return visits | Medium | Build fourth |
| Instrument specs | Memorable interpretation of claims | More specification recall; indirect conversion | Medium | Selective |
| Boutique focus | Emotional transition to physical experience | More boutique-finder engagement | Low–medium | Test last |
Luxury is temporal restraint
The system should feel governed by mass, friction, precision, and silence—the physical vocabulary of the watch itself.
One persistent motion
Only the hero seconds hand loops. All other sequences run once, respond to direct interaction, or stop when out of view.
Three duration bands
Controls: 180–320ms. Product inspection: 450–700ms. Narrative mechanics: 1600–3200ms.
Physical easing
Use deceleration and slight weighted overshoot only where mass exists. Never apply elastic or playful spring motion.
No layout motion
Animate transforms and opacity. Do not shift copy, prices, or calls to action while shoppers are reading or aiming.
Equal input modes
Every hover state needs keyboard focus and a stable touch equivalent. Motion cannot be the sole carrier of information.
Respect stillness
Under reduced-motion preferences, set the clock to a meaningful static time and reveal every state without transition.
Measure commerce, not applause
Animation is successful when it helps a shopper advance—not when it merely earns compliments from designers.
Primary outcome
Qualified progression: a visitor moves from the landing page into a specific reference, boutique search, or appointment flow.
Guard against novelty bias by running tests long enough to include repeat visitors and both high- and low-intent acquisition sources.
- Baseline instrumentationRecord current hero dwell, product click-through, depth, boutique opens, and appointment starts before adding motion.
- Hero plus inspection testShip the two lowest-complexity, highest-proximity product interactions together; test against the static page.
- Calibre comprehension testMeasure movement-section dwell and “Inside the Calibre” clicks; add a short recall prompt only in moderated research.
- Navigation-depth testTrack whether the compact bar increases useful revisits without increasing exits or accidental clicks.
- Boutique conversion testEvaluate finder opens and appointment completion, segmented by new versus returning visitors and device class.