wmx-motion 0.2.5

package/dist/CountUp/CountUp.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "react";
+export interface CountUpProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    end: number;
+    start?: number;
+    duration?: number;
+    decimals?: number;
+    prefix?: string;
+    suffix?: string;
+    once?: boolean;
+}
+export declare function CountUp({ end, start, duration, decimals, prefix, suffix, once, className, ...rest }: CountUpProps): import("react").JSX.Element;

package/dist/CountUp/CountUp.js

@@ -0,0 +1,24 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useInView } from "../useInView.js";
+export function CountUp({ end, start = 0, duration = 1200, decimals = 0, prefix = "", suffix = "", once = true, className, ...rest }) {
+    const [ref, inView] = useInView({ threshold: 0.3, once });
+    const [value, setValue] = useState(start);
+    const frameRef = useRef(0);
+    useEffect(() => {
+        if (!inView)
+            return;
+        const startTime = performance.now();
+        const tick = (now) => {
+            const progress = Math.min((now - startTime) / duration, 1);
+            const eased = 1 - Math.pow(1 - progress, 3);
+            setValue(start + (end - start) * eased);
+            if (progress < 1) {
+                frameRef.current = requestAnimationFrame(tick);
+            }
+        };
+        frameRef.current = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(frameRef.current);
+    }, [inView, start, end, duration]);
+    return (_jsxs("span", { ref: ref, className: ["wmx-countup", className].filter(Boolean).join(" "), ...rest, children: [prefix, value.toFixed(decimals), suffix] }));
+}

package/dist/Reveal/Reveal.css

@@ -0,0 +1,44 @@
+.wmx-reveal {
+  opacity: 0;
+  transition: opacity var(--wmx-reveal-duration, 600ms) ease,
+    transform var(--wmx-reveal-duration, 600ms) cubic-bezier(0.16, 1, 0.3, 1);
+  transition-delay: var(--wmx-reveal-delay, 0ms);
+  will-change: opacity, transform;
+}
+
+.wmx-reveal--up {
+  transform: translateY(var(--wmx-reveal-distance, 24px));
+}
+
+.wmx-reveal--down {
+  transform: translateY(calc(-1 * var(--wmx-reveal-distance, 24px)));
+}
+
+.wmx-reveal--left {
+  transform: translateX(var(--wmx-reveal-distance, 24px));
+}
+
+.wmx-reveal--right {
+  transform: translateX(calc(-1 * var(--wmx-reveal-distance, 24px)));
+}
+
+.wmx-reveal--zoom {
+  transform: scale(0.94);
+}
+
+.wmx-reveal--fade {
+  transform: none;
+}
+
+.wmx-reveal--visible {
+  opacity: 1;
+  transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wmx-reveal {
+    transition: none;
+    transform: none;
+    opacity: 1;
+  }
+}

package/dist/Reveal/Reveal.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./Reveal.css";
+export type RevealDirection = "up" | "down" | "left" | "right" | "fade" | "zoom";
+export interface RevealProps extends HTMLAttributes<HTMLDivElement> {
+    direction?: RevealDirection;
+    delay?: number;
+    duration?: number;
+    distance?: number;
+    once?: boolean;
+    threshold?: number;
+    children: ReactNode;
+}
+export declare function Reveal({ direction, delay, duration, distance, once, threshold, className, style, children, ...rest }: RevealProps): import("react").JSX.Element;

