# Adding Reveal Animations

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

- 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 of @awesome-reveal/astro and native Web Animations keyframes. Use when you animate elements of an Astro page that enter the viewport.

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

# Add reveal animations

Import `Reveal` or `Cascade` in the component script (frontmatter). `Cascade` reveals the children of an element in sequence. The component loads its custom element and its CSS, and it needs no hydration directive.

Reveal a whole table with `as="table"`, or reveal content inside a table cell. The `RevealTag` type excludes document tags, table parts and SVG-only tags. Do not place `Reveal` or `Cascade` directly in a `<table>`, a table section, a row or a `<select>`: the HTML parser moves the host out of it. In a `<p>`, also inline in MDX text, use an inline tag such as `as="span"`. The parser moves a block tag, such as the default `div`, out of the host, and the host reports an error in the browser console.

Do not import a stylesheet. The package loads its stylesheet, which hides server-rendered content 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.

```astro
---
import { Cascade, Reveal } from "@awesome-reveal/astro";
---

<Reveal from="left">Hello</Reveal>
<Reveal as="section" from={{ opacity: 0 }} delay={100}>Fade only</Reveal>
<Cascade as="ul" interval={120}>
  <li>Fast</li>
  <li>Small</li>
</Cascade>
```

The props types:

```ts
import type { CascadeProps, RevealProps } from "@awesome-reveal/astro";
const options: RevealProps = { from: "left", duration: 500 };
const list: CascadeProps<"ul"> = { as: "ul", interval: 120 };
export { list, options };
```

Set `from` to `"top"`, `"right"`, `"bottom"` or `"left"` for an entrance that starts transparent and 24px away on that side. The defaults are `from: "bottom"`, `duration: 600` (milliseconds), `delay: 0` (milliseconds) and `threshold: 0`. Without `when`, the entrance plays one time.

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