Smooth motion | Hyper Flow

Use a preset

import { flow } from "@scorpion7slayer/hyper-flow";

flow(".dialog", {
  preset: "soft-spring",
});

The smooth presets are intentionally restrained:

smooth-rise combines translate, opacity, and blur with a strong ease-out curve.
smooth-scale handles compact popovers and contextual surfaces.
smooth-blur-in resolves a soft focus transition without changing layout.
smooth-slide-left and smooth-slide-right provide directional entrances.
soft-spring uses a generated linear() easing with a damped spring response.
elastic-pop adds a firmer spring response for deliberate reveals.

The stepped presets are pixel-pop, pixel-slide-up, pixel-glitch, and pixel-flip.

flow(".result", {
  preset: "smooth-blur-in",
  stagger: 60,
});

flow(".pixel-mark", {
  preset: "pixel-flip",
});

Generate a spring

import { flow, spring } from "@scorpion7slayer/hyper-flow";

flow(".panel", {
  from: { y: 28, scale: 0.96, opacity: 0 },
  to: { y: 0, scale: 1, opacity: 1 },
  duration: 980,
  easing: spring({
    mass: 1,
    stiffness: 190,
    damping: 25,
    velocity: 0,
    samples: 42,
  }),
});

spring() returns a standards-based CSS linear() easing. Increase damping to remove overshoot. Increase stiffness to reach the final state faster.

Use any native easing

Hyper Flow does not hide Web Animations features:

flow(".toast", {
  keyframes: [
    { opacity: 0, y: 18 },
    { opacity: 1, y: -2, offset: 0.78 },
    { opacity: 1, y: 0 },
  ],
  duration: 620,
  easing: "cubic-bezier(0.16, 1, 0.3, 1)",
  fill: "both",
});

Every standard KeyframeAnimationOptions field remains available, including delay, direction, iterations, iterationStart, endDelay, fill, and composite modes.