Beautiful scroll reveal animations for React, Vue and Astro

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

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

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

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

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

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

JavaScript

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

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

By default, the element fades in and slides up. To use another animation, 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 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.

Ready for AI coding agents

The packages ship agent skills, so Claude Code, Cursor and other agents add animations and migrate v4 code the right way.

Packages

@awesome-reveal/reactThe Reveal component and the useReveal hook for React 18 or later.

@awesome-reveal/vueThe v-reveal directive and the Reveal component for Vue 3.5 or later.

@awesome-reveal/astroThe Reveal component for Astro 6 or 7, with no client framework.

@awesome-reveal/coreThe framework-independent core, for plain JavaScript and for adapters to other frameworks.

Examples

Text animationReveal a headline word by word or letter by letter.

Staggered listReveal the items of a list or a grid one after the other.

Image revealBring an image into focus as it scrolls into view.

Alternating sectionsSlide each section in from the opposite side.

Guides

Next.jsUse Reveal in the App Router and in Server Components.

Reveal after data loadsLet your own state decide when an element reveals.

Have a question? Read the FAQ. Coming from react-awesome-reveal? Awesome Reveal is its successor. Read the migration guide.