Function runAnimation

package/example/src/app/components/FeaturesDemo.tsx:129–193

()

    let cancelled = false;

    const runAnimation = async () => {
      setTypedText("");
      setCursorPos({ x: 300, y: 180 });
      setShowSelection(false);
      setSelectionWidth(0);
      setShowPopup(false);
      setShowMarker(false);
      setIsTextCursor(false);
      setIsSelecting(false);

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

      const pos = wordPosRef.current;
      // Move toward the text - switch to I-beam mid-motion
      setCursorPos({ x: pos.x, y: pos.y });
      await delay(180);
      if (cancelled) return;
      setIsTextCursor(true);
      await delay(250);
      if (cancelled) return;

      setIsSelecting(true);
      setShowSelection(true);

      const endWidth = pos.width;
      const steps = 14;
      const stepSize = endWidth / steps;

      for (let i = 0; i <= steps; i++) {
        if (cancelled) return;
        const w = Math.round(i * stepSize);
        setSelectionWidth(w);
        await delay(20);
      }

      setCursorPos({ x: pos.x + endWidth, y: pos.y });
      setIsSelecting(false);
      await delay(250);
      if (cancelled) return;

      setShowPopup(true);
      await delay(300);
      if (cancelled) return;

      for (let i = 0; i <= feedbackText.length; i++) {
        if (cancelled) return;
        setTypedText(feedbackText.slice(0, i));
        await delay(30);
      }
      await delay(400);
      if (cancelled) return;

      setShowPopup(false);
      await delay(200);
      if (cancelled) return;
      setShowMarker(true);