# Reveal

> Fades its content in with a small rise when it mounts on the client, or first scrolls into view with `inView`.

Source: https://ui.jcsoftdev.com/docs/components/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

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

## Usage

```tsx
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](/storybook/?path=/story/motion-motion--reveal-on-mount)
- [Staggered Cards](/storybook/?path=/story/motion-motion--staggered-cards)
- [Cross Fade List Detail](/storybook/?path=/story/motion-motion--cross-fade-list-detail)
- [Count Up In AK Pi](/storybook/?path=/story/motion-motion--count-up-in-ak-pi)
- [Highlight Rows](/storybook/?path=/story/motion-motion--highlight-rows)
- [Cross Fade Swaps Keyed Content](/storybook/?path=/story/tests-motion--cross-fade-swaps-keyed-content)
- [Cross Fade Reduced Motion Swaps At Once](/storybook/?path=/story/tests-motion--cross-fade-reduced-motion-swaps-at-once)
- [Count Up Lands On The Formatted Value](/storybook/?path=/story/tests-motion--count-up-lands-on-the-formatted-value)
- [Count Up Reduced Motion Shows The Final Value](/storybook/?path=/story/tests-motion--count-up-reduced-motion-shows-the-final-value)
- [Reveal And Stagger Reduced Motion Are Static](/storybook/?path=/story/tests-motion--reveal-and-stagger-reduced-motion-are-static)
- [Stagger Keeps Children In The Accessibility Tree](/storybook/?path=/story/tests-motion--stagger-keeps-children-in-the-accessibility-tree)
- [Highlight Row Pulses Only New Rows](/storybook/?path=/story/tests-motion--highlight-row-pulses-only-new-rows)

## Source

`packages/ui/src/motion/reveal.tsx`