How It Works

// Typical IntersectionObserver setup
import { useEffect, useRef } from "react";

export function FadeIn({ children }) {
  const ref = useRef(null);
  useEffect(() => {
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) ref.current.classList.add("visible");
    }, { threshold: 0.3 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return <div ref={ref} className="fade-in">{children}</div>;
}

/* Native scroll-driven animation — zero JS */
.fade-in {
  animation: fade-up linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: translateY(0); }
}

// React modal with focus trap
import * as Dialog from "@radix-ui/react-dialog";

export function ConfirmModal() {
  const [open, setOpen] = useState(false);
  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Portal>
        <Dialog.Overlay className="overlay" />
        <Dialog.Content className="content">
          {/* focus trap, backdrop, escape handling, body scroll lock */}
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

<!-- Native <dialog> — focus trap, backdrop, escape: free -->
<dialog id="confirm">
  <h2>Confirm action</h2>
  <button onclick="confirm.close()">Close</button>
</dialog>

<button onclick="confirm.showModal()">Open</button>

// Floating UI tooltip with positioning
import { useFloating, autoUpdate, offset, flip } from "@floating-ui/react";

export function Tooltip({ children, text }) {
  const [open, setOpen] = useState(false);
  const { refs, floatingStyles } = useFloating({
    open, onOpenChange: setOpen,
    middleware: [offset(8), flip()],
    whileElementsMounted: autoUpdate,
  });
  // ... handlers, render, escape, dismiss
}

<!-- Popover API: hint type = auto-dismiss, escape, no JS -->
<button popovertarget="hint" popovertargetaction="show">
  Hover me
</button>
<div id="hint" popover="hint">
  Helpful information
</div>

// GSAP number counter
import { gsap } from "gsap";

export function Counter({ value }) {
  const ref = useRef(null);
  useEffect(() => {
    const obj = { n: 0 };
    gsap.to(obj, {
      n: value, duration: 1.5, ease: "power2.out",
      onUpdate: () => { ref.current.textContent = Math.round(obj.n); },
    });
  }, [value]);
  return <span ref={ref}>0</span>;
}

/* CSS @property + counter() — pure CSS interpolation */
@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.counter {
  counter-reset: num var(--num);
  animation: count 1.5s forwards;
}
.counter::before { content: counter(num); }
@keyframes count { to { --num: 95; } }