# parallax-fx

> Fifteen pointer and scroll effects for React that share a single requestAnimationFrame loop. No dependencies, no stylesheet to import, no provider, server rendering safe. Works with or without Tailwind, since every component styles itself inline.

Two ways to use it. Install the package and import the components, or copy a single effect into your own project with the shadcn CLI and own the code.

```bash
npm i parallax-fx
npx shadcn@latest add https://studygeorge.github.io/parallax-fx/r/tilt-3d.json
```

Every effect writes CSS custom properties as well as its transform, so you can compose your own motion on top: `--pfx-x` and `--pfx-y` in pixels for pointer effects, `--pfx-scroll` for scroll offset, `--pfx-progress` from 0 to 1 for anything that scrubs.

## Registry items

- [parallax-fx core](https://studygeorge.github.io/parallax-fx/r/pfx-core.json): The shared frame loop, the pointer store, the rect cache and the two hooks every effect leans on. Install this once and every other item drops on top of it.
- [usePointer](https://studygeorge.github.io/parallax-fx/r/use-pointer.json): The normalised pointer position, shared with every other effect on the page. One pointermove listener no matter how many components ask.
- [useMouseParallax](https://studygeorge.github.io/parallax-fx/r/use-mouse-parallax.json): Pointer driven drift on any element, without a wrapper. Hand it a ref and it writes the transform.
- [useScrollParallax](https://studygeorge.github.io/parallax-fx/r/use-scroll-parallax.json): Scroll driven offset measured from the middle of the viewport, so an element sits where you put it when it is centred.
- [ParallaxScene and ParallaxLayer](https://studygeorge.github.io/parallax-fx/r/parallax-scene.json): Layers at different depths that drift under the pointer. One scene is one frame task however many layers you put inside it.
- [Tilt3D](https://studygeorge.github.io/parallax-fx/r/tilt-3d.json): A card that tilts in 3D, with an optional highlight that moves with the pointer. Eases back to flat when the pointer leaves.
- [Magnetic](https://studygeorge.github.io/parallax-fx/r/magnetic.json): A button that leans towards the pointer as it gets close. The pull fades to nothing at the edge of the radius instead of snapping on.
- [Spotlight](https://studygeorge.github.io/parallax-fx/r/spotlight.json): A soft light that follows the pointer across a card, and the light position in CSS custom properties if you want to drive something else with it.
- [ImageTrail](https://studygeorge.github.io/parallax-fx/r/image-trail.json): A trail of pictures spawned by pointer distance rather than by time, so the density is the same however fast the pointer moves.
- [ParallaxWindow](https://studygeorge.github.io/parallax-fx/r/parallax-window.json): A photo that drifts inside a fixed frame. The travel is clamped to the overflow, so a bare edge never slides into view.
- [Cursor](https://studygeorge.github.io/parallax-fx/r/cursor.json): A ring that trails the pointer and swells over links, with a dot that sits exactly where the pointer is. Only mounts on a real pointing device.
- [ScrollParallax](https://studygeorge.github.io/parallax-fx/r/scroll-parallax.json): Anything, given a scroll speed. Negative holds an element back, positive pushes it ahead.
- [KenBurns](https://studygeorge.github.io/parallax-fx/r/ken-burns.json): A slideshow where each photo pushes in and drifts. Pan directions come from a fixed list rather than random, so the server and the client agree.
- [CurtainReveal](https://studygeorge.github.io/parallax-fx/r/curtain-reveal.json): A moving mask that uncovers an element on entry. The mask and the content move in opposite directions, which is what separates it from a fade.
- [StickyScrub](https://studygeorge.github.io/parallax-fx/r/sticky-scrub.json): A section that pins while you scroll and hands you its progress in a CSS custom property. The pinning is plain position sticky, so the browser holds it.
- [CardStack](https://studygeorge.github.io/parallax-fx/r/card-stack.json): Cards that pin one after another and settle into a stack, shrinking and dimming as they get covered. One rect read per frame for the whole stack.
- [TextReveal](https://studygeorge.github.io/parallax-fx/r/text-reveal.json): A line of text arriving word by word or letter by letter. The whole string stays in aria-label and the pieces are hidden, so screen readers hear the sentence.
- [ScrollProgress](https://studygeorge.github.io/parallax-fx/r/scroll-progress.json): A bar that fills with the page, or with one article. Follows the scrollbar rather than easing behind it.
- [Marquee](https://studygeorge.github.io/parallax-fx/r/marquee.json): An endless ticker that never touches the frame loop. One repeating Web Animations API animation the browser runs on the compositor.

## Docs

- [Live demo, every effect on real photos](https://studygeorge.github.io/parallax-fx/)
- [README with examples and the reasoning](https://github.com/studygeorge/parallax-fx/blob/main/README.md)
- [Source](https://github.com/studygeorge/parallax-fx)