package/dist/Reveal/Reveal.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useInView } from "../useInView.js";
+import "./Reveal.css";
+export function Reveal({ direction = "up", delay = 0, duration = 600, distance = 24, once = true, threshold = 0.15, className, style, children, ...rest }) {
+    const [ref, inView] = useInView({ threshold, once });
+    const classes = [
+        "wmx-reveal",
+        `wmx-reveal--${direction}`,
+        inView && "wmx-reveal--visible",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const revealStyle = {
+        ...style,
+        ["--wmx-reveal-duration"]: `${duration}ms`,
+        ["--wmx-reveal-delay"]: `${delay}ms`,
+        ["--wmx-reveal-distance"]: `${distance}px`,
+    };
+    return (_jsx("div", { ref: ref, className: classes, style: revealStyle, ...rest, children: children }));
+}

package/dist/Stagger/Stagger.css

@@ -0,0 +1,18 @@
+.wmx-stagger__item {
+  opacity: 0;
+  transform: translateY(16px);
+  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.wmx-stagger--visible .wmx-stagger__item {
+  opacity: 1;
+  transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wmx-stagger__item {
+    transition: none;
+    opacity: 1;
+    transform: none;
+  }
+}

package/dist/Stagger/Stagger.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./Stagger.css";
+export interface StaggerProps extends HTMLAttributes<HTMLDivElement> {
+    gap?: number;
+    once?: boolean;
+    threshold?: number;
+    children: ReactNode;
+}
+export declare function Stagger({ gap, once, threshold, className, children, ...rest }: StaggerProps): import("react").JSX.Element;

package/dist/Stagger/Stagger.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+import { useInView } from "../useInView.js";
+import "./Stagger.css";
+export function Stagger({ gap = 80, once = true, threshold = 0.15, className, children, ...rest }) {
+    const [ref, inView] = useInView({ threshold, once });
+    const classes = ["wmx-stagger", inView && "wmx-stagger--visible", className]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx("div", { ref: ref, className: classes, ...rest, children: Children.map(children, (child, index) => {
+            if (!isValidElement(child))
+                return child;
+            return cloneElement(child, {
+                className: ["wmx-stagger__item", child.props.className].filter(Boolean).join(" "),
+                style: {
+                    ...child.props.style,
+                    transitionDelay: inView ? `${index * gap}ms` : undefined,
+                },
+            });
+        }) }));
+}

package/dist/Transition/Transition.css

@@ -0,0 +1,45 @@
+.wmx-transition {
+  transition-property: opacity, transform;
+  transition-duration: var(--wmx-transition-duration, 200ms);
+  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.wmx-transition--fade {
+  opacity: 0;
+}
+.wmx-transition--fade.wmx-transition--entered {
+  opacity: 1;
+}
+
+.wmx-transition--scale {
+  opacity: 0;
+  transform: scale(0.95);
+}
+.wmx-transition--scale.wmx-transition--entered {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.wmx-transition--slide-up {
+  opacity: 0;
+  transform: translateY(12px);
+}
+.wmx-transition--slide-up.wmx-transition--entered {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.wmx-transition--slide-down {
+  opacity: 0;
+  transform: translateY(-12px);
+}
+.wmx-transition--slide-down.wmx-transition--entered {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wmx-transition {
+    transition: none;
+  }
+}

package/dist/Transition/Transition.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./Transition.css";
+export type TransitionType = "fade" | "scale" | "slide-up" | "slide-down";
+export interface TransitionProps extends HTMLAttributes<HTMLDivElement> {
+    show: boolean;
+    type?: TransitionType;
+    duration?: number;
+    children: ReactNode;
+}
+export declare function Transition({ show, type, duration, className, style, children, ...rest }: TransitionProps): import("react").JSX.Element | null;

package/dist/Transition/Transition.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import "./Transition.css";
+export function Transition({ show, type = "fade", duration = 200, className, style, children, ...rest }) {
+    const [mounted, setMounted] = useState(show);
+    const [entered, setEntered] = useState(show);
+    const timeoutRef = useRef(undefined);
+    useEffect(() => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        if (show) {
+            setMounted(true);
+            const raf = requestAnimationFrame(() => setEntered(true));
+            return () => cancelAnimationFrame(raf);
+        }
+        setEntered(false);
+        timeoutRef.current = setTimeout(() => setMounted(false), duration);
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [show, duration]);
+    if (!mounted)
+        return null;
+    const classes = [
+        "wmx-transition",
+        `wmx-transition--${type}`,
+        entered && "wmx-transition--entered",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const transitionStyle = {
+        ...style,
+        ["--wmx-transition-duration"]: `${duration}ms`,
+    };
+    return (_jsx("div", { className: classes, style: transitionStyle, ...rest, children: children }));
+}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { useInView } from "./useInView.js";
+export type { UseInViewOptions } from "./useInView.js";
+export { useReducedMotion } from "./useReducedMotion.js";
+export { Reveal } from "./Reveal/Reveal.js";
+export type { RevealProps, RevealDirection } from "./Reveal/Reveal.js";
+export { Stagger } from "./Stagger/Stagger.js";
+export type { StaggerProps } from "./Stagger/Stagger.js";
+export { Transition } from "./Transition/Transition.js";
+export type { TransitionProps, TransitionType } from "./Transition/Transition.js";
+export { CountUp } from "./CountUp/CountUp.js";
+export type { CountUpProps } from "./CountUp/CountUp.js";

package/dist/index.js

@@ -0,0 +1,6 @@
+export { useInView } from "./useInView.js";
+export { useReducedMotion } from "./useReducedMotion.js";
+export { Reveal } from "./Reveal/Reveal.js";
+export { Stagger } from "./Stagger/Stagger.js";
+export { Transition } from "./Transition/Transition.js";
+export { CountUp } from "./CountUp/CountUp.js";

package/dist/useInView.d.ts

@@ -0,0 +1,6 @@
+export interface UseInViewOptions {
+    threshold?: number | number[];
+    rootMargin?: string;
+    once?: boolean;
+}
+export declare function useInView<T extends Element = HTMLDivElement>({ threshold, rootMargin, once, }?: UseInViewOptions): readonly [import("react").RefObject<T>, boolean];

package/dist/useInView.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef, useState } from "react";
+export function useInView({ threshold = 0.15, rootMargin = "0px", once = true, } = {}) {
+    const ref = useRef(null);
+    const [inView, setInView] = useState(false);
+    useEffect(() => {
+        const node = ref.current;
+        if (!node)
+            return;
+        if (typeof IntersectionObserver === "undefined") {
+            setInView(true);
+            return;
+        }
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                setInView(true);
+                if (once)
+                    observer.disconnect();
+            }
+            else if (!once) {
+                setInView(false);
+            }
+        }, { threshold, rootMargin });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [threshold, rootMargin, once]);
+    return [ref, inView];
+}

package/dist/useReducedMotion.d.ts

@@ -0,0 +1 @@
+export declare function useReducedMotion(): boolean;

package/dist/useReducedMotion.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+const QUERY = "(prefers-reduced-motion: reduce)";
+export function useReducedMotion() {
+    const [reduced, setReduced] = useState(() => typeof window !== "undefined" ? window.matchMedia(QUERY).matches : false);
+    useEffect(() => {
+        const mql = window.matchMedia(QUERY);
+        const handler = () => setReduced(mql.matches);
+        mql.addEventListener("change", handler);
+        return () => mql.removeEventListener("change", handler);
+    }, []);
+    return reduced;
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "wmx-motion",
+  "version": "0.2.5",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc --project tsconfig.json && node scripts/copy-css.mjs",
+    "dev": "tsc --project tsconfig.json --watch"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "typescript": "^5.4.0"
+  },
+  "files": [
+    "dist",
+    "src",
+    "package.json"
+  ]
+}

package/src/CountUp/CountUp.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from "react";
+import type { HTMLAttributes } from "react";
+import { useInView } from "../useInView.js";
+
+export interface CountUpProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+  end: number;
+  start?: number;
+  duration?: number;
+  decimals?: number;
+  prefix?: string;
+  suffix?: string;
+  once?: boolean;
+}
+
+export function CountUp({
+  end,
+  start = 0,
+  duration = 1200,
+  decimals = 0,
+  prefix = "",
+  suffix = "",
+  once = true,
+  className,
+  ...rest
+}: CountUpProps) {
+  const [ref, inView] = useInView<HTMLSpanElement>({ threshold: 0.3, once });
+  const [value, setValue] = useState(start);
+  const frameRef = useRef(0);
+
+  useEffect(() => {
+    if (!inView) return;
+
+    const startTime = performance.now();
+
+    const tick = (now: number) => {
+      const progress = Math.min((now - startTime) / duration, 1);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      setValue(start + (end - start) * eased);
+      if (progress < 1) {
+        frameRef.current = requestAnimationFrame(tick);
+      }
+    };
+
+    frameRef.current = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frameRef.current);
+  }, [inView, start, end, duration]);
+
+  return (
+    <span ref={ref} className={["wmx-countup", className].filter(Boolean).join(" ")} {...rest}>
+      {prefix}
+      {value.toFixed(decimals)}
+      {suffix}
+    </span>
+  );
+}

