Vinci Motion · Web motion library · SVZ proposed deliverable

Motion that behaves like heat.

Ten primitives and one set of tokens, written so any Vinci surface moves the same way: things arrive the way heat conducts, change the way a field re-solves, and answer the user crisply. Colour on screen keeps meaning something physical; motion reveals it and never adds to it. Everything below runs from the library itself.

GSAP 3runtime · already powering the hero and coverage ring
transform · opacity · clip · strokethe only animated properties
Reduced motiona first-class mode, not a fallback
Webflow + Reactsame tokens, same primitives, one file

Tokens

Eases · named for the physics they stand in for

conduct
power3.out
resolve
power2.inOut
respond
power2.out
sweep
none

Durations · seconds

respond
0.24
settle
0.62
resolve
0.90
fill
1.60

Staggers · seconds per item

words
0.04
layers
0.06
rows
0.05

Thermal stops · hot → cold · motion reveals, never invents

  1. #fbb665
  2. #f9a464
  3. #f6655e
  4. #df5078
  5. #9257d7
  6. #7249d8

Two speeds only. settle for state that arrives. respond for state that answers the user. Nothing bounces. Only transform, opacity, clip and stroke are animated. Reduced motion is a mode: instant swaps, no autoplay, every value still readable.

Primitives

  1. Physics that answers back.

    01

    Heat rise

    Entrance

    The entrance. Headlines split into words, list rows, stack layers. Arrives from below through a clip, staggered, and settles.

    heatRise(words, { stagger: VINCI_STAGGER.words })
  2. h = 125 · fails95.7 °C
    02

    Field settle

    State change

    A value or panel changes in place. A brief veil covers the swap so a re-solve is never a flash. Mutate content at the covered midpoint.

    fieldSettle(veil).add(() => swap(), 0.32)
  3. 10501251445000
    03

    Sweep

    Axis

    Move along an axis through named stops at a constant rate, holding where it matters. The eye reads the scale because the speed never lies.

    sweep(cursor, [{x:0},{x:150,hold:.5},{x:190,hold:.9},{x:340}])
  4. 04

    Trace

    Path

    Draw a path the way heat finds a route. Any SVG path; the dash offset is measured from the geometry, not guessed.

    trace(pathEl, { duration: VINCI_DURATION.fill })
  5. 05

    Respond

    Interaction

    Hover, press, focus. A short lift and a border brighten. The only motion that answers the user; everything else answers the physics.

    respond(cardEl, { lift: 3 })
  6. Peak94.5 °C
    Sources1020
    Layers18
    06

    Count

    Number

    A number arrives the way a solver converges: quickly, then settles on the exact value. Tabular numerals so the width holds.

    count(el, 94.5, { from: 120.6, suffix: ' °C' })
  7. Identity · brand ramp25.0 °C
    Evidence · product colormap25.0 °C
    07

    Thermal ramp

    Colour that means temperature

    A surface heats or cools with its value along a fixed ramp, so the same colour always means the same degree. Brand ramp for identity; the product ramp — the demo's engineering colormap — for evidence.

    thermalRamp(el, 25, 94.5, { min: 25, max: 125, ramp: VINCI_PRODUCT_RAMP })
  8. 08

    Stack reveal

    Object

    A layered object arrives from its source layer outward — the 18-layer board opens from the layer where the heat is born, and only then does the field appear. Same renderer, same camera as the hero and How Vinci works.

    stackReveal(layers, { source: 16, stagger: VINCI_STAGGER.layers })  // DOM
scene.explode 0 → 0.7, then scene.fieldReveal 0 → 1                // object
  9. 09

    Converse

    Conversation

    The exchange is the product, so its rhythm is a primitive. The user's line lands at once; Vinci's is preceded by a typing pulse sized to the answer; only the two newest lines stay live. Any chat surface, transcript rail, or approval thread.

    converse(rows, { typing, live: 2 })   // typing = 0.55–1.6s by length
  10. 10

    Object

    Object

    Four verbs, one renderer. Rest (read as one part) → open (count the layers) → probe (a column through the stack at the hotspot) → isolate (one layer held, the rest ghosted). The object moves between poses at `resolve`; it never cuts. Wherever the board appears.

    objectTo(scene, VINCI_POSE.open)      // { yaw, pitch, explode, zoom, fieldReveal }
objectTo(scene, VINCI_POSE.probe); scene.probe = hotspot

Where each primitive lives on the site

  1. Hero

    Heat rise on the headline words; field settle when the concept changes.

  2. How Vinci works

    Converse on the transcript rail; object between beats (rest → open → probe → isolate); stack reveal on the 18 layers; trace on the heat path; sweep on the convection axis; count on the readout; thermal ramp on the verdict.

  3. Hero · the loop

    Converse on the five-step chat; object on the board as each step lands. The two primitives are one product behaviour: you speak, the object answers.

  4. Three physics · instrument

    Thermal ramp in the product colormap wherever a colour stands for a measured value.

  5. Instrument

    Respond on Take control and Full screen; field settle when a condition changes.

  6. Coverage ring

    Sweep on the hand; respond on the regions.

  7. Proof cards, team, bench

    Respond only. Content that is read, not watched, does not move on its own.

  8. Reduced motion

    Every primitive degrades to its end state. Autoplay is off. Nothing is hidden behind a transition.