$ show dai-shi/excalidraw-animate
This is a React-based single-page application that converts Excalidraw drawings into animated SVGs. It provides both an editing mode (using the Excalidraw library) where users can configure animation order and duration per element, and an animate mode where the resulting SVG is rendered with playback controls (play/pause/step/reset). The core animation logic is implemented using SMIL (SVG animations), patching SVG elements with `animate`, `animateMotion`, and `textPath` elements. Users can load drawings from files, libraries, or shareable URLs. The app also exports to SVG and WebM (via screen capture). It is published as an npm package for programmatic use, exposing `animateSvg`, `getBeginTimeList`, and export utilities. The codebase is modern (React 19, TypeScript, Vite) and includes comprehensive testing with Playwright. Architecturally, it operates as a client-side SPA with two views (edit and animate) and a toolbar for loading/playback/export.
The LLM identified 2 files worth highlighting for reuse:
Core module that patches SVG elements with SMIL animations (animate, animateMotion) based on Excalidraw element types (line, arrow, rectangle, ellipse, text, freedraw, image). Handles grouped elements, animation order, pointer image motion, and cumulative timing. This is a non-trivial, self-contained pattern for creating step-by-step drawing animations from Excalidraw SVGs. It could be extracted and reused in other Excalidraw-related tools with minimal coupling to the app's UI.
Utility module providing functions to export the animated SVG to an SVG file (via browser-fs-access) and to record a WebM video using the Screen Capture API. The `prepareWebmData` function orchestrates screen capture, recording, and timing. This module is clean, typed, and could be reused independently in any browser-based SVG export scenario with minor adjustments.