package/src/Reveal/Reveal.css

@@ -0,0 +1,44 @@
+.wmx-reveal {
+  opacity: 0;
+  transition: opacity var(--wmx-reveal-duration, 600ms) ease,
+    transform var(--wmx-reveal-duration, 600ms) cubic-bezier(0.16, 1, 0.3, 1);
+  transition-delay: var(--wmx-reveal-delay, 0ms);
+  will-change: opacity, transform;
+}
+
+.wmx-reveal--up {
+  transform: translateY(var(--wmx-reveal-distance, 24px));
+}
+
+.wmx-reveal--down {
+  transform: translateY(calc(-1 * var(--wmx-reveal-distance, 24px)));
+}
+
+.wmx-reveal--left {
+  transform: translateX(var(--wmx-reveal-distance, 24px));
+}
+
+.wmx-reveal--right {
+  transform: translateX(calc(-1 * var(--wmx-reveal-distance, 24px)));
+}
+
+.wmx-reveal--zoom {
+  transform: scale(0.94);
+}
+
+.wmx-reveal--fade {
+  transform: none;
+}
+
+.wmx-reveal--visible {
+  opacity: 1;
+  transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wmx-reveal {
+    transition: none;
+    transform: none;
+    opacity: 1;
+  }
+}

package/src/Reveal/Reveal.tsx

