Compare Slider

"use client";

// Two layers stacked in one frame; the top one is cut at the handle, so
// dragging it wipes between them. Press anywhere to glide there, drag to
// scrub, or focus the handle and use the arrow keys. On first view it sweeps
// in from one side to show what it does. Each label fades as the handle covers
// its side, so it never sits on top of the wrong layer.
//
// Everything moves with transforms only (no clip-path, no left/top), and the
// position never goes through React state, so dragging stays on the compositor.

import {
  animate,
  motion,
  useInView,
  useMotionValue,
  useMotionValueEvent,
  useReducedMotion,
  useSpring,
  useTransform,
  type AnimationPlaybackControls,
  type MotionValue,
} from "motion/react";
import { useEffect, useRef, useState, type KeyboardEvent, type PointerEvent, type ReactNode } from "react";