# Migrating From V4

Migrates a React application from react-awesome-reveal v4 to the v5 API of...

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

## Install

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

## Description

Migrates a React application from react-awesome-reveal v4 to the v5 API of @awesome-reveal/react, with native keyframes. Use when a project uses the v4 effect components or Emotion keyframes of react-awesome-reveal.

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

# Migrate to v5

Install `@awesome-reveal/react`, or upgrade `react-awesome-reveal` to version 5. If no other code uses Emotion, remove it. The project must use React 18 or 19.

Replace each effect component with `Reveal`, and set `from` to a side or a complete start state. `Reveal` is a named export: `import { Reveal } from "@awesome-reveal/react"`. With `react-awesome-reveal` 5, you can keep the `react-awesome-reveal` import path.

`from` names the side where the element starts. The v4 `left` and `right` directions name that side too, but `up` and `down` name the movement, so `up` becomes `from="bottom"` and `down` becomes `from="top"`. For `big` or a diagonal direction, use a `from` object with `x` and `y`. For a complex effect, change the CSS animation into native keyframe objects, with an `offset` and an `easing` for each segment. The last keyframe must agree with the resting style of the element.

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

<Reveal from={{ opacity: 0 }}>Pure fade</Reveal>;
<Reveal from="left">Directional entrance</Reveal>;
<Reveal
  keyframes={[
    { opacity: 0, transform: "scale(.8)" },
    { opacity: 1, transform: "scale(1)" },
  ]}
>
  Native animation
</Reveal>;
```

The default entrance starts transparent and 24px below the resting position. It takes 600 ms and plays one time. A `from` object replaces the start state, so it gets no default fade and no offset. The package loads its CSS automatically. Two setups need a step:

- In an Astro island, import `reveal.css` from the package that you install in the page or the layout: `react-awesome-reveal/reveal.css` or `@awesome-reveal/react/reveal.css`.
- In the Next.js Pages Router with webpack, add `"@awesome-reveal/react"` to `transpilePackages`. Add it also when you install only `react-awesome-reveal`.

Check these behavior changes, because the type check does not find them:

The rest: https://github.com/awesome-reveal/awesome-reveal/blob/HEAD/packages/react-awesome-reveal/skills/migrating-from-v4/SKILL.md