Every primitive resolves duration, easing, and transition presets from the shared manifest before local overrides.
Coverage92%
Umbrella motion system
Every reveal, slide, scale, magnetic, tilt, scroll-reveal, and morph in the Oak Flats Mufflermen voice shares a single easing and duration manifest. Edit one token and the whole subtree cascades.
Production answer
Umbrella motion system is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Primary CTAReview Umbrella motion system states
Generative search brief
Umbrella motion system: Every reveal, slide, scale, magnetic, tilt, scroll-reveal, and morph in the Oak Flats Mufflermen voice shares a single easing and duration manifest. Edit one token and the whole subtree cascades.
Production primitive lab
This route now reads like a QA surface for the motion layer: each primitive has a trigger, a state contract, a readiness rail, and a live demo wired through the same provider.
MotionConfigheroOSreduce
Each demo states the event boundary first: viewport, pointer, scroll progress, loop, or active prop transition.
Coverage88%
The lab keeps reduced-motion behaviour visible in the contract so animation never becomes the only state signal.
Coverage100%
MotionConfig provider
The showcase runs through the shared provider, publishing the same transition preset and reduced-motion strategy to every child primitive below.
hero transition preset flows through reveal and slide primitives
Provider activeReveal, slide, scale, magnetic, tilt, and scroll primitives inherit one timing rail.
Reduced motionOperating-system motion preference stays respected across the subtree.
Reveal
Generic reveal wrapper for content that should enter once. Use it when the content itself is static and the entrance is the only motion layer.
scroll element into view
Rebuilt to order
Bay 04 releaseStainless cat-back, mandrel-bent, dyno-sheet attached.
Stagger list
Auto-staggers every child of a list. Use for task flows, process cards, and ordered workshop states where sequence improves scanability.
container enters viewport, then children inherit stagger
- DiagnosePull the existing rig, image every weld.
- PatternSet the bends against a clean rolling chassis.
- FabricateMandrel bends and TIG welds to spec.
- Sign offDyno and leak check before the keys go back.
Fade in
Single-purpose fade for dense type, charts, and full-bleed media where adding transform motion would feel noisy.
element enters viewport without spatial movement
Half a century on Oak Flats Road
Slide in
Directional slide-in for panels and drawers that need a clear origin. The overshoot tail keeps the land intentional without feeling loose.
element enters viewport from the right
Twin-tip release4-inch polished, slash-cut, hangers welded in.
Scale in
Scale-from-anchor tiles. Useful for quote cards, status tiles, and compact success states that should feel placed rather than dropped.
element enters viewport from bottom-left origin
Quote 2415Catalytic converter swap, in-stock, 3-day turnaround.
Magnetic
Mouse-attracted wrapper for high-value controls. It resets on pointer leave or blur and stays inert under reduced motion.
hover or focus the control surface
Tilt
3D tilt with perspective context for premium cards. Reduced-motion disables rotation so the component keeps the same readable surface.
hover the card surface
Stage one cat-backSUS304, mandrel, 2.5-inch, 4-inch tipsParallax text
Long-form text drifts as the user scrolls through the wrapper. Reserve it for editorial bands and hero-grade rhythm changes.
scroll past the wrapper to move the text rail
Workshop. Floor. Tested.
Driven. Logged. Signed off.
Scroll reveal
Continuous scroll-bound reveal for scrolly compositions where the user should feel progress through a sequence.
continuous progress through the viewport
Logged - Stage 1Headers on, mid-pipe matched.
Logged - Stage 2Cat-back to back-pressure spec.
Morph text
Text state swap for compact labels and headlines. Hover and interval modes both keep a stable layout and announce changes politely.
pointer or focus toggles the headline state
HoverOff the rack
timed interval repeats every 2.4 seconds
CycleBay 04
Gradient trail
Stroke-dash animation that traces along any supplied SVG path. Use as a supporting layer, never as the only status indicator.
CSS keyframes trace the path continuously
Pipe pressure - live trace
Count-up watcher
A count-up value behind an in-view gate. Reduced motion snaps the number to its final value while preserving the metric context.
element enters viewport, then numbers count once
Lifetime tickets - Bay 02-05
Returning customers - last 12mo
Average build longevity
Confetti on success
Celebratory state primitive for completed jobs and successful flows. The visual burst is paired with a persistent button state in the demo.
click the control to flip the active prop
Waiting for success event
Burst lifecycle0%
Motion tokens
Every primitive above pulls from this single manifest. Easings render as cubic-bezier strings, durations are milliseconds, and transition presets compose both.
instant
100msfast
180msnormal
240msslow
380mshero
720msstandard
cubic-bezier(0.32, 0.72, 0.24, 1)decel
cubic-bezier(0.16, 1, 0.3, 1)accel
cubic-bezier(0.55, 0, 0.7, 0.2)emphasized
cubic-bezier(0.2, 0.8, 0.2, 1.05)bounce
cubic-bezier(0.34, 1.56, 0.64, 1)snap
180ms / cubic-bezier(0.55, 0, 0.7, 0.2)smooth
240ms / cubic-bezier(0.32, 0.72, 0.24, 1)hero
720ms / cubic-bezier(0.16, 1, 0.3, 1)micro
100ms / cubic-bezier(0.32, 0.72, 0.24, 1)