@@ -0,0 +1,52 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { useInView } from "../useInView.js";
+import "./Reveal.css";
+
+export type RevealDirection = "up" | "down" | "left" | "right" | "fade" | "zoom";
+
+export interface RevealProps extends HTMLAttributes<HTMLDivElement> {
+  direction?: RevealDirection;
+  delay?: number;
+  duration?: number;
+  distance?: number;
+  once?: boolean;
+  threshold?: number;
+  children: ReactNode;
+}
+
+export function Reveal({
+  direction = "up",
+  delay = 0,
+  duration = 600,
+  distance = 24,
+  once = true,
+  threshold = 0.15,
+  className,
+  style,
+  children,
+  ...rest
+}: RevealProps) {
+  const [ref, inView] = useInView<HTMLDivElement>({ threshold, once });
+
+  const classes = [
+    "wmx-reveal",
+    `wmx-reveal--${direction}`,
+    inView && "wmx-reveal--visible",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const revealStyle: CSSProperties = {
+    ...style,
+    ["--wmx-reveal-duration" as string]: `${duration}ms`,
+    ["--wmx-reveal-delay" as string]: `${delay}ms`,
+    ["--wmx-reveal-distance" as string]: `${distance}px`,
+  };
+
+  return (
+    <div ref={ref} className={classes} style={revealStyle} {...rest}>
+      {children}
+    </div>
+  );
+}

package/src/Stagger/Stagger.css

@@ -0,0 +1,18 @@
+.wmx-stagger__item {
+  opacity: 0;
+  transform: translateY(16px);
+  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.wmx-stagger--visible .wmx-stagger__item {
+  opacity: 1;
+  transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wmx-stagger__item {
+    transition: none;
+    opacity: 1;
+    transform: none;
+  }
+}

package/src/Stagger/Stagger.tsx

@@ -0,0 +1,46 @@
+import { Children, cloneElement, isValidElement } from "react";
+import type { CSSProperties, HTMLAttributes, ReactElement, ReactNode } from "react";
+import { useInView } from "../useInView.js";
+import "./Stagger.css";
+
+interface StaggerChildProps {
+  className?: string;
+  style?: CSSProperties;
+}
+
+export interface StaggerProps extends HTMLAttributes<HTMLDivElement> {
+  gap?: number;
+  once?: boolean;
+  threshold?: number;
+  children: ReactNode;
+}
+
+export function Stagger({
+  gap = 80,
+  once = true,
+  threshold = 0.15,
+  className,
+  children,
+  ...rest
+}: StaggerProps) {
+  const [ref, inView] = useInView<HTMLDivElement>({ threshold, once });
+  const classes = ["wmx-stagger", inView && "wmx-stagger--visible", className]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div ref={ref} className={classes} {...rest}>
+      {Children.map(children, (child, index) => {
+        if (!isValidElement<StaggerChildProps>(child)) return child;
+
+        return cloneElement(child as ReactElement<StaggerChildProps>, {
+          className: ["wmx-stagger__item", child.props.className].filter(Boolean).join(" "),
+          style: {
+            ...child.props.style,
+            transitionDelay: inView ? `${index * gap}ms` : undefined,
+          },
+        });
+      })}
+    </div>
+  );
+}

package/src/Transition/Transition.css

@@ -0,0 +1,45 @@
+.wmx-transition {
+  transition-property: opacity, transform;
+  transition-duration: var(--wmx-transition-duration, 200ms);
+  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.wmx-transition--fade {
+  opacity: 0;
+}
+.wmx-transition--fade.wmx-transition--entered {
+  opacity: 1;
+}
+
+.wmx-transition--scale {
+  opacity: 0;
+  transform: scale(0.95);
+}
+.wmx-transition--scale.wmx-transition--entered {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.wmx-transition--slide-up {
+  opacity: 0;
+  transform: translateY(12px);
+}
+.wmx-transition--slide-up.wmx-transition--entered {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.wmx-transition--slide-down {
+  opacity: 0;
+  transform: translateY(-12px);
+}
+.wmx-transition--slide-down.wmx-transition--entered {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wmx-transition {
+    transition: none;
+  }
+}

package/src/Transition/Transition.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useRef, useState } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import "./Transition.css";
+
+export type TransitionType = "fade" | "scale" | "slide-up" | "slide-down";
+
+export interface TransitionProps extends HTMLAttributes<HTMLDivElement> {
+  show: boolean;
+  type?: TransitionType;
+  duration?: number;
+  children: ReactNode;
+}
+
+export function Transition({
+  show,
+  type = "fade",
+  duration = 200,
+  className,
+  style,
+  children,
+  ...rest
+}: TransitionProps) {
+  const [mounted, setMounted] = useState(show);
+  const [entered, setEntered] = useState(show);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  useEffect(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+
+    if (show) {
+      setMounted(true);
+      const raf = requestAnimationFrame(() => setEntered(true));
+      return () => cancelAnimationFrame(raf);
+    }
+
+    setEntered(false);
+    timeoutRef.current = setTimeout(() => setMounted(false), duration);
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [show, duration]);
+
+  if (!mounted) return null;
+
+  const classes = [
+    "wmx-transition",
+    `wmx-transition--${type}`,
+    entered && "wmx-transition--entered",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const transitionStyle: CSSProperties = {
+    ...style,
+    ["--wmx-transition-duration" as string]: `${duration}ms`,
+  };
+
+  return (
+    <div className={classes} style={transitionStyle} {...rest}>
+      {children}
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+export { useInView } from "./useInView.js";
+export type { UseInViewOptions } from "./useInView.js";
+
+export { useReducedMotion } from "./useReducedMotion.js";
+
+export { Reveal } from "./Reveal/Reveal.js";
+export type { RevealProps, RevealDirection } from "./Reveal/Reveal.js";
+
+export { Stagger } from "./Stagger/Stagger.js";
+export type { StaggerProps } from "./Stagger/Stagger.js";
+
+export { Transition } from "./Transition/Transition.js";
+export type { TransitionProps, TransitionType } from "./Transition/Transition.js";
+
+export { CountUp } from "./CountUp/CountUp.js";
+export type { CountUpProps } from "./CountUp/CountUp.js";

package/src/useInView.ts

@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from "react";
+
+export interface UseInViewOptions {
+  threshold?: number | number[];
+  rootMargin?: string;
+  once?: boolean;
+}
+
+export function useInView<T extends Element = HTMLDivElement>({
+  threshold = 0.15,
+  rootMargin = "0px",
+  once = true,
+}: UseInViewOptions = {}) {
+  const ref = useRef<T>(null);
+  const [inView, setInView] = useState(false);
+
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+
+    if (typeof IntersectionObserver === "undefined") {
+      setInView(true);
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setInView(true);
+          if (once) observer.disconnect();
+        } else if (!once) {
+          setInView(false);
+        }
+      },
+      { threshold, rootMargin }
+    );
+
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [threshold, rootMargin, once]);
+
+  return [ref, inView] as const;
+}

package/src/useReducedMotion.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+const QUERY = "(prefers-reduced-motion: reduce)";
+
+export function useReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(() =>
+    typeof window !== "undefined" ? window.matchMedia(QUERY).matches : false
+  );
+
+  useEffect(() => {
+    const mql = window.matchMedia(QUERY);
+    const handler = () => setReduced(mql.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+
+  return reduced;
+}