Reveal

Fades its content in with a small rise when it mounts on the client, or first scrolls into view with inView. Server-rendered content and reduced motion show the end state at once. The content stays in the accessibility tree the whole time: hiding uses opacity only.

Import

import { Reveal } from "@jcsoftdev/ui/motion";

Usage

export const RevealOnMount: Story = {
  render: () => (
    <Replay>
      {() => (
        <Reveal>
          <Card className="max-w-sm p-card">Welcome back. Three tasks are waiting for you.</Card>
        </Reveal>
      )}
    </Replay>
  ),
};

Source of the Storybook story.

Props

Prop	Type	Default	Description
delay	number		Extra wait before entering, in ms.
inView	boolean	false	Enter when the element first scrolls into view instead of on mount.
asChild	boolean		Animate the single child element instead of rendering a div.
ref	Ref<HTMLElement>

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Reveal On Mount
• Staggered Cards
• Cross Fade List Detail
• Count Up In AK Pi
• Highlight Rows
• Cross Fade Swaps Keyed Content
• Cross Fade Reduced Motion Swaps At Once
• Count Up Lands On The Formatted Value
• Count Up Reduced Motion Shows The Final Value
• Reveal And Stagger Reduced Motion Are Static
• Stagger Keeps Children In The Accessibility Tree
• Highlight Row Pulses Only New Rows

Source

packages/ui/src/motion/reveal.tsx