AnimateFade

Content arriving or leaving on opacity alone. The plainest effect in the set and the one to reach for first: nothing moves, so nothing reflows and no text is resampled.

import { AnimateFade } from 'neba';

<AnimateFade>
  <Card title="Deployment finished">Two services restarted, no errors.</Card>
</AnimateFade>;

Props

Prop	Type	Default	Description
from	number	0	The opacity it starts from, between 0 and 1
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	320	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={<section />}). Base UI's own escape hatch
children	ReactNode	—	What arrives or leaves

Every other <div> attribute passes through to the root.

The settings shared by every Animate* (duration, delay, easing, repeat, alternate, trigger, play, once, threshold, paused) mean the same thing on all of them, and are defined in prop conventions.

Examples

duration and delay

Both are milliseconds. A delay is what turns a set of fades into a sequence, and it is what AnimateAppear does for you when the things being delayed are a list.

import { AnimateFade, Chip } from 'neba';

export default function AnimateFadeTiming() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      {[0, 200, 400, 600].map((delay) => (
        <AnimateFade key={delay} delay={delay} duration={500}>
          <Chip>{delay}ms</Chip>
        </AnimateFade>
      ))}
    </div>
  );
}

trigger

mount is the default and needs nothing from you. visible waits until the element is scrolled into view (once, unless once is off), and threshold is how much of it has to be on screen. hover runs while the pointer is on it, restarting on each entry, and keyboard focus counts as a pointer. manual runs nothing until play says so, and every false → true starts it over.

import { useState } from 'react';
import { AnimateFade, Box, Switch, Typography } from 'neba';

export default function AnimateFadeTriggers() {
  const [play, setPlay] = useState(false);

  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap items-center justify-center gap-4">
        <AnimateFade trigger="hover" duration={400}>
          <Box size="sm">
            <Typography level="caption">Hover me</Typography>
          </Box>
        </AnimateFade>

        <AnimateFade trigger="visible" duration={600}>
          <Box size="sm">
            <Typography level="caption">On scrolling into view</Typography>
          </Box>
        </AnimateFade>
      </div>

      <Switch checked={play} onCheckedChange={setPlay} label="Play the manual one" size="sm" />

      <AnimateFade trigger="manual" play={play} duration={500}>
        <Box size="sm">
          <Typography level="caption">Driven by the switch</Typography>
        </Box>
      </AnimateFade>
    </div>
  );
}

mode

out is the same animation run backwards, and it is held there: a faded-out element stays faded out rather than snapping back when the animation ends. With alternate it returns instead of jumping, which is what makes a repeating fade a pulse.

import { AnimateFade, Chip } from 'neba';

export default function AnimateFadeMode() {
  return (
    <div className="flex items-center gap-3">
      <AnimateFade duration={1200} repeat="infinite" alternate>
        <Chip color="success">in</Chip>
      </AnimateFade>

      <AnimateFade mode="out" duration={1200} repeat="infinite" alternate>
        <Chip color="danger">out</Chip>
      </AnimateFade>
    </div>
  );
}

from

The opacity the fade starts at, between 0 and 1. Raise it for content that should never be completely gone: a dimming rather than a disappearance.

<AnimateFade from={0.4}>
  <Chip>Draft</Chip>
</AnimateFade>

stagger, durationStep and reverse

stagger is how long after one child the next one starts, in milliseconds. At 0 (the default), the box itself is what fades, and the children are left alone. Above it the effect moves onto each child in turn and nothing is written on the box, so a list of five arrives one row at a time.

durationStep adds that many milliseconds to each successive child's duration; a negative value speeds them up down the list, and a duration never goes below zero. reverse runs the children last-to-first: only the order reverses, each child still plays forwards.

The step is per child, so what you pass matters: five children are five steps, and one child holding five things is one step. Grouping is how part of a list opts out.

import { AnimateFade, Box, Button, Typography } from 'neba';
import { useState } from 'react';

const ROWS = ['Design', 'Engineering', 'Research', 'Support', 'Finance'];

export default function AnimateFadeStagger() {
  const [run, setRun] = useState(0);

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Button variant="outline" size="sm" onClick={() => setRun((n) => n + 1)}>
        Play again
      </Button>

      <div key={run} className="grid gap-6 sm:grid-cols-2">
        <div className="flex flex-col gap-2">
          <Typography level="caption" color="secondary">
            stagger=60
          </Typography>
          <AnimateFade stagger={60} className="flex flex-col gap-2">
            {ROWS.map((row) => (
              <Box key={row} size="sm" variant="outline">
                {row}
              </Box>
            ))}
          </AnimateFade>
        </div>

        <div className="flex flex-col gap-2">
          <Typography level="caption" color="secondary">
            stagger=60 · durationStep=120 · reverse
          </Typography>
          <AnimateFade stagger={60} durationStep={120} reverse className="flex flex-col gap-2">
            {ROWS.map((row) => (
              <Box key={row} size="sm" variant="outline" color="secondary">
                {row}
              </Box>
            ))}
          </AnimateFade>
        </div>
      </div>
    </div>
  );
}

Accessibility

• A reduced-motion preference switches the animation off entirely and the content is simply there. It is never left invisible.
• The wrapper adds no role and no name; whatever is inside keeps its own.