ClipSpacesClipSpaces Docs
Back to app

All releases

AI space-scan animation

Replaced the tiny "Scanning your space…" dots indicator with a full-screen particle scan that sweeps through the canvas's own dot grid whenever Ask AI is opened and the space is being briefed — as if the AI is reading the space.

Added

  • components/ClipSpacesScanAnimation.tsx — transparent, pointer-events-none overlay (fixed inset-0) over the live canvas. A <canvas> driven by gsap.ticker sweeps a sine-warped liquid wave top-to-bottom; as it passes, the dots it crosses light up (soft glow + size overshoot at the front) and stay lit behind it. The overlay grid is aligned to the live canvas pan/zoom (snapshotted at scan start) so the glowing dots sit exactly on the real @xyflow/react background dots (gap=22). Glow color is read from the theme --accent. The sweep is one looping gsap.timeline() inside useGSAP (auto-cleanup). No face landmarks / reticle / readout — pure dots.
  • Dependencies — added gsap and @gsap/react.

Changed

  • components/Canvas.tsx — CanvasHandle now exposes getViewport() (current pan/zoom) so the scan overlay can align to the real grid.
  • components/AIPanel.tsx — the opening briefing drives the scan overlay (showScan) instead of the inline Thinking text, snapshotting the viewport via the new getViewport prop. The overlay holds for at least MIN_SCAN_MS (2.6s) so a fast model response doesn't cut it off, then fades out to reveal the briefing. Torn down immediately if the panel is closed mid-scan.
  • app/page.tsx — passes getViewport into <AIPanel>.