Cobalt presses. Tufts hovers. The spring fires on toggles.
5 duration tokens3 easing curves50+ animations1.4s sonic loopv10.0
Philosophy
Motion should explain, not entertain.
Every animation in the GFS system has a job. A pulse means a sensor is live. A slide means a state changed. A spring means a user just toggled something. If a motion does not answer a question for the operator standing at a dock door or the buyer scrolling a bid sheet, it does not ship. We build for warehouse light, schoolyard noise, and the four-second attention window between two pallets moving past the scanner.
The motion ladder is fixed: 120ms for press, 200ms for toggle, 300ms for toast, 400ms for entry, 600ms for fill. Anything outside that band needs a written exception. Reduced-motion users get the same product with the timing clamped. The sonic mark plays once, never on errors.
Modal entry. Detail view popping out of a card. Confirmation badge.
05
SHIMMER
Loading skeleton. The data is on the wire. The shape is known.
■ If a new animation does not fit one of these five verbs, it is the wrong animation. Rename the intent first, build second.
04
Live Pulses
Four heartbeats. Same algorithm, different signal.
GREEN · LIVE
Topbar live dot. Reads as "data is fresh, system is online."
COBALT · MAP
Facility markers on the map. Heartland, Hermitage, and customer DCs.
TUFTS · HOVER
Interactive surface telling the user "this responds to hover or tap."
AMBER · ALERT
Cold chain warning. Reefer temp drift. Slot late for receiving.
■ Pulse cycle is always 2.2s ease-out. The color is the meaning, not the timing.
05
Sonic Brand · Live
A 1.4 second descending interval. Cobalt to Tufts to Jordy.
AUDIO LOGO · 1.4s loop · cobalt → tufts → jordy
The sonic mark is three descending notes mapped to the three rings of the orbital identity. The cobalt fundamental anchors the chord. The tufts third rises with hue. The jordy fifth resolves the phrase. Total duration is 1.4 seconds.
It fires on app load, on confirmed submissions, and on the daily ops-strip refresh. It never plays on errors. The bars at left are a visual transcription of the same envelope: attack, sustain, decay.
■ The sonic mark is the only animation in the system that lives at the second scale. Everything else is sub-second.
06
Loading States
Shape known. Spinning anywhere. Filling forward.
Skeleton
Shape is known. Data is in flight.
Used when the response is under 800ms expected. The placeholder mirrors the shape of the incoming content so the eye does not jump on arrival.
Spinner
Length unknown. Operation pending.
Used when latency is unbounded: file uploads, NetSuite saved-search runs, external integrations. Tufts ring on silver track.
Progress Bar
Length known. Filling forward.
Cobalt to tufts gradient. Used on bulk imports, exports, deploys, and any multi-step operation with a measurable end.
■ Pick by what is known: shape, length, or neither. The loading state is a contract with the user about the wait.
■ Hover is desktop-only. Touch devices skip these states; the tile is reactive on press instead.
08
Button Press Choreography
Press to feel the 120ms.
Default
Ghost
Success
Danger
■ Every button presses inward 3% on active. The eye perceives 120ms as instant; the finger feels the contact.
09
The Globe
Six layered animations. One mark.
CoreThe cobalt brand mark. Static. The anchor of the system.
Ring 120s linear rotation. The inner trade route. Fastest cadence.
Ring 232s linear rotation, reverse. The middle orbit.
Ring 348s linear rotation. The outer ring. Reads almost still.
OrbitDashed path that the rings ride. Pure geometry, no motion.
Pulses2.2s ease-out, three pulses staggered at 0s, 0.7s, 1.4s.
■ The globe is the most-rendered surface in the system. Every layer earns its CPU cost.
10
Page Transitions
Three entry choreographies for incoming content.
Fade-up
10px lift · 400ms
Default for new sections. opacity 0 to 1, translateY(10px) to 0.
Fade-in
Pure opacity · 300ms
For inline content swaps and theme transitions.
Scale-in
98% to 100% · 200ms
Modal entry and confirmation badges only.
■ Every section on this page uses fade-up on first paint. Reload to see it land.
11
Scroll-Triggered Motion
Two surfaces. One scroll event.
Reading bar · triggerwindow scroll. Position over total scrollable height.
Reading bar · outputtransform scaleX(0) to scaleX(1) on the bar element.
Reading bar · colorLinear gradient, cobalt to tufts, left to right.
Reading bar · height2px. Sits above the topbar. Never flickers.
Back-to-top · appearanceBecomes visible above 400px scroll. Fades in over 200ms.
Back-to-top · pressScrolls window to 0 with smooth behavior. No JS-driven easing override.
■ Scroll handlers run on the native scroll event with no throttling. The handler is one transform write per frame.
12
Reduced Motion
Respect the OS setting. Always.
prefers-reduced-motion: reduce — when the operating system reports the user prefers reduced motion, every animation and transition is clamped to 0.01ms. The product still works. Pulses become static dots. Slides become instant swaps. Spinners freeze on their first frame. The sonic mark does not auto-play.