AnimateReveal

Content uncovered by an edge travelling across it. Nothing moves and nothing changes colour: the content is already in place at full size, and what changes is how much of it has been let through.

import { AnimateReveal } from 'neba';

<AnimateReveal>
  <h2>Nothing moved. It was let through.</h2>
</AnimateReveal>;

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
modeshared	'in' | 'out'	'in'	Whether the content arrives or leaves. out is the same animation run backwards, and it is held there
durationshared	number	620	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
side	'top' | 'right' | 'bottom' | 'left'	'left'	The edge the wipe travels from. left uncovers left to right
from	number	1	The opacity it fades from as it wipes. 1 is a wipe and nothing else
render	useRender.RenderProp	—	Renders something other than a div (render={<h2 />}). Base UI's own escape hatch
children	ReactNode	—	What is uncovered

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

It is a clip-path, so there is no wrapper and no overflow box: the element takes exactly the room it always took, and everything around it is laid out against the finished size from the first frame. That makes it the effect for a heading, a rule or a chart's plot area: anything whose position is part of the information.

Examples

side

The edge the wipe travels from. left (the default) uncovers left to right.

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

const SIDES = ['left', 'right', 'top', 'bottom'] as const;

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

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

      <div key={run} className="grid gap-3 sm:grid-cols-2">
        {SIDES.map((side, index) => (
          <AnimateReveal key={side} side={side} delay={index * 160} duration={800}>
            <Box variant="outline" size="sm">
              <Typography level="caption" color="secondary">
                side=&quot;{side}&quot;
              </Typography>
            </Box>
          </AnimateReveal>
        ))}
      </div>
    </div>
  );
}

from

Fades as it wipes, from this opacity. 1 (the default) is a wipe and nothing else, which is usually the point of reaching for one. Set it to 0 for both at once.

mode

mode="out" runs the same edge backwards and holds it there, which covers the content up again.

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 and the content is drawn whole, which is what it was always going to be.
• The content is in the document and in the accessibility tree the entire time. A clip hides pixels, not information.