# Adding Reveal Animations

Adds reveal-on-scroll animations with the Reveal and Cascade components and the...

- Repository: https://github.com/awesome-reveal/awesome-reveal (1193 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add awesome-reveal/awesome-reveal --skill adding-reveal-animations -g -a claude-code -y`
Codex: `npx skills add awesome-reveal/awesome-reveal --skill adding-reveal-animations -g -a codex -y`
Cursor: `npx skills add awesome-reveal/awesome-reveal --skill adding-reveal-animations -g -a cursor -y`
Gemini CLI: `npx skills add awesome-reveal/awesome-reveal --skill adding-reveal-animations -g -a gemini-cli -y`

## Description

Adds reveal-on-scroll animations with the Reveal and Cascade components and the useReveal and useCascade hooks of @awesome-reveal/react, and native Web Animations keyframes. Use when you animate React elements that enter the viewport.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Add reveal animations

Use the `Reveal` component, or the `useReveal` hook for an element that you render. `Cascade` and `useCascade` reveal the children of an element in sequence. Spread all the props from `getProps()` on the element, and give your own `ref` to `getProps()`, so that the hook can merge it.

The package loads its stylesheet, which hides the content until it reveals. Do not import the stylesheet, except in these two setups:

- In an Astro island, add `import "@awesome-reveal/react/reveal.css";` to the frontmatter of the page or the layout that renders the island. Astro collects the CSS of a page from the server build, which does not import the stylesheet.
- In the Next.js Pages Router with webpack, add `"@awesome-reveal/react"` to `transpilePackages` in the Next.js config. Without it, the build fails with "Global CSS cannot be imported from within node_modules". The App Router and Turbopack need no step.

Hydrate reveal content eagerly, for example with `client:load` in an Astro island, not `client:visible`. The stylesheet hides the server markup for at most 5 seconds. If the script attaches later, the content shows, then hides again until it reveals.

The stylesheet replaces a CSS `animation` of the hidden element or of a cascade child until the reveal, so put your own animation on an inner element. Do not set `data-awesome-reveal` yourself, because the package sets it. When you spread `getProps()` on a custom component, the component must pass `data-awesome-reveal` and the ref to its DOM element.

```tsx
import { Cascade, Reveal } from "@awesome-reveal/react";
<Reveal from="left">Hello</Reveal>;
<Cascade as="ul" interval={120}>
  <li>Fast</li>
  <li>Small</li>
</Cascade>;
```

The rest: https://github.com/awesome-reveal/awesome-reveal/blob/HEAD/packages/react/skills/adding-reveal-animations/SKILL.md