AnimateRotate

Content turning about a point. Two angles rather than one, so the same component covers both a glyph swinging into place and one that spins without ever landing.

import { AnimateRotate } from 'neba';

<AnimateRotate from={-270}>
  <Icon icon={<StarIcon />} size="xl" color="warning" label="Starred" />
</AnimateRotate>;

Props

Prop	Type	Default	Description
from	number	-180	The angle it starts at, in degrees. Negative is anticlockwise
to	number	0	The angle it ends at. Together with from this covers both a turn into place and an endless spin
origin	string	'center'	Which point it turns about: any CSS transform-origin
fade	boolean	true	Fades in as it turns. Turn it off for a continuous spin
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
modeshared	'in' | 'out'	'in'	Whether the content arrives or leaves. out is the same animation run backwards, and it is held there
durationshared	number	460	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'	1	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
render	useRender.RenderProp	—	Renders something other than a div (render={<span />}). Base UI's own escape hatch
children	ReactNode	—	What turns

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

Examples

from and to

from alone is an arrival: something swings into place and stops. from and to together with repeat="infinite", easing="linear" and fade={false} is a spin that never lands: a working mark, a decorative glyph. Negative angles turn anticlockwise.

import { AnimateRotate, Icon } from 'neba';

function GearIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none">
      <circle cx="8" cy="8" r="2.5" stroke="currentColor" strokeWidth="1.5" />
      <path
        d="M8 1v2M8 13v2M1 8h2M13 8h2M3.1 3.1l1.4 1.4M11.5 11.5l1.4 1.4M12.9 3.1l-1.4 1.4M4.5 11.5l-1.4 1.4"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </svg>
  );
}

/* Two angles and no fade is what turns an arrival into a spin. */
export default function AnimateRotateSpin() {
  return (
    <div className="flex items-center gap-6">
      <AnimateRotate
        from={0}
        to={360}
        repeat="infinite"
        easing="linear"
        fade={false}
        duration={2400}
      >
        <Icon icon={<GearIcon />} size="lg" color="primary" label="Working" />
      </AnimateRotate>

      <AnimateRotate
        from={0}
        to={-360}
        repeat="infinite"
        easing="linear"
        fade={false}
        duration={1400}
      >
        <Icon icon={<GearIcon />} size="md" color="secondary" label="Working faster" />
      </AnimateRotate>
    </div>
  );
}

origin

Any CSS transform-origin. Off-centre it becomes a swing rather than a spin, which with alternate is a rock back and forth.

import { AnimateRotate, Chip } from 'neba';

export default function AnimateRotateOrigin() {
  return (
    <div className="flex items-center gap-8 py-4">
      <AnimateRotate
        origin="bottom left"
        from={-12}
        to={12}
        duration={1600}
        repeat="infinite"
        alternate
        fade={false}
      >
        <Chip color="warning">bottom left</Chip>
      </AnimateRotate>

      <AnimateRotate
        origin="center"
        from={-12}
        to={12}
        duration={1600}
        repeat="infinite"
        alternate
        fade={false}
      >
        <Chip color="warning">center</Chip>
      </AnimateRotate>
    </div>
  );
}

fade

On by default, and the first thing to turn off for anything repeating: a fade that runs on every pass of a spin reads as flickering rather than as turning.

<AnimateRotate from={0} to={360} repeat="infinite" easing="linear" fade={false}>
  <Icon icon={<GearIcon />} label="Working" />
</AnimateRotate>

stagger

stagger, durationStep and reverse hand the effect to the children one at a time instead of running it on the box. They work the same way here as on AnimateFade, where they are set out in full.

Accessibility

• A reduced-motion preference switches the animation off entirely and the content is simply there, at its to angle.
• Do not rotate text. A rotated word is resampled along its whole length, which is exactly what the design language's rule against transforms exists to prevent. Rotation is for glyphs.