Function hoverElement

package/example/src/app/components/FeaturesDemo.tsx:1671–1700

(
      element: string,
      ref: React.RefObject<HTMLElement | null>,
      preferBelow = false,
      duration: number = 1600
    )

    let cancelled = false;

    const hoverElement = async (
      element: string,
      ref: React.RefObject<HTMLElement | null>,
      preferBelow = false,
      duration: number = 1600
    ) => {
      if (cancelled) return;
      setShowLabel(false);
      setActiveElement(null);
      setActiveCaption(element);

      const pos = getElementPosition(ref, preferBelow);
      if (!pos) return;

      setCursorPos({ x: pos.cursorX, y: pos.cursorY });

      await delay(400);
      if (cancelled) return;

      setActiveElement(element);
      setLabelPos({ x: pos.labelX, y: pos.labelY, below: pos.below });
      setShowLabel(true);

      await delay(duration);
      if (cancelled) return;

      setShowLabel(false);
      setActiveElement(null);
      await delay(60);
    };

    const runAnimation = async () => {
      setCursorPos({ x: 100, y: 80 });