"use client"; import { useState, useEffect, useRef, useCallback, type ReactElement } from "react"; import { useWebHaptics } from "web-haptics/react"; import { cn } from "@/utils/cn"; import { VIBRATION_DURATION_MS, TAP_FEEDBACK_DISPLAY_MS, TAP_FEEDBACK_FADE_MS, LABEL_OFFSET_BELOW_PX, ANIMATION_RESTART_DELAY_MS, SELECTION_PADDING_PX, CURSOR_OFFSET_PX, HINT_OVERLAY_DELAY_MS, IDLE_RESTART_DELAY_MS, } from "@/constants"; const wait = (ms: number): Promise => new Promise((resolve) => setTimeout(resolve, ms)); interface Position { x: number; y: number; width: number; height: number; } interface BoxState extends Position { visible: boolean; } const HIDDEN_BOX: BoxState = { visible: false, x: 0, y: 0, width: 0, height: 0, }; interface LabelState { visible: boolean; x: number; y: number; componentName: string; tagName: string; } const HIDDEN_LABEL: LabelState = { visible: false, x: 0, y: 0, componentName: "", tagName: "", }; type LabelMode = | "idle" | "selecting" | "grabbing" | "copied" | "commenting" | "submitted" | "fading"; type CursorType = "default" | "crosshair" | "grabbing"; interface HitElement { position: Position; name: string; tag: string; } const METRIC_CARD_NAMES = ["RevenueCard", "UsersCard", "OrdersCard"]; const ACTIVITY_DATA = [ { label: "New signup", time: "2m ago", component: "SignupRow" }, { label: "Order placed", time: "5m ago", component: "OrderRow" }, { label: "Payment received", time: "12m ago", component: "PaymentRow" }, ]; const createSelectionBox = (position: Position, padding: number): BoxState => ({ visible: true, x: position.x - padding, y: position.y - padding, width: position.width + padding * 2, height: position.height + padding * 2, }); const INITIAL_CURSOR_POSITION = { x: 150, y: 80 }; const getElementCenter = (position: Position): { x: number; y: number } => ({ x: position.x + position.width / 2, y: position.y + position.height / 2, }); const CheckIcon = (): ReactElement => ( ); const SubmitIcon = (): ReactElement => ( ); const LoaderIcon = (): ReactElement => ( ); const DefaultCursor = (): ReactElement => ( ); const CrosshairCursor = (): ReactElement => ( ); const GrabbingCursor = (): ReactElement => ( ); const CursorIcon = ({ type }: { type: CursorType }): ReactElement | null => { if (type === "default") return ; if (type === "crosshair") return ; if (type === "grabbing") return ; return null; }; export const MobileDemoAnimation = (): ReactElement => { const { trigger: triggerHaptic } = useWebHaptics(); const [cursorPos, setCursorPos] = useState(INITIAL_CURSOR_POSITION); const [isCursorVisible, setIsCursorVisible] = useState(false); const [selectionBox, setSelectionBox] = useState(HIDDEN_BOX); const [successFlash, setSuccessFlash] = useState(HIDDEN_BOX); const [label, setLabel] = useState(HIDDEN_LABEL); const [labelMode, setLabelMode] = useState("idle"); const [cursorType, setCursorType] = useState("default"); const [commentText, setCommentText] = useState(""); const [isHintVisible, setIsHintVisible] = useState(false); const hintTimerRef = useRef | null>(null); const containerRef = useRef(null); const metricCardRefs = useRef<(HTMLDivElement | null)[]>([]); const metricValueRef = useRef(null); const exportButtonRef = useRef(null); const activityRowRefs = useRef<(HTMLDivElement | null)[]>([]); const isCancelledRef = useRef(false); const animationLoopRef = useRef<(() => void) | null>(null); const tapTimerRef = useRef | null>(null); const tapTimerInnerRef = useRef | null>(null); const idleRestartTimerRef = useRef | null>(null); const metricCardPositions = useRef<(Position | null)[]>([]); const metricValuePosition = useRef({ x: 0, y: 0, width: 0, height: 0, }); const exportButtonPosition = useRef({ x: 0, y: 0, width: 0, height: 0, }); const activityRowPositions = useRef<(Position | null)[]>([]); const measureElementPositions = (): void => { const container = containerRef.current; if (!container) return; const containerRect = container.getBoundingClientRect(); const measureRelativePosition = ( element: HTMLElement | null, positionRef: React.MutableRefObject, ): void => { if (!element) return; const rect = element.getBoundingClientRect(); positionRef.current = { x: rect.left - containerRect.left, y: rect.top - containerRect.top, width: rect.width, height: rect.height, }; }; measureRelativePosition(metricValueRef.current, metricValuePosition); measureRelativePosition(exportButtonRef.current, exportButtonPosition); const measureRefArray = (refs: (HTMLElement | null)[]): (Position | null)[] => refs.map((ref) => { if (!ref) return null; const rect = ref.getBoundingClientRect(); return { x: rect.left - containerRect.left, y: rect.top - containerRect.top, width: rect.width, height: rect.height, }; }); metricCardPositions.current = measureRefArray(metricCardRefs.current); activityRowPositions.current = measureRefArray(activityRowRefs.current); }; useEffect(() => { const visualViewport = window.visualViewport; const measurementTimer = setTimeout(measureElementPositions, 100); window.addEventListener("resize", measureElementPositions); visualViewport?.addEventListener("resize", measureElementPositions); visualViewport?.addEventListener("scroll", measureElementPositions); return () => { clearTimeout(measurementTimer); window.removeEventListener("resize", measureElementPositions); visualViewport?.removeEventListener("resize", measureElementPositions); visualViewport?.removeEventListener("scroll", measureElementPositions); }; }, []); useEffect(() => { hintTimerRef.current = setTimeout(() => { setIsHintVisible(true); }, HINT_OVERLAY_DELAY_MS); return () => { if (hintTimerRef.current) clearTimeout(hintTimerRef.current); }; }, []); const resetAnimationState = useCallback((): void => { setCursorPos(INITIAL_CURSOR_POSITION); setIsCursorVisible(false); setCursorType("default"); setSelectionBox(HIDDEN_BOX); setSuccessFlash(HIDDEN_BOX); setLabel(HIDDEN_LABEL); setLabelMode("idle"); setCommentText(""); }, []); useEffect(() => { const displaySelectionLabel = ( x: number, y: number, componentName: string, tagName: string, ): void => { setLabel({ visible: true, x, y, componentName, tagName }); setLabelMode("selecting"); }; const fadeOutSelectionLabel = async (): Promise => { setLabelMode("fading"); await wait(300); setLabel(HIDDEN_LABEL); setLabelMode("idle"); }; const simulateClickAndCopy = async (position: Position): Promise => { setSelectionBox(HIDDEN_BOX); setLabelMode("grabbing"); setCursorType("grabbing"); setSuccessFlash(createSelectionBox(position, SELECTION_PADDING_PX)); await wait(400); if (isCancelledRef.current) return; setLabelMode("copied"); await wait(500); if (isCancelledRef.current) return; setSuccessFlash(HIDDEN_BOX); await fadeOutSelectionLabel(); setCursorType("crosshair"); }; const simulateComment = async (position: Position, comment: string): Promise => { await wait(300); if (isCancelledRef.current) return; setLabelMode("commenting"); setCommentText(""); await wait(200); if (isCancelledRef.current) return; for (let charIndex = 0; charIndex <= comment.length; charIndex++) { if (isCancelledRef.current) return; setCommentText(comment.slice(0, charIndex)); await wait(50); } await wait(300); if (isCancelledRef.current) return; setLabelMode("submitted"); setSuccessFlash(createSelectionBox(position, SELECTION_PADDING_PX)); await wait(500); if (isCancelledRef.current) return; setSuccessFlash(HIDDEN_BOX); setSelectionBox(HIDDEN_BOX); await fadeOutSelectionLabel(); setCommentText(""); }; const executeAnimationSequence = async (): Promise => { resetAnimationState(); measureElementPositions(); if (isCancelledRef.current) return; await wait(500); if (isCancelledRef.current) return; setIsCursorVisible(true); setCursorType("crosshair"); await wait(300); if (isCancelledRef.current) return; const buttonPos = exportButtonPosition.current; const buttonCenter = getElementCenter(buttonPos); setCursorPos(buttonCenter); await wait(400); if (isCancelledRef.current) return; setSelectionBox(createSelectionBox(buttonPos, SELECTION_PADDING_PX)); displaySelectionLabel( buttonCenter.x, buttonPos.y + buttonPos.height + LABEL_OFFSET_BELOW_PX, "ExportBtn", "button", ); await simulateClickAndCopy(buttonPos); if (isCancelledRef.current) return; const cardPos = metricCardPositions.current[0]; if (!cardPos) return; const cardCenter = getElementCenter(cardPos); setCursorPos(cardCenter); await wait(400); if (isCancelledRef.current) return; setSelectionBox(createSelectionBox(cardPos, SELECTION_PADDING_PX)); displaySelectionLabel( cardPos.x + cardPos.width / 2, cardPos.y + cardPos.height + LABEL_OFFSET_BELOW_PX, "MetricCard", "div", ); await simulateComment(cardPos, "show graph"); if (isCancelledRef.current) return; const valuePos = metricValuePosition.current; const valueCenter = getElementCenter(valuePos); setCursorPos(valueCenter); await wait(400); if (isCancelledRef.current) return; setSelectionBox(createSelectionBox(valuePos, SELECTION_PADDING_PX)); displaySelectionLabel( valuePos.x + valuePos.width / 2, valuePos.y + valuePos.height + LABEL_OFFSET_BELOW_PX, "StatValue", "span", ); await simulateComment(valuePos, "format as USD"); if (isCancelledRef.current) return; const signupRowPos = activityRowPositions.current[0]; if (signupRowPos) { const signupCenter = getElementCenter(signupRowPos); setCursorPos(signupCenter); await wait(400); if (isCancelledRef.current) return; setSelectionBox(createSelectionBox(signupRowPos, SELECTION_PADDING_PX)); displaySelectionLabel( signupCenter.x, signupRowPos.y + signupRowPos.height + LABEL_OFFSET_BELOW_PX, "SignupRow", "div", ); await simulateComment(signupRowPos, "add avatar"); if (isCancelledRef.current) return; } const orderRowPos = activityRowPositions.current[1]; if (orderRowPos) { const orderCenter = getElementCenter(orderRowPos); setCursorPos(orderCenter); await wait(400); if (isCancelledRef.current) return; setSelectionBox(createSelectionBox(orderRowPos, SELECTION_PADDING_PX)); displaySelectionLabel( orderCenter.x, orderRowPos.y + orderRowPos.height + LABEL_OFFSET_BELOW_PX, "OrderRow", "div", ); await wait(400); if (isCancelledRef.current) return; await simulateClickAndCopy(orderRowPos); if (isCancelledRef.current) return; } setIsCursorVisible(false); setCursorType("default"); await wait(ANIMATION_RESTART_DELAY_MS); }; const runAnimationLoop = async (): Promise => { while (!isCancelledRef.current) { await executeAnimationSequence(); } }; animationLoopRef.current = () => { isCancelledRef.current = false; runAnimationLoop(); }; const handleVisibilityChange = (): void => { if (document.visibilityState === "visible") { isCancelledRef.current = true; resetAnimationState(); isCancelledRef.current = false; runAnimationLoop(); } }; document.addEventListener("visibilitychange", handleVisibilityChange); isCancelledRef.current = false; runAnimationLoop(); return () => { isCancelledRef.current = true; if (tapTimerRef.current) clearTimeout(tapTimerRef.current); if (tapTimerInnerRef.current) clearTimeout(tapTimerInnerRef.current); if (idleRestartTimerRef.current) clearTimeout(idleRestartTimerRef.current); document.removeEventListener("visibilitychange", handleVisibilityChange); }; }, [resetAnimationState]); const handleTap = useCallback( (event: React.MouseEvent) => { const container = containerRef.current; if (!container) return; if (tapTimerRef.current) clearTimeout(tapTimerRef.current); if (tapTimerInnerRef.current) clearTimeout(tapTimerInnerRef.current); if (idleRestartTimerRef.current) clearTimeout(idleRestartTimerRef.current); isCancelledRef.current = true; triggerHaptic(VIBRATION_DURATION_MS); setIsCursorVisible(false); setIsHintVisible(false); if (hintTimerRef.current) { clearTimeout(hintTimerRef.current); hintTimerRef.current = null; } setCursorType("default"); setCommentText(""); const containerRect = container.getBoundingClientRect(); const tapX = event.clientX - containerRect.left; const tapY = event.clientY - containerRect.top; const distanceToPosition = (position: Position): number => { const clampedX = Math.max(position.x, Math.min(tapX, position.x + position.width)); const clampedY = Math.max(position.y, Math.min(tapY, position.y + position.height)); return Math.hypot(tapX - clampedX, tapY - clampedY); }; const allElements: HitElement[] = [ { position: exportButtonPosition.current, name: "ExportBtn", tag: "button", }, { position: metricValuePosition.current, name: "StatValue", tag: "span", }, ...metricCardPositions.current .map((cardPosition, index) => cardPosition ? { position: cardPosition, name: METRIC_CARD_NAMES[index], tag: "div", } : null, ) .filter((element): element is HitElement => element !== null), ...activityRowPositions.current .map((rowPosition, index) => rowPosition ? { position: rowPosition, name: ACTIVITY_DATA[index].component, tag: "div", } : null, ) .filter((element): element is HitElement => element !== null), ]; let closestElement = allElements[0]; let closestDistance = distanceToPosition(closestElement.position); const areaOf = (position: Position): number => position.width * position.height; for (let index = 1; index < allElements.length; index++) { const distance = distanceToPosition(allElements[index].position); const isSameDistance = distance === closestDistance; const isSmallerElement = isSameDistance && areaOf(allElements[index].position) < areaOf(closestElement.position); if (distance < closestDistance || isSmallerElement) { closestDistance = distance; closestElement = allElements[index]; } } const targetPosition = closestElement.position; const labelX = getElementCenter(targetPosition).x; const labelY = targetPosition.y + targetPosition.height + LABEL_OFFSET_BELOW_PX; const selectionBounds = createSelectionBox(targetPosition, SELECTION_PADDING_PX); setSelectionBox(selectionBounds); setSuccessFlash(selectionBounds); setLabel({ visible: true, x: labelX, y: labelY, componentName: closestElement.name, tagName: closestElement.tag, }); setLabelMode("copied"); tapTimerRef.current = setTimeout(() => { if (isCancelledRef.current) { setLabelMode("fading"); setSuccessFlash(HIDDEN_BOX); tapTimerInnerRef.current = setTimeout(() => { setSelectionBox(HIDDEN_BOX); setLabel(HIDDEN_LABEL); setLabelMode("idle"); idleRestartTimerRef.current = setTimeout(() => { if (animationLoopRef.current) { animationLoopRef.current(); } }, IDLE_RESTART_DELAY_MS); }, TAP_FEEDBACK_FADE_MS); } }, TAP_FEEDBACK_DISPLAY_MS); }, [triggerHaptic], ); const isLabelVisible = label.visible && labelMode !== "fading"; return (

Overview

Last 30 days

Export

{ metricCardRefs.current[0] = el; }} className="rounded-lg border border-border bg-muted/50 p-2.5" >

Revenue

$12.4k

+12.5%

{ metricCardRefs.current[1] = el; }} className="rounded-lg border border-border bg-muted/50 p-2.5" >

Users

2,847

+8.2%

{ metricCardRefs.current[2] = el; }} className="rounded-lg border border-border bg-muted/50 p-2.5" >

Orders

384

-2.1%

Recent Activity

{ACTIVITY_DATA.map((activity, activityIndex) => (

{ activityRowRefs.current[activityIndex] = el; }} className="flex items-center justify-between px-3 py-2" >

{activity.label}

{activity.time}

))}

👆 Tap any element to copy

{labelMode === "selecting" && (

{label.componentName} .{label.tagName}

)} {labelMode === "grabbing" && (

Grabbing…

)} {(labelMode === "copied" || labelMode === "submitted" || labelMode === "fading") && (

Copied

)} {labelMode === "commenting" && (

{label.componentName} .{label.tagName}

{commentText || "Add context"}

)}

This website is best viewed on desktop

); };