React

pnpm add @sweberdev/sigmoid-react

The components are client components ("use client"), render one element and pass all other props through. They work with the App Router and Server Components as children.

Reveal

import { ease } from "@sweberdev/sigmoid";
import { Reveal } from "@sweberdev/sigmoid-react";

<Reveal as="li" preset="fade-up" range="entry 0% cover 30%" easing={ease.bouncy}>
  …
</Reveal>

preset takes a preset name or your own keyframes.

Parallax

<Parallax as="figure" distance={80}>
  <Image src={hero} alt="" />
</Parallax>

ScrollProgress

<ScrollProgress className="fixed inset-x-0 top-0 z-50 h-1 bg-black" />

Unstyled apart from the scale, aria-hidden because it is decoration. Pass source={ref} to follow a scroll container.

Hooks

const ref = useRef<HTMLDivElement>(null);
useReveal(ref, { keyframes: "blur-in" });
useParallax(ref, { distance: 40 });
useScrub(ref, [{ opacity: 1 }, { opacity: 0 }]);
const reduced = useReducedMotion();

The animation restarts only when the options change by value, not on every render.

Zero JavaScript in React

You can also use the attributes from CSS only directly: <h2 data-sigmoid="fade-up">. They work in Server Components without any client code.