react-awesome-reveal 5.0.0-next.8 → 5.0.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +37 -3
  2. package/dist/reveal.css +29 -0
  3. package/dist/reveal.css.d.ts +1 -0
  4. package/package.json +18 -5
  5. package/skills/migrating-from-v4/SKILL.md +12 -5
package/README.md CHANGED
@@ -1,11 +1,45 @@
1
1
  # react-awesome-reveal
2
2
 
3
- Version 5 of `react-awesome-reveal` re-exports `@awesome-reveal/react`. It gives `Reveal`, `Cascade`, `useReveal`, `useCascade` and their types, and it loads its stylesheet automatically.
3
+ Reveal-on-scroll animations for React. Version 5 re-exports [`@awesome-reveal/react`](https://www.npmjs.com/package/@awesome-reveal/react), so v4 users can upgrade with no new package name.
4
+
5
+ [![npm version](https://badgen.net/npm/v/react-awesome-reveal)](https://www.npmjs.com/package/react-awesome-reveal)
6
+ [![License](https://badgen.net/npm/license/react-awesome-reveal)](https://github.com/awesome-reveal/awesome-reveal/blob/next/LICENSE)
7
+
8
+ > **Release candidate:** Version 5 is a release candidate. The API is frozen, so only fixes go in before the stable release. Tell us what works and what does not in [GitHub Discussions](https://github.com/awesome-reveal/awesome-reveal/discussions).
9
+
10
+ ## Install
11
+
12
+ ```sh
13
+ npm install react-awesome-reveal@next
14
+ ```
15
+
16
+ For a new project, install `@awesome-reveal/react` instead. The two packages give the same API.
17
+
18
+ ## Quick start
4
19
 
5
20
  ```tsx
6
21
  import { Reveal } from "react-awesome-reveal";
7
22
 
8
- <Reveal from="left">Hello</Reveal>;
23
+ export const Hero = () => (
24
+ <Reveal from="left">
25
+ <h1>Hello</h1>
26
+ </Reveal>
27
+ );
9
28
  ```
10
29
 
11
- For the API and the migration from version 4, read the [React documentation](https://www.npmjs.com/package/@awesome-reveal/react). The package includes the `migrating-from-v4` agent skill. The license is MIT.
30
+ The package gives `Reveal`, `Cascade`, `useReveal`, `useCascade` and their types. Read the [`@awesome-reveal/react` README](https://www.npmjs.com/package/@awesome-reveal/react) for the full API and the steps to migrate from v4. Version 5 changes the API on purpose, so v4 code needs these steps.
31
+
32
+ ## Stylesheet setup
33
+
34
+ The package loads its stylesheet automatically. Two setups need a step:
35
+
36
+ - **Astro island.** Import `react-awesome-reveal/reveal.css` in the page or in the layout that renders the island.
37
+ - **Next.js Pages Router with webpack.** Add `@awesome-reveal/react` to `transpilePackages` in the Next.js config. That package imports the stylesheet.
38
+
39
+ ## Agent skills
40
+
41
+ The package includes the `migrating-from-v4` skill, which helps a coding agent migrate your code. pnpm can link it into your project after you approve it.
42
+
43
+ ## License
44
+
45
+ [MIT](https://github.com/awesome-reveal/awesome-reveal/blob/next/LICENSE)
package/dist/reveal.css ADDED
@@ -0,0 +1,29 @@
1
+ /* The hold ends, so markup that no script attaches shows again. */
2
+ @media screen and (prefers-reduced-motion: no-preference) {
3
+ [data-awesome-reveal="hidden"],
4
+ [data-awesome-reveal="cascade"] > * {
5
+ animation: awesome-reveal-hold 5s !important;
6
+ }
7
+ /* A new duration keeps the start time, so a blur does not restart the hold. */
8
+ [data-awesome-reveal="hidden"]:focus-within,
9
+ [data-awesome-reveal="cascade"]:focus-within > * {
10
+ animation-duration: 0s !important;
11
+ }
12
+ [data-awesome-reveal="hidden"][data-awesome-reveal-attached],
13
+ [data-awesome-reveal="cascade"][data-awesome-reveal-attached] > * {
14
+ opacity: 0 !important;
15
+ }
16
+ }
17
+ /* A separate query, so browsers without the `scripting` feature still hide. */
18
+ @media (scripting: none) {
19
+ [data-awesome-reveal="hidden"],
20
+ [data-awesome-reveal="cascade"] > * {
21
+ animation: none !important;
22
+ }
23
+ }
24
+ @keyframes awesome-reveal-hold {
25
+ from,
26
+ to {
27
+ opacity: 0;
28
+ }
29
+ }
package/dist/reveal.css.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-awesome-reveal",
3
- "version": "5.0.0-next.8",
3
+ "version": "5.0.0-rc.0",
4
4
  "description": "Reveal-on-scroll animations for React. This package re-exports @awesome-reveal/react.",
5
5
  "keywords": [
6
6
  "animate-on-scroll",
@@ -47,24 +47,37 @@
47
47
  "skills"
48
48
  ],
49
49
  "type": "module",
50
- "sideEffects": false,
50
+ "sideEffects": [
51
+ "*.css"
52
+ ],
51
53
  "types": "dist/index.d.ts",
54
+ "typesVersions": {
55
+ "*": {
56
+ "reveal.css": [
57
+ "dist/reveal.css.d.ts"
58
+ ]
59
+ }
60
+ },
52
61
  "exports": {
53
62
  ".": {
54
63
  "types": "./dist/index.d.ts",
55
64
  "default": "./dist/index.js"
56
65
  },
66
+ "./reveal.css": {
67
+ "types": "./dist/reveal.css.d.ts",
68
+ "default": "./dist/reveal.css"
69
+ },
57
70
  "./package.json": "./package.json"
58
71
  },
59
72
  "publishConfig": {
60
73
  "access": "public"
61
74
  },
62
75
  "dependencies": {
63
- "@awesome-reveal/react": "^1.0.0-next.8"
76
+ "@awesome-reveal/react": "^1.0.0-rc.0"
64
77
  },
65
78
  "devDependencies": {
66
79
  "@types/react": "^19.3.0",
67
- "react": "^19.3.0"
80
+ "react": "^19.3.1"
68
81
  },
69
82
  "peerDependencies": {
70
83
  "react": "^18.0.0 || ^19.0.0"
@@ -74,6 +87,6 @@
74
87
  },
75
88
  "scripts": {
76
89
  "build": "tsc --noEmit && vite build",
77
- "check:package": "tsc -p test/package && publint --strict && attw --pack . --profile esm-only"
90
+ "check:package": "tsc -p test/package && publint --strict && attw --pack . --ignore-rules cjs-resolves-to-esm"
78
91
  }
79
92
  }
package/skills/migrating-from-v4/SKILL.md CHANGED
@@ -9,7 +9,7 @@ compatibility: Requires @awesome-reveal/react and React 18 or 19.
9
9
 
10
10
  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.
11
11
 
12
- 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"`.
12
+ 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.
13
13
 
14
14
  `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.
15
15
 
@@ -28,15 +28,22 @@ import { Reveal } from "@awesome-reveal/react";
28
28
  </Reveal>;
29
29
  ```
30
30
 
31
- 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.
31
+ 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:
32
+
33
+ - 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`.
34
+ - In the Next.js Pages Router with webpack, add `"@awesome-reveal/react"` to `transpilePackages`. Add it also when you install only `react-awesome-reveal`.
32
35
 
33
36
  Check these behavior changes, because the type check does not find them:
34
37
 
35
- - A v4 `<Reveal>` with no `keyframes` slid in from the left by 100%. Now it moves up 24px. For the v4 motion, use `from={{ opacity: 0, x: "-100%" }}`.
38
+ - A v4 `<Reveal>` with no `keyframes` faded in from 100% of its width to the left. Now it fades in and moves up 24px. For the v4 motion, use `from={{ opacity: 0, x: "-100%" }}`.
36
39
  - The v4 duration was 1000 ms. Set `duration={1000}` to keep it. The easing is fixed. To change it, use native keyframes.
37
40
  - `Reveal` renders one element around its children, and `as` sets its tag. v4 wrapped each element child in a `div`, and animated each `li` of a list child. `className` and `style` now apply to the one element. Style the children directly instead of `childClassName` and `childStyle`.
38
41
  - One observer watches the whole `Reveal`, so all the children reveal together.
39
42
 
40
- For a long list, use one reveal for each item. Replace the v4 `cascade` prop with the `Cascade` component, which animates its direct element children in sequence. For a v4 cascade around a list, render the list with `Cascade`, for example `<Cascade as="ul">`. Set `interval` to the v4 `duration * damping`, in milliseconds. `Cascade` does not split text. If you need text spans, write them yourself. Do not make screen readers read the same text two times.
43
+ For a long list, use one reveal for each item. Replace the v4 `cascade` prop with the `Cascade` component, which animates its direct element children in sequence. For a v4 cascade around a list, render the list with `Cascade`, for example `<Cascade as="ul">`. Set `interval` to the v4 `duration * damping`, in milliseconds.
44
+
45
+ `Cascade` does not split text. If you need text spans, write them yourself. Do not make screen readers read the same text two times.
46
+
47
+ Replace `fraction` with `threshold`, and use `when` for manual control. Replace `onVisibilityChange` with `onReveal`, which gets the element one time for each reveal. Keep `delay`. It is in milliseconds, and in a cascade it moves the start of the whole sequence. The exit animations (`reverse`) have no replacement.
41
48
 
42
- Replace `fraction` with `threshold`, and use `when` for manual control. Replace `onVisibilityChange` with `onReveal`, which runs one time for each reveal. Keep `delay`. It is in milliseconds, and in a cascade it moves the start of the whole sequence. The exit animations (`reverse`) have no replacement. Remove `triggerOnce`. In v4 the entrance played each time by default, but now it plays one time. To play it again, set `when` to `false`, then to `true`. Use `useReveal` for an element that you render. After the migration, check the refs, hydration, reduced motion and the teardown.
49
+ Remove `triggerOnce`. In v4 the entrance played each time by default, but now it plays one time. To play it again, set `when` to `false`, then to `true`. Use `useReveal` for an element that you render. After the migration, check the refs, hydration, reduced motion and the teardown.