AnimateFloat

A slow drift with nowhere to get to. It says that something is not fixed to the page (an illustration, a floating card, a mark above a hero), and it runs for as long as the page is open.

import { AnimateFloat } from 'neba';

<AnimateFloat>
  <Card>Not fixed to the page.</Card>
</AnimateFloat>;

Props

Prop	Type	Default	Description
staggershared	number	0	How long after one child the next one starts, in milliseconds. 0 animates the box itself; anything above it moves the effect onto each child in turn
durationStepshared	number	0	How much longer each successive child takes, in milliseconds. Negative speeds them up down the list, and never past zero
reverseshared	boolean	false	Runs the children from the last to the first. Only the order reverses
durationshared	number	3200	How long one run takes, in milliseconds
delayshared	number	0	How long before it starts, in milliseconds
easing	string	—	The easing curve, as CSS writes it. Defaults to the house curve
repeatshared	number | 'infinite'	'infinite'	How many times it runs
alternateshared	boolean	false	Runs every other pass backwards, so a repeat returns instead of jumping
triggershared	'mount' | 'visible' | 'hover' | 'manual'	'mount'	What starts it. visible is on scrolling into view, hover is under the pointer (focus counts), manual is whatever play says
play	boolean	—	Runs it when trigger is manual. Each false → true starts it over
onceshared	boolean	true	With trigger="visible", whether it runs only the first time. Off, it runs again on every return
thresholdshared	number	0.2	With trigger="visible", how much of the element has to be on screen, from 0 to 1
pausedshared	boolean	false	Holds the animation where it is
from	'top' | 'right' | 'bottom' | 'left'	'top'	Which way it drifts
distance	number | string	'0.5rem'	How far, at the top of the drift. Numbers are pixels
render	useRender.RenderProp	—	Renders something other than a div (render={<figure />}). Base UI's own escape hatch
children	ReactNode	—	What drifts

Every other <div> attribute passes through to the root. The settings shared by every Animate* are defined in prop conventions.

It repeats forever and turns round at both ends, so there is never a frame where it jumps back. There is no mode: a drift has no direction to be reversed.

It is translate rather than a transform, so it composes with anything the element is already scaled or rotated by.

Examples

from and distance

from is which way it drifts and distance is how far it gets: a CSS length, or a number of pixels. Short on purpose: past about a centimetre it stops reading as something resting and starts reading as something moving.

import { AnimateFloat, Avatar, Typography } from 'neba';

const FACES = ['Ada', 'Bo', 'Cai', 'Dana'];

export default function AnimateFloatDistance() {
  return (
    <div className="flex w-full flex-col gap-6">
      <div className="flex flex-col gap-2">
        <Typography level="caption" color="secondary">
          stagger=400 — the same drift, out of step
        </Typography>
        <AnimateFloat stagger={400} distance={10} className="flex gap-3">
          {FACES.map((name) => (
            <Avatar key={name} name={name} size="lg" />
          ))}
        </AnimateFloat>
      </div>

      <div className="flex flex-col gap-2">
        <Typography level="caption" color="secondary">
          from=&quot;left&quot; · distance=14 · duration=2200
        </Typography>
        <AnimateFloat from="left" distance={14} duration={2200}>
          <Avatar name="Eun" size="lg" color="success" />
        </AnimateFloat>
      </div>
    </div>
  );
}

stagger

stagger puts a set of floating things out of step with each other, which is what stops four of them reading as one block. It works the same way here as on AnimateFade.

paused

paused holds the drift where it is, without unmounting anything.

Accessibility

• A reduced-motion preference switches the animation off and the content sits where the layout put it.
• Do not float a control. Something that is never quite where it was is harder to press, and this is the one effect in the set with no end.