# Beautiful scroll reveal animations for React, Vue and Astro

> Make content fade, slide and pop in as it scrolls into view. About 2 kB, zero dependencies, and built on native browser APIs that work in every major browser.

- [Get started](/getting-started/)
- [View on GitHub](https://github.com/awesome-reveal/awesome-reveal)
- [Migrate from v4](/migrate-from-v4/)

## Reveal anything in a few lines of code

Wrap an element in `Reveal`, put `v-reveal` on it, or call `reveal()`. It animates as soon as it scrolls into view, with no CSS to write for the animation and no layout shift.

* React

  ```jsx
  import { Reveal } from "@awesome-reveal/react";

  <Reveal>
    <p>I gently appear as I enter the viewport</p>
  </Reveal>;
  ```

* Vue

  ```vue
  <script setup>
  import { vReveal } from "@awesome-reveal/vue";
  </script>

  <template>
    <p v-reveal>I gently appear as I enter the viewport</p>
  </template>
  ```

* Astro

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

  <Reveal>
    <p>I gently appear as I enter the viewport</p>
  </Reveal>
  ```

* JavaScript

  ```js
  import { reveal } from "@awesome-reveal/core";

  reveal(document.querySelector("#intro"));
  ```

By default, the element fades in and slides up. To use [another animation](/concepts/keyframes/), set one option.

## See it in action

Each tile uses a built-in animation. The caption shows the call that creates its keyframes.

`fade()`

`slide()`

`scale()`

`blur()`

`pop()`

`enter({ x: -40, rotate: -10 })`

## Why Awesome Reveal

Tiny and dependency-free

About 2 kB gzipped for `Reveal` with one animation, with zero third-party dependencies. Tree-shaking keeps only the animations that you import.

Smooth, native performance

Intersection Observer detects the reveal, with no scroll listeners. The Web Animations API runs it on the compositor where possible.

Works in every major browser

Built on [Baseline Widely available](/concepts/browser-support/) web APIs that Chrome, Edge, Firefox and Safari have supported for years.

Accessible by default

Respects `prefers-reduced-motion` out of the box. Hidden content stays in the accessibility tree and in find-in-page.

Server rendering with no flash

React, Vue and Astro render content hidden on the server, so it never flashes before the animation. Create keyframes in React Server Components or in the Astro frontmatter.

Built for TypeScript

Strict types for every option, element and keyframe, with full autocomplete in your editor.

Custom animations

Six built-in animations, spring easing, and custom keyframes from any function of time. See [Keyframes](/concepts/keyframes/).

Ready for AI coding agents

The packages ship [agent skills](/agent-skills/), so Claude Code, Cursor and other agents add animations and migrate v4 code the right way.

## Packages

[@awesome-reveal/react](/react/): The Reveal component and the useReveal hook for React 18 or later.

[@awesome-reveal/vue](/vue/): The v-reveal directive and the Reveal component for Vue 3.5 or later.

[@awesome-reveal/astro](/astro/): The Reveal component for Astro 6 or 7, with no client framework.

[@awesome-reveal/core](/core/): The framework-independent core, for plain JavaScript and for adapters to other frameworks.

## Examples

[Text animation](/examples/text-animation/): Reveal a headline word by word or letter by letter.

[Staggered list](/examples/staggered-list/): Reveal the items of a list or a grid one after the other.

[Image reveal](/examples/image-reveal/): Bring an image into focus as it scrolls into view.

[Alternating sections](/examples/alternating-sections/): Slide each section in from the opposite side.

## Guides

[Next.js](/nextjs/): Use Reveal in the App Router and in Server Components.

[Reveal after data loads](/reveal-on-data/): Let your own state decide when an element reveals.

Have a question? Read the [FAQ](/faq/). Coming from `react-awesome-reveal`? Awesome Reveal is its successor. Read the [migration guide](/migrate-from-v4/).