# Adding Reveal Animations

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

- 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 vReveal and vCascade directives of @awesome-reveal/vue, and native Web Animations keyframes. Use when you animate Vue 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 `vReveal` directive on an element that you render. `Cascade` and `vCascade` reveal the children of an element in sequence. The directive follows reactive options.

The package loads its stylesheet, which hides the content until it reveals. Do not import the stylesheet, except in an Astro island.

In an Astro island, add `import "@awesome-reveal/vue/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.

Hydrate reveal content eagerly, for example with `client:load` in an Astro island. Do not use `hydrateOnVisible()` or a Nuxt `hydrate-on-visible` component for it. 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.

```vue
<script setup lang="ts">
import { Cascade, Reveal, vReveal } from "@awesome-reveal/vue";
</script>

<template>
  <Reveal from="left">Hello</Reveal>
  <p v-reveal="{ from: { opacity: 0 }, delay: 100 }">Fade only</p>
  <Cascade as="ul" :interval="120">
    <li>Fast</li>
    <li>Small</li>
  </Cascade>
</template>
```

The same API in a render function:

```ts
import { h } from "vue";
import { Cascade, Reveal } from "@awesome-reveal/vue";
export const card = h(Reveal, { from: "left" }, () => "Hello");
export const list = h(Cascade, { as: "ul", interval: 120 }, () => [
  h("li", "Fast"),
  h("li", "Small"),
]);
```

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/vue/skills/adding-reveal-animations/SKILL.md