Motion craft in Paraplex

motion-craft-in-paraplex · by Paraplex

How Emil Kowalski's motion and design skills apply in Paraplex: his curves as keyframe easings, his durations for UI in a mock versus a title or a camera, springs from response and damping, and which of his skills to load when. Load with any of them.

Motion craft in Paraplex

Emil Kowalski's skills (emil-design-eng, animate, review-animations, animation-vocabulary, apple-design, find-animation-opportunities, pick-ui-library, and, turned off until a person wants them, prototype and improve-animations) are written for CSS, React and Motion. The judgment carries over whole; the syntax does not. This is the translation. Load his skill for the reasoning, and this one for how to say it to the scene.

Which to load

• Building a move from nothing — an entrance, a UI mock's interaction, a transition: animate, then here.
• Judging motion already in the scene, or before calling a template done: review-animations (strict; approval is earned). Report in his Before / After / Why table, in Paraplex terms.
• The person describes a motion without its name ("the bouncy pop", "the rubber band"): animation-vocabulary, then build it.
• A physical, gesture-like move, a sheet, a spring, glass and depth: apple-design.
• "What else could move here?": find-animation-opportunities — and take its no-list seriously.
• Taste, polish and the defaults behind all of it: emil-design-eng. Skip its "Initial Response" section: you are always mid-task.
• A code layer (write_code_layer) that needs a library: pick-ui-library.

Curves as keyframe easings

An easing sits on the keyframe a move LEAVES (add_keyframe or set_keyframes with easing):

"Never ease-in for UI" holds for anything that responds — a button, a menu, a card arriving. A shot LEAVING the frame for good may accelerate away; that is graphic motion, not response, and it is the one place an in-curve belongs.

Durations: a mock is UI, a title is not

Inside a mocked interface — a phone screen, a browser in a cursor tour, a dashboard — his UI numbers are the numbers, because the viewer reads it as software: a press 100–160 ms, a tooltip 125–200 ms, a dropdown 150–250 ms, a modal or drawer 200–500 ms, and nothing over 300 ms that answers a click. Titles, camera moves, shots and cuts are motion graphics and follow motion-fundamentals (0.4–0.8 s arrivals, holds of 1.5 s and more). A cursor tour mixes both: the camera pushes over 0.7–1 s; the UI it clicks answers in under 0.25 s.

Springs from response and damping

A spring easing is { type: "spring", stiffness, damping, mass }. Apple's and Emil's springs are given as a response (seconds) and a damping ratio (1 is no overshoot, 0.8 a little); with mass 1: stiffness = (2π ÷ response)², damping = 4π × ratio ÷ response.

Motion's bounce is about 1 − ratio. Keep bounce for moves that carried momentum; a menu that fades in does not overshoot. set_motion_preset adds squash, follow-through and a bounce on arrival from the layer's own track when the gesture earns it.

His component rules, as scene moves

• Nothing appears from nothing. Never scale from 0: scale 0.94 → 1 with opacity 0 → 100 over the same 0.2–0.35 s (animate_layer "scale" does this; or two add_keyframe lanes).
• Press feedback. A button a cursor clicks dips to scale 0.97 for about 100 ms and returns on a spring (add_cursor's click, or set_behavior's press state for Preview).
• Origin-aware. A popover grows from its trigger: set the layer's position so its edge sits at the trigger and scale it there, rather than from its center; a modal stays centered.
• Blur masks a rough cut. Two states that do not morph cleanly cross with a short blur (text blur 0.4 → 0 while opacity rises) over 150–200 ms.
• Only transform and opacity is his performance rule for the web; in Paraplex everything is drawn every frame, so the rule becomes: move position, scale, rotation and opacity for UI; save material, shader and light animation for the look.
• Stagger 30–50 ms per item for a list or a grid in a mock; cap the cascade near 600 ms.
• Reduced motion has a scene answer: offer a cut or a crossfade version of any move that travels far.

Reviewing in his format

When asked to review, answer in one table, in scene terms:

Then make the changes with the tools; a review that only talks has not finished.