How to use the four controls
Speed is duration, not velocity. A longer duration over the same distance produces slower motion, and the perceived speed of an animation depends on both duration and distance together. If a 400ms movement feels sluggish, try reducing the distance before reducing the time — shorter travel at the same duration usually reads as crisper rather than faster.
Intensity is amplitude: how far a layer travels, how many degrees it rotates, how much it scales. It is the control most worth being conservative with. Almost every animation that looks amateurish is over-amplitude rather than over-duration. As a starting rule, halve whatever amplitude first looks correct and check it again on a small screen, where the same pixel distance is a much larger proportion of the viewport.
Delay here is stagger — the offset applied between sibling layers. Stagger is what turns three independent animations into one sequence. Under about 40ms the layers read as simultaneous; over about 150ms the sequence starts to feel like a queue. The 60–90ms band suits most groups of three to five items.
Direction maps straight onto animation-direction. Alternate is the right choice for ambient loops because it removes the seam where a normal loop snaps back to its starting keyframe. Reverse is useful for mirroring a pattern on the opposite side of a layout, and for exit animations built from the same keyframes as the entrance.
What the presets demonstrate
Fluid Wave shows amplitude and stagger interacting: with a low delay the three layers move as one plane, and as the delay increases the same keyframes become a travelling wave. Floating Layers adds a small scale to the vertical drift, which is how depth is implied without perspective. Elastic Reveal is a one-shot entrance looped for preview purposes — watch how quickly overshoot becomes comedy above intensity 60.
3D Tilt uses a perspective transform with rotation on two axes, so it demonstrates why 4–8 degrees is usually the whole effect. Morphing Gradient animates background position on a composited layer rather than the gradient definition itself, which is the cheap way to do it. Parallax Drift gives each layer a different amplitude multiplier, which is the entire mechanism behind depth on scroll.
Taking values into production
The generated snippet uses custom properties so the tuned numbers stay in one place. Keep them on a container and let components inherit, which means a designer can retune a whole page by editing four values rather than hunting through a stylesheet. Declare your reduced-motion branch in the same file, immediately after the animation, so a reviewer can see both rules at once.
Two final checks before shipping. First, test on a mid-range device rather than the machine you built it on: a pattern that holds 60fps on a developer laptop can drop frames on a three-year-old phone. Second, watch the animation twenty times in a row. Motion that is charming once is often irritating on the twentieth view, and returning visitors will see it far more often than you did while designing it.