Circle Reveal

import * as React from "react";
import { forwardRef } from "react";
import { View, type GestureResponderEvent, type LayoutChangeEvent, type ViewProps } from "react-native";
import Animated, {
  Easing,
  cancelAnimation,
  runOnJS,
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withTiming,
  type SharedValue,
} from "react-native-reanimated";
import { cn, ease, tempo, timing, useHaptic, useReducedMotion, useTheme } from "@lumioui/core";

/**
 * CircleReveal — the "next screen floods out of the control you touched"
 * transition. A solid circle of the next screen's background grows from an
 * origin (a slide thumb, a theme button, a Place order CTA) until it covers
 * the whole surface; `onCovered` is the moment to swap content underneath;
 * then the circle dims away so the new content reads as igniting.
 *
 *   const reveal = React.useRef<CircleRevealHandle>(null);
 *   <View className="flex-1">
 *     {screen === "cart" ? <Cart /> : <Confirmed />}
 *     <CircleReveal ref={reveal} color={colors.primary} onCovered={() => setScreen("confirmed")} />
 *   </View>
 *   <Button onPress={(e) => reveal.current?.reveal(e)}>Place order</Button>
 *
 * Or declaratively: `<CircleReveal active={open} origin={thumbEnd} onCovered={(open) => …} />`.
 *
 * The circle is ONE Animated.View of a fixed base diameter, grown by a
 * UI-thread transform scale to exactly the radius that reaches the farthest
 * corner from the origin (measured with onLayout) — no width/height
 * animation, no JS per frame. `children` render ABOVE the circle so a shared
 * element (the product photo) stays visible while the screen changes under
 * it; pass a function to receive `revealed` (0 → 1 on reveal, 1 → 0 on
 * conceal, in lock-step with the circle) and glide it between slots.
 * The flood is light, not paint: its leading edge carries a lit 2pt rim
 * that is brightest out of the touch and dims as the circle covers (the
 * border is counter-scaled so it stays 2pt at any size). Land the next
 * screen under a `LightFall` in the flood's hue so the light stays on it.
 * Light haptic on start, selection tick when covered. Reduced motion swaps
 * the growth for a plain colour crossfade (no rim). Expo Go compatible.
 */

export interface CircleRevealOrigin {
  /** x in the overlay's own coordinates (pt). */
  x: number;
  /** y in the overlay's own coordinates (pt). */
  y: number;
}

/** Where to grow from — local coordinates, or a press event (its
 *  pageX/pageY are converted into the overlay's coordinates). */
export type CircleRevealFrom = CircleRevealOrigin | GestureResponderEvent;

export interface CircleRevealHandle {
  /** Grow the circle (default `color`) from `from`; fires onCovered(true). */
  reveal: (from?: CircleRevealFrom, color?: string) => void;
  /** Grow back the other way (default `concealColor`); fires onCovered(false). */
  conceal: (from?: CircleRevealFrom, color?: string) => void;
  /** Convert a press event / page point into overlay coordinates. */
  toLocal: (pageX: number, pageY: number) => CircleRevealOrigin;
}

export interface CircleRevealProps extends Omit<ViewProps, "className" | "children"> {
  /** Declarative trigger: false → true reveals, true → false conceals.
   *  Optional — the imperative ref handle works without it. */
  active?: boolean;
  /** Origin in the overlay's coordinates. Default bottom-centre. */
  origin?: CircleRevealOrigin;
  /** Reveal fill — the NEXT screen's background. Default theme background. */
  color?: string;
  /** Conceal fill — the PREVIOUS screen's background. Default `color`. */
  concealColor?: string;
  /** Reveal flood in ms. Default 315 (tempo.settle). */
  duration?: number;
  /** Conceal flood in ms. Default 250 — going back runs quicker than the
   *  commit. */
  concealDuration?: number;
  /** Circle fully covers the surface — swap content now. `revealed` is
   *  true after a reveal, false after a conceal. */
  onCovered?: (revealed: boolean) => void;
  /** The circle has faded away and the transition is complete. */
  onDone?: (revealed: boolean) => void;
  /** Lit leading rim on the flood's edge. Default true. */
  rim?: boolean;
  /** Rim light colour — brighter than the fill. Default soft white. */
  rimColor?: string;
  /** Rendered above the circle (shared elements). A function receives the
   *  `revealed` shared value, 0 → 1 on reveal and 1 → 0 on conceal. */
  children?: React.ReactNode | ((revealed: SharedValue<number>) => React.ReactNode);
  className?: string;
}

/** The flood — one tempo.settle from touch to farthest corner. */
const REVEAL_MS = tempo.settle;
/** Going back is a retreat, so it runs at ~80% of the commit. */
const CONCEAL_MS = tempo.move;
/** Once covered, the circle dims away over timing.fast so the next screen's
 *  content ignites ~160ms after the flood lands. */
const SETTLE = timing.fast;
/** Two frames for React to commit the swapped content under the circle
 *  before it starts fading, so the old screen never flashes through. */
const COMMIT_FRAMES_MS = 32;
/** Base diameter of the circle view; growth is scale = needed / BASE. */
const BASE = 64;
/** Rim width in points at any scale — a hairline of light, not a stroke. */
const RIM = 2;
/** Rim light — white over the fill reads brighter on every hue. */
const RIM_COLOR = "rgba(255,255,255,0.6)";

/** The flood ignites: a fast rise out of the touch that eases as it
 *  reaches the far corner. */
const EASE_OUT = Easing.bezier(...ease.out);

type Direction = "reveal" | "conceal";

function isEvent(from: CircleRevealFrom): from is GestureResponderEvent {
  return typeof from === "object" && from !== null && "nativeEvent" in from;
}

export const CircleReveal = forwardRef<CircleRevealHandle, CircleRevealProps>(function CircleReveal(
  {
    active,
    origin,
    color,
    concealColor,
    duration = REVEAL_MS,
    concealDuration = CONCEAL_MS,
    onCovered,
    onDone,
    rim = true,
    rimColor = RIM_COLOR,
    children,
    className,
    onLayout,
    ...props
  },
  ref
) {
  const { colors } = useTheme();
  const haptic = useHaptic();
  const reduce = useReducedMotion();
  const revealColor = color ?? colors.background;
  const backColor = concealColor ?? revealColor;

  const viewRef = React.useRef<View>(null);
  const size = React.useRef({ w: 0, h: 0 });
  const offset = React.useRef({ x: 0, y: 0 });

  // UI-thread state for the circle.
  const ox = useSharedValue(0);
  const oy = useSharedValue(0);
  const target = useSharedValue(1);
  const grow = useSharedValue(0);
  const fill = useSharedValue(1);
  const tint = useSharedValue(revealColor);
  const revealed = useSharedValue(active ? 1 : 0);

  const busy = React.useRef(false);
  const latest = React.useRef({ onCovered, onDone, haptic });
  latest.current = { onCovered, onDone, haptic };

  const measure = React.useCallback(() => {
    viewRef.current?.measureInWindow?.((x, y) => {
      offset.current = { x, y };
    });
  }, []);

  const handleLayout = (e: LayoutChangeEvent) => {
    const { width, height } = e.nativeEvent.layout;
    size.current = { w: width, h: height };
    measure();
    onLayout?.(e);
  };

  const toLocal = React.useCallback(
    (pageX: number, pageY: number): CircleRevealOrigin => ({ x: pageX - offset.current.x, y: pageY - offset.current.y }),
    []
  );

  const finish = React.useCallback(
    (dir: Direction) => {
      busy.current = false;
      grow.value = 0;
      latest.current.onDone?.(dir === "reveal");
    },
    [grow]
  );

  const covered = React.useCallback(
    (dir: Direction) => {
      latest.current.haptic.selection();
      latest.current.onCovered?.(dir === "reveal");
      fill.value = withDelay(
        COMMIT_FRAMES_MS,
        withTiming(0, { ...SETTLE, easing: EASE_OUT }, (ok) => {
          if (ok) runOnJS(finish)(dir);
        })
      );
    },
    [fill, finish]
  );

  const start = React.useCallback(
    (dir: Direction, o: CircleRevealOrigin, override?: string) => {
      const { w, h } = size.current;
      // Radius to the farthest corner (+1pt so the anti-aliased edge clears it).
      const r = Math.max(Math.hypot(o.x, o.y), Math.hypot(w - o.x, o.y), Math.hypot(o.x, h - o.y), Math.hypot(w - o.x, h - o.y)) + 1;
      const config = { duration: dir === "reveal" ? duration : concealDuration, easing: EASE_OUT };
      const to = dir === "reveal" ? 1 : 0;

      cancelAnimation(grow);
      cancelAnimation(fill);
      ox.value = o.x;
      oy.value = o.y;
      target.value = (r * 2) / BASE;
      tint.value = override ?? (dir === "reveal" ? revealColor : backColor);
      latest.current.haptic.light();

      if (reduce) {
        // Colour crossfade only — a full-size layer fades in, no growth or travel.
        grow.value = 1;
        fill.value = 0;
        fill.value = withTiming(1, timing.fast, (ok) => {
          if (!ok) return;
          revealed.value = to;
          runOnJS(covered)(dir);
        });
        return;
      }
      revealed.value = withTiming(to, config);
      fill.value = 1;
      grow.value = 0;
      grow.value = withTiming(1, config, (ok) => {
        if (ok) runOnJS(covered)(dir);
      });
    },
    [duration, concealDuration, grow, fill, ox, oy, target, tint, revealColor, backColor, revealed, reduce, covered]
  );

  const run = React.useCallback(
    (dir: Direction, from?: CircleRevealFrom, override?: string) => {
      const { w, h } = size.current;
      if (busy.current || w === 0 || h === 0) return;
      busy.current = true;
      if (from != null && isEvent(from)) {
        // Re-measure first so a scrolled page can't skew the origin.
        const { pageX, pageY } = from.nativeEvent;
        const node = viewRef.current;
        if (node?.measureInWindow) {
          node.measureInWindow((x, y) => {
            offset.current = { x, y };
            start(dir, toLocal(pageX, pageY), override);
          });
        } else {
          start(dir, toLocal(pageX, pageY), override);
        }
        return;
      }
      start(dir, from ?? origin ?? { x: w / 2, y: h }, override);
    },
    [origin, start, toLocal]
  );

  React.useImperativeHandle(
    ref,
    () => ({
      reveal: (from, c) => run("reveal", from, c),
      conceal: (from, c) => run("conceal", from, c),
      toLocal,
    }),
    [run, toLocal]
  );

  // Declarative trigger — kicks the side effect when `active` flips.
  const prevActive = React.useRef(active);
  React.useEffect(() => {
    if (active === undefined || active === prevActive.current) return;
    prevActive.current = active;
    run(active ? "reveal" : "conceal");
  }, [active, run]);

  const circleStyle = useAnimatedStyle(() => ({
    left: ox.value - BASE / 2,
    top: oy.value - BASE / 2,
    opacity: grow.value === 0 ? 0 : fill.value,
    backgroundColor: tint.value,
    transform: [{ scale: grow.value * target.value }],
  }));

  // The rim rides the same transform; its border is divided by the scale so
  // it stays RIM points wide, and it dims as the flood covers.
  const rimStyle = useAnimatedStyle(() => {
    const s = Math.max(grow.value * target.value, 0.001);
    return {
      left: ox.value - BASE / 2,
      top: oy.value - BASE / 2,
      opacity: grow.value === 0 ? 0 : (1 - grow.value) * fill.value,
      borderWidth: Math.min(RIM / s, BASE / 2),
      transform: [{ scale: s }],
    };
  });

  const content = typeof children === "function" ? children(revealed) : children;

  return (
    <View
      ref={viewRef}
      pointerEvents="box-none"
      accessibilityRole="none"
      onLayout={handleLayout}
      className={cn("absolute inset-0 overflow-hidden", className)}
      {...props}
    >
      <Animated.View
        pointerEvents="none"
        importantForAccessibility="no-hide-descendants"
        accessibilityElementsHidden
        style={[{ position: "absolute", width: BASE, height: BASE, borderRadius: BASE / 2 }, circleStyle]}
      />
      {rim && !reduce ? (
        <Animated.View
          pointerEvents="none"
          importantForAccessibility="no-hide-descendants"
          accessibilityElementsHidden
          style={[{ position: "absolute", width: BASE, height: BASE, borderRadius: BASE / 2, borderColor: rimColor }, rimStyle]}
        />
      ) : null}
      {content}
    </View>
  );
});
CircleReveal.displayName = "CircleReveal";

import { CircleReveal } from "@/components/ui/circle-reveal/circle-reveal";

export function Example() {
  return (
    <CircleReveal />
  );
}