LUMEN
06FOUNDATIONS

At resting pulse.

Timing comes from a resting heart rate: 60–72 bpm gives 830–1000 ms cycles. Motion is calm, precise and purposeful. It uses native scrolling, animates only transform and opacity, and has a complete reduced-motion fallback.

06.1

Durations & easings

--dur-1120 ms
Hover color, press feedback
--dur-2200 ms
Toggles, focus rings, tooltips
--dur-3320 ms
Dropdowns, chips, toasts
--dur-4560 ms
Drawers, modals, FLIP
--dur-5830 ms
Section reveals · one heartbeat at 72 bpm
Systole cubic-bezier(.3, 0, .1, 1) Quick start and firm stop. Used for UI responses such as toggles, menus and presses.
Diastole cubic-bezier(.16, 1, .3, 1) Long, soft settle. Used for reveals, the aperture, line draws and count-ups.
06.2

Scroll-trigger catalog

01 · Lumen aperture revealclip-path circle · 1400 ms · diastole
±0.5 mm
02 · Line-draw annotationscaleX · 830 ms · label +560 ms
Evidence at a glance.
03 · Masked headlinetranslateY 105% → 0 · 1100 ms · +120 ms/line
04 · Staggered fade-up16 px · 830 ms · 80 ms stagger, max 6
−18%OR TIME PER CASE
05 · Count-up1600 ms · ease-out cubic · tabular-nums
42%
06 · Scroll-progress ringbound to scroll, no easing · CTA expands after 18%
SCROLL INSIDE ↓ 0%
07 · Sticky exploded viewposition: sticky + scroll progress · native scroll
01Foundations
02Planning
03Registration
04Resection
05Gap balancing
06Certification
08 · Horizontal learning pathoverflow-x + scroll-snap · keyboard scrollable
VEYRA-01 St. Aurel VEYRA-02 Sight AI Nordhavn Pulse AF
09 · FLIP filteringtransform only · 560 ms · removed items fade 320 ms
06.3

Motion budget by intent

Marketing
D01 · D02 · D03 · D07 · D08 Expressive. Aperture, line draws, masked headlines, count-ups, sticky exploded views.
Utility
D05 · D06 · D10 · forms · eIFU Calm. Fades and state transitions only. No signature moments near inputs or safety content.
Product UI
D11 Connect portal Strictly functional. Feedback under 200 ms, no decorative motion, and live indicators only where data is live.
RULE 01Native scroll only. No scroll-jacking, no smooth-scroll libraries that hijack wheel input.
RULE 02Animate transform and opacity only. clip-path only for the aperture, and only once per section.
RULE 03Primary CTAs pulse once on entering the viewport and never loop. Live indicators are the only loops.
RULE 04With reduced motion, show the final state instantly. Count-ups show final values, and apertures render open.