@dtour/viewer 0.1.0

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,45 @@
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+import { cn } from '../../lib/utils.ts';
+import { usePortalContainer } from '../../portal-container.tsx';
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return <TooltipPrimitive.Provider delayDuration={delayDuration} {...props} />;
+}
+
+function Tooltip(props: ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root {...props} />;
+}
+
+function TooltipTrigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 6,
+  children,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Content>) {
+  const container = usePortalContainer();
+  return (
+    <TooltipPrimitive.Portal container={container}>
+      <TooltipPrimitive.Content
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50 rounded text-dtour-bg bg-dtour-highlight px-3 py-1.5 text-xs shadow-[0_1px_4px_rgba(0,0,0,0.6)] animate-in animate-ease-out fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-dtour-highlight fill-dtour-highlight" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/hooks/useAnimatePosition.ts

@@ -0,0 +1,102 @@
+import { useSetAtom, useStore } from 'jotai';
+import { useCallback, useEffect, useRef } from 'react';
+import { animationGenAtom, tourPositionAtom } from '../state/atoms.ts';
+
+/** 360° of travel = 1000ms base animation duration */
+const MS_PER_FULL_ROTATION = 1000;
+/** Minimum animation duration to keep it perceptible */
+const MIN_ANIMATION_MS = 80;
+/** Stretch factor applied to the base duration */
+const DURATION_STRETCH = 1.5;
+
+/** Ease-in-out cubic: slow start + slow end, fast middle. */
+const easeInOutCubic = (t: number): number => (t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2);
+
+/**
+ * Shared hook for animating `tourPositionAtom` to a target value.
+ *
+ * Multiple components can call `useAnimatePosition()` independently.
+ * A generation counter (`animationGenAtom`) ensures that when any
+ * component starts a new animation or cancels, all other running
+ * animations bail out on their next rAF tick.
+ */
+export const useAnimatePosition = () => {
+  const store = useStore();
+  const setPosition = useSetAtom(tourPositionAtom);
+  const rafRef = useRef<number | null>(null);
+
+  const cancelLocal = useCallback(() => {
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+  }, []);
+
+  /** Cancel any running animation (from any component). */
+  const cancelAnimation = useCallback(() => {
+    store.set(animationGenAtom, (g) => g + 1);
+    cancelLocal();
+  }, [store, cancelLocal]);
+
+  /**
+   * Animate tour position from its current value to `target` along the
+   * shortest arc on the [0, 1) circle, using ease-in-out cubic easing.
+   */
+  const animateTo = useCallback(
+    (target: number) => {
+      cancelLocal();
+
+      // Claim a new generation — invalidates all other animations
+      const gen = store.get(animationGenAtom) + 1;
+      store.set(animationGenAtom, gen);
+
+      // Read current position imperatively via the functional updater
+      setPosition((current) => {
+        // Shortest angular distance on [0,1) circle
+        let delta = target - current;
+        if (delta > 0.5) delta -= 1;
+        if (delta < -0.5) delta += 1;
+
+        const absDelta = Math.abs(delta);
+        if (absDelta < 0.001) return target;
+
+        const startPos = current;
+        const startTime = performance.now();
+        const durationMs =
+          Math.max(MIN_ANIMATION_MS, absDelta * MS_PER_FULL_ROTATION) * DURATION_STRETCH;
+
+        const tick = (now: number) => {
+          // Bail if a newer animation or cancel has bumped the generation
+          if (store.get(animationGenAtom) !== gen) return;
+
+          const elapsed = now - startTime;
+          const t = Math.min(1, elapsed / durationMs);
+          const eased = easeInOutCubic(t);
+
+          let pos = startPos + delta * eased;
+          // Wrap to [0, 1)
+          pos = pos - Math.floor(pos);
+
+          setPosition(pos);
+
+          if (t < 1) {
+            rafRef.current = requestAnimationFrame(tick);
+          } else {
+            rafRef.current = null;
+          }
+        };
+
+        rafRef.current = requestAnimationFrame(tick);
+
+        // Return current unchanged — the rAF loop will drive updates
+        return current;
+      });
+    },
+    [store, setPosition, cancelLocal],
+  );
+
+  // Cleanup on unmount
+  useEffect(() => cancelLocal, [cancelLocal]);
+
+  return { animateTo, cancelAnimation };
+};

package/src/hooks/useGrandTour.ts

@@ -0,0 +1,176 @@
+import type { Metadata, ScatterInstance } from '@dtour/scatter';
+import { useAtomValue, useSetAtom, useStore } from 'jotai';
+import { useEffect, useRef } from 'react';
+import { gramSchmidt } from '../lib/gram-schmidt.ts';
+import {
+  activeIndicesAtom,
+  currentBasisAtom,
+  grandExitTargetAtom,
+  guidedSuspendedAtom,
+  tourSpeedAtom,
+  viewModeAtom,
+} from '../state/atoms.ts';
+
+const EASE_DURATION = 0.5; // seconds
+
+function smoothstep(t: number): number {
+  return t * t * (3 - 2 * t);
+}
+
+/**
+ * Givens-rotation grand tour for grand mode.
+ *
+ * Generates random angular velocities for active dimension pairs and
+ * applies rotations each frame via rAF. Sends basis to GPU via
+ * `setDirectBasis` — much cheaper than `setBases`.
+ *
+ * Eases in over 500ms on entry and eases out over 500ms on exit.
+ * During ease-out, `viewMode` stays 'grand' — the actual mode switch
+ * happens only after the animation decelerates to zero.
+ */
+export const useGrandTour = (
+  scatter: ScatterInstance | null,
+  viewMode: 'guided' | 'manual' | 'grand',
+  metadata: Metadata | null,
+): void => {
+  const speed = useAtomValue(tourSpeedAtom);
+  const speedRef = useRef(speed);
+  speedRef.current = speed;
+
+  const scatterRef = useRef(scatter);
+  scatterRef.current = scatter;
+
+  const activeIndices = useAtomValue(activeIndicesAtom);
+
+  // Read exit target via ref so the rAF closure always sees the latest
+  // value without restarting the effect.
+  const exitTarget = useAtomValue(grandExitTargetAtom);
+  const exitTargetRef = useRef(exitTarget);
+  exitTargetRef.current = exitTarget;
+
+  const store = useStore();
+  const setViewMode = useSetAtom(viewModeAtom);
+  const setGrandExitTarget = useSetAtom(grandExitTargetAtom);
+  const setGuidedSuspended = useSetAtom(guidedSuspendedAtom);
+
+  useEffect(() => {
+    if (viewMode !== 'grand' || !metadata || metadata.dimCount < 2 || !scatter) return;
+    if (activeIndices.length < 2) return;
+
+    const dims = metadata.dimCount;
+
+    // Build pairs only from active dimensions
+    const pairs: [number, number][] = [];
+    for (let a = 0; a < activeIndices.length; a++) {
+      for (let b = a + 1; b < activeIndices.length; b++) {
+        pairs.push([activeIndices[a]!, activeIndices[b]!]);
+      }
+    }
+    const numPairs = pairs.length;
+
+    // Generate random angular velocities for each active pair
+    const omegas = new Float32Array(numPairs);
+    for (let i = 0; i < numPairs; i++) {
+      omegas[i] = (0.5 + Math.random()) * Math.PI * (Math.random() > 0.5 ? 1 : -1);
+    }
+
+    // Initialize basis from the current projection so the view doesn't jump
+    const current = store.get(currentBasisAtom);
+    const basis = new Float32Array(dims * 2);
+    if (current && current.length === dims * 2) {
+      basis.set(current);
+    } else {
+      basis[activeIndices[0]!] = 1;
+      basis[dims + activeIndices[1]!] = 1;
+    }
+
+    // Zero out inactive dimensions and re-orthonormalize
+    const activeSet = new Set(activeIndices);
+    for (let d = 0; d < dims; d++) {
+      if (!activeSet.has(d)) {
+        basis[d] = 0;
+        basis[dims + d] = 0;
+      }
+    }
+    gramSchmidt(basis, dims);
+
+    let prevTime: number | null = null;
+    let rafId: number;
+    let easeT = 0; // 0 = stopped, 1 = full speed
+
+    const animate = (time: number) => {
+      if (prevTime === null) {
+        prevTime = time;
+        rafId = requestAnimationFrame(animate);
+        return;
+      }
+
+      const dt = Math.min((time - prevTime) * 0.001, 0.1); // seconds, clamped
+      prevTime = time;
+
+      const currentExitTarget = exitTargetRef.current;
+
+      // Advance easeT toward target
+      if (currentExitTarget === null) {
+        easeT = Math.min(1, easeT + dt / EASE_DURATION);
+      } else {
+        easeT = Math.max(0, easeT - dt / EASE_DURATION);
+      }
+
+      const easeFactor = smoothstep(easeT);
+      const currentSpeed = speedRef.current;
+
+      // Apply Givens rotations for each active dimension pair
+      for (let p = 0; p < numPairs; p++) {
+        const [i, j] = pairs[p]!;
+        const angle = omegas[p]! * dt * currentSpeed * easeFactor * 0.0375;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+
+        // Rotate basis rows i and j for both columns
+        for (let col = 0; col < 2; col++) {
+          const offset = col * dims;
+          const ai = basis[offset + i]!;
+          const aj = basis[offset + j]!;
+          basis[offset + i] = cos * ai - sin * aj;
+          basis[offset + j] = sin * ai + cos * aj;
+        }
+      }
+
+      // Givens rotations preserve orthonormality, no Gram-Schmidt needed
+      scatterRef.current?.setDirectBasis(basis.slice());
+
+      // Ease-out complete — perform the deferred mode switch
+      if (currentExitTarget !== null && easeT <= 0) {
+        cancelAnimationFrame(rafId);
+        // Store final basis so the next mode can pick up where we left off
+        store.set(currentBasisAtom, new Float32Array(basis));
+        if (currentExitTarget === 'guided') {
+          setGuidedSuspended(true);
+        }
+        setGrandExitTarget(null);
+        setViewMode(currentExitTarget);
+        return;
+      }
+
+      rafId = requestAnimationFrame(animate);
+    };
+
+    rafId = requestAnimationFrame(animate);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      // Store basis on cleanup so mode transitions always have the latest
+      store.set(currentBasisAtom, new Float32Array(basis));
+    };
+  }, [
+    viewMode,
+    metadata,
+    scatter,
+    activeIndices,
+    store,
+    setViewMode,
+    setGrandExitTarget,
+    setGuidedSuspended,
+  ]);
+};

package/src/hooks/useLongPressIndicator.ts

@@ -0,0 +1,342 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+// --- Constants (from regl-scatterplot) ---
+const LONG_PRESS_TIME = 750;
+const LONG_PRESS_AFTER_EFFECT_TIME = 500;
+const LONG_PRESS_EFFECT_DELAY = 100;
+const LONG_PRESS_REVERT_EFFECT_TIME = 250;
+
+const INDICATOR_COLOR = '#4f8ff7';
+const INDICATOR_ACTIVE_COLOR = '#4f8ff7';
+
+// --- getComputedStyle helpers ---
+const getCurrentTransform = (node: HTMLElement, hasRotated = false) => {
+  const cs = getComputedStyle(node);
+  const opacity = +cs.opacity;
+  const m = cs.transform.match(/([0-9.-]+)+/g);
+
+  if (!m) return { opacity, scale: 0, rotate: 0 };
+
+  const a = +m[0]!;
+  const b = +m[1]!;
+  const scale = Math.sqrt(a * a + b * b);
+  let rotate = Math.atan2(b, a) * (180 / Math.PI);
+  if (hasRotated && rotate <= 0) rotate = 360 + rotate;
+
+  return { opacity, scale, rotate };
+};
+
+// --- DOM element creation (from create-long-press-elements.js) ---
+const createElements = () => {
+  const root = document.createElement('div');
+  root.style.position = 'fixed';
+  root.style.width = '1.25rem';
+  root.style.height = '1.25rem';
+  root.style.pointerEvents = 'none';
+  root.style.transform = 'translate(-50%,-50%)';
+  root.style.zIndex = '100';
+
+  const circle = document.createElement('div');
+  circle.style.position = 'absolute';
+  circle.style.top = '0';
+  circle.style.left = '0';
+  circle.style.width = '1.25rem';
+  circle.style.height = '1.25rem';
+  circle.style.clipPath = 'inset(0px 0px 0px 50%)';
+  circle.style.opacity = '0';
+  root.appendChild(circle);
+
+  const circleLeft = document.createElement('div');
+  circleLeft.style.boxSizing = 'content-box';
+  circleLeft.style.position = 'absolute';
+  circleLeft.style.top = '0';
+  circleLeft.style.left = '0';
+  circleLeft.style.width = '0.8rem';
+  circleLeft.style.height = '0.8rem';
+  circleLeft.style.border = '0.2rem solid currentcolor';
+  circleLeft.style.borderRadius = '0.8rem';
+  circleLeft.style.clipPath = 'inset(0px 50% 0px 0px)';
+  circleLeft.style.transform = 'rotate(0deg)';
+  circle.appendChild(circleLeft);
+
+  const circleRight = document.createElement('div');
+  circleRight.style.boxSizing = 'content-box';
+  circleRight.style.position = 'absolute';
+  circleRight.style.top = '0';
+  circleRight.style.left = '0';
+  circleRight.style.width = '0.8rem';
+  circleRight.style.height = '0.8rem';
+  circleRight.style.border = '0.2rem solid currentcolor';
+  circleRight.style.borderRadius = '0.8rem';
+  circleRight.style.clipPath = 'inset(0px 50% 0px 0px)';
+  circleRight.style.transform = 'rotate(0deg)';
+  circle.appendChild(circleRight);
+
+  const effect = document.createElement('div');
+  effect.style.position = 'absolute';
+  effect.style.top = '0';
+  effect.style.left = '0';
+  effect.style.width = '1.25rem';
+  effect.style.height = '1.25rem';
+  effect.style.borderRadius = '1.25rem';
+  effect.style.background = 'currentcolor';
+  effect.style.transform = 'scale(0)';
+  effect.style.opacity = '0';
+  root.appendChild(effect);
+
+  return { root, circle, circleLeft, circleRight, effect };
+};
+
+// --- The hook ---
+export const useLongPressIndicator = () => {
+  const elementsRef = useRef<ReturnType<typeof createElements> | null>(null);
+  const animationsRef = useRef<Animation[]>([]);
+  const isStarting = useRef(false);
+
+  // Create / destroy DOM elements
+  useEffect(() => {
+    const created = createElements();
+    created.root.style.color = INDICATOR_COLOR;
+    elementsRef.current = created;
+
+    // Always append to document.body so `position: fixed` is relative to
+    // the viewport — a transformed ancestor would break fixed positioning.
+    document.body.appendChild(created.root);
+
+    return () => {
+      for (const a of animationsRef.current) a.cancel();
+      animationsRef.current = [];
+      created.root.remove();
+      elementsRef.current = null;
+    };
+  }, []);
+
+  const show = useCallback((x: number, y: number) => {
+    const el = elementsRef.current;
+    if (!el) return;
+
+    isStarting.current = true;
+
+    // Capture current animated state before canceling
+    const mainColor = getComputedStyle(el.root).color || 'currentcolor';
+    const circleCs = getComputedStyle(el.circle);
+    const circleClipPath = circleCs.clipPath || 'inset(0 0 0 50%)';
+    const circleOpacity = Number(circleCs.opacity) || 0;
+    const effectState = getCurrentTransform(el.effect);
+    const leftState = getCurrentTransform(el.circleLeft);
+    const rightState = getCurrentTransform(el.circleRight);
+
+    // Cancel running animations, then set inline styles so state persists
+    for (const a of animationsRef.current) a.cancel();
+
+    el.root.style.color = INDICATOR_COLOR;
+    el.root.style.top = `${y}px`;
+    el.root.style.left = `${x}px`;
+    el.circle.style.clipPath = circleClipPath;
+    el.circle.style.opacity = String(circleOpacity);
+    el.effect.style.opacity = String(effectState.opacity);
+    el.effect.style.transform = `scale(${effectState.scale})`;
+    el.circleLeft.style.transform = `rotate(${leftState.rotate}deg)`;
+    el.circleRight.style.transform = `rotate(${rightState.rotate}deg)`;
+
+    // Compute timing based on how far the previous animation progressed
+    const progress = leftState.rotate / 360;
+    const duration = (1 - progress) * LONG_PRESS_TIME + LONG_PRESS_AFTER_EFFECT_TIME;
+    const lp = ((1 - progress) * LONG_PRESS_TIME) / duration;
+    const half = lp / 2;
+    const afterEffect = lp + (1 - lp) / 4;
+    const opts = { duration, delay: LONG_PRESS_EFFECT_DELAY, fill: 'forwards' as const };
+    // CSS animation-timing-function applies per-segment; in Web Animations API
+    // that maps to per-keyframe easing (not the effect-level easing option).
+    const eo = 'ease-out';
+
+    const anims: Animation[] = [];
+
+    // Root: color + opacity
+    anims.push(
+      el.root.animate(
+        [
+          { color: mainColor, opacity: 1, offset: 0, easing: eo },
+          { color: mainColor, opacity: 1, offset: lp, easing: eo },
+          { color: INDICATOR_ACTIVE_COLOR, opacity: 0.8, offset: 1 },
+        ],
+        opts,
+      ),
+    );
+
+    // Effect circle: scale + fade
+    anims.push(
+      el.effect.animate(
+        [
+          {
+            opacity: effectState.opacity,
+            transform: `scale(${effectState.scale})`,
+            offset: 0,
+            easing: eo,
+          },
+          {
+            opacity: effectState.opacity,
+            transform: `scale(${effectState.scale})`,
+            offset: lp,
+            easing: eo,
+          },
+          { opacity: 0.66, transform: 'scale(1.5)', offset: afterEffect, easing: eo },
+          { opacity: 0, transform: 'scale(2)', offset: 0.99, easing: eo },
+          { opacity: 0, transform: 'scale(0)', offset: 1 },
+        ],
+        opts,
+      ),
+    );
+
+    // Circle left half: rotation
+    anims.push(
+      el.circleLeft.animate(
+        [
+          { transform: `rotate(${leftState.rotate}deg)`, offset: 0 },
+          { transform: 'rotate(360deg)', offset: lp },
+          { transform: 'rotate(360deg)', offset: 1 },
+        ],
+        opts,
+      ),
+    );
+
+    // Circle right half: rotation
+    anims.push(
+      el.circleRight.animate(
+        [
+          { transform: `rotate(${rightState.rotate}deg)`, offset: 0 },
+          { transform: 'rotate(180deg)', offset: half },
+          { transform: 'rotate(180deg)', offset: 1 },
+        ],
+        opts,
+      ),
+    );
+
+    // Circle container: clip-path reveal
+    anims.push(
+      el.circle.animate(
+        [
+          { clipPath: circleClipPath, opacity: circleOpacity, offset: 0 },
+          { clipPath: circleClipPath, opacity: 1, offset: half },
+          { clipPath: 'inset(0)', opacity: 1, offset: half + 0.0001 },
+          { clipPath: 'inset(0)', opacity: 1, offset: 1 },
+        ],
+        opts,
+      ),
+    );
+
+    animationsRef.current = anims;
+  }, []);
+
+  const hide = useCallback(() => {
+    const el = elementsRef.current;
+    if (!el || !isStarting.current) return;
+
+    isStarting.current = false;
+
+    // Capture current animated state before canceling
+    const mainColor = getComputedStyle(el.root).color || 'currentcolor';
+    const circleCs = getComputedStyle(el.circle);
+    const circleClipPath = circleCs.clipPath || 'inset(0px)';
+    const circleOpacity = Number(circleCs.opacity) || 1;
+    const effectState = getCurrentTransform(el.effect);
+
+    // Detect if past the 50% mark of the circle animation
+    const pastHalf = circleCs.clipPath.slice(-2, -1) === 'x';
+
+    const leftState = getCurrentTransform(el.circleLeft, pastHalf);
+    const rightState = getCurrentTransform(el.circleRight);
+
+    // Cancel running animations, then set inline styles so state persists
+    for (const a of animationsRef.current) a.cancel();
+
+    el.root.style.color = mainColor;
+    el.circle.style.clipPath = circleClipPath;
+    el.circle.style.opacity = String(circleOpacity);
+    el.effect.style.opacity = String(effectState.opacity);
+    el.effect.style.transform = `scale(${effectState.scale})`;
+    el.circleLeft.style.transform = `rotate(${leftState.rotate}deg)`;
+    el.circleRight.style.transform = `rotate(${rightState.rotate}deg)`;
+
+    // Compute timing
+    const progress = leftState.rotate / 360;
+    const duration = progress * LONG_PRESS_REVERT_EFFECT_TIME;
+
+    if (duration < 1) {
+      animationsRef.current = [];
+      return;
+    }
+
+    const rotated = Math.min(1, progress);
+    const half = rotated > 0.5 ? 1 - 0.5 / rotated : 0;
+    const opts = { duration, fill: 'forwards' as const };
+
+    const anims: Animation[] = [];
+
+    // Root: color revert
+    anims.push(el.root.animate([{ color: mainColor }, { color: INDICATOR_COLOR }], opts));
+
+    // Effect: fade out
+    anims.push(
+      el.effect.animate(
+        [
+          { opacity: effectState.opacity, transform: `scale(${effectState.scale})`, offset: 0 },
+          { opacity: 0, transform: `scale(${effectState.scale + 0.5})`, offset: 0.99 },
+          { opacity: 0, transform: 'scale(0)', offset: 1 },
+        ],
+        opts,
+      ),
+    );
+
+    // Circle left: uses circleRight's rotation (intentionally swapped, matches regl-scatterplot)
+    anims.push(
+      el.circleLeft.animate(
+        half > 0
+          ? [
+              { transform: `rotate(${rightState.rotate}deg)`, offset: 0 },
+              { transform: `rotate(${rightState.rotate}deg)`, offset: half },
+              { transform: 'rotate(0deg)', offset: 1 },
+            ]
+          : [
+              { transform: `rotate(${rightState.rotate}deg)`, offset: 0 },
+              { transform: 'rotate(0deg)', offset: 1 },
+            ],
+        opts,
+      ),
+    );
+
+    // Circle right: uses circleLeft's rotation (intentionally swapped)
+    anims.push(
+      el.circleRight.animate(
+        [
+          { transform: `rotate(${leftState.rotate}deg)`, offset: 0 },
+          { transform: 'rotate(0deg)', offset: 1 },
+        ],
+        opts,
+      ),
+    );
+
+    // Circle container: clip-path hide
+    anims.push(
+      el.circle.animate(
+        half > 0
+          ? [
+              { clipPath: circleClipPath, opacity: circleOpacity, offset: 0 },
+              { clipPath: circleClipPath, opacity: circleOpacity, offset: half },
+              { clipPath: 'inset(0 0 0 50%)', opacity: circleOpacity, offset: half + 0.0001 },
+              { clipPath: 'inset(0 0 0 50%)', opacity: 0, offset: 1 },
+            ]
+          : [
+              { clipPath: circleClipPath, opacity: circleOpacity, offset: 0 },
+              { clipPath: 'inset(0 0 0 50%)', opacity: circleOpacity, offset: 0.0001 },
+              { clipPath: 'inset(0 0 0 50%)', opacity: 0, offset: 1 },
+            ],
+        opts,
+      ),
+    );
+
+    animationsRef.current = anims;
+  }, []);
+
+  return { show, hide };
+};