Fourteen independent React demos show text, image, border, pointer, and canvas effects. The pnpm workspace shares build tools and motion support. Each app owns its effect and page layout.
| Demo | Effect |
|---|---|
| 3D image hover | An image tilts in depth when you point at it. |
| Animated underline | A curved underline draws beneath text as the section enters view. |
| Apple text reveal | Two text blocks slide into view on opposite sides of a horizontal rule. |
| Canvas drawing | A canvas records a freehand stroke as you drag across it. |
| Word fade | Words become visible in sequence as their blur clears. |
| Pointer gradient button | A radial highlight follows the pointer inside a button. |
| Animated gradient border | A colored border rotates around a panel while its background changes opacity. |
| Overlapping images | Three overlapping images grow and tilt as their section enters view. |
| Image rotation | An image grows and rotates inside a clipped frame. |
| Letter fade | Letters move into place and become visible in sequence. |
| Text wave | Letters rise in sequence and return to the baseline. |
| Triple image hover | Three stacked images fan out at different angles. |
| Typewriter | A line appears one character at a time beside a blinking caret. |
| Gradient underline | A gradient underline follows text across one or more lines. |
The folder tripple-img-hover keeps its original spelling. Each demo README explains the mechanism and retains the source credits.
Use Node.js 24.21.0 or later and pnpm 12.14.0. The root package declares the supported versions.
Install the workspace dependencies from the repository root.
pnpm installStart one demo with its package name.
pnpm --filter @animations/text-wave devpnpm dev starts apple-animation by default. Vite prints the local URL. Each app builds into its own dist directory.
| Command | Purpose |
|---|---|
pnpm build |
Build all apps. |
pnpm typecheck |
Check TypeScript types. |
pnpm lint |
Run Oxlint. |
pnpm format |
Format files with Oxfmt. |
pnpm format:check |
Check file formatting. |
pnpm test |
Run Playwright browser tests. |
pnpm check |
Run lint, formatting, types, builds, and browser tests. |
pnpm --filter @animations/text-wave preview |
Preview a built demo. |
Install the Playwright browsers before the first browser test run.
pnpm exec playwright install chromiumCSS Modules own static styles and keyframes. Inline animation delays set each word or letter's start time. DOM refs update pointer transforms. Canvas drawing still uses JavaScript.
The migration preserves each demo's intended effect and timing. This does not establish pixel equivalence with the baseline. A visual baseline review is required for that claim. Reduced motion must keep text and images visible. Hover demos need keyboard and touch access. No performance claim follows from dependency removal alone. Browser checks must confirm the result.
Pause autoplay stops CSS keyframe sequences, including repeating effects and the typewriter caret. Hover, scroll, pointer tracking, and canvas input remain active. Restart demo resets the app and starts its sequences again.
Read the architecture explanation for ownership and alternatives. The migration plan records scope and verification work.
The demo READMEs preserve every original source link. The review could read the Scroll Animation Handbook, the web.dev border article, and several CodePen pages. Some CodePen and CodeSandbox pages could not be fetched. Their links remain credited, but their contents were not verified. The original source record retains the previous README text.
Read the code and design review, dependency decisions, verification results, and baseline comparison. The PR description is a local draft.
Run pnpm playground to build and browse all demos at http://127.0.0.1:4173. Each demo has its own preview, short description, instructions, and implementation notes. See playground and GitHub Pages setup.