Original Summary

I've been working on tinyfly since last 9 months , a TypeScript animation engine where an animation is just data: timelines, tracks, keyframes and easing, all serializable to JSON. The engine is deterministic (same input, same frame), has no dependencies, and doesn't touch the DOM, so it runs in the browser, in Web Workers and in Node. Rendering goes through adapters, and the visual editor is just one more consumer of the public API. It's in beta and MIT licensed. This is not a clone/copy of any existing product. This one has API inspirations but all features are developed out of need for the course, tutorials, product walkthrough that I need to create every week. Take a look at the examples at https://tinyfly.app/examples These animations are applied in my real websites as well. For ref - https://algorisys.com/ (my startup website in progress) - https://teachyourselfcoding.com/system-design-storage-engines/ (all animations in lessons where applicable is built using tinyfly.app) Core engine & format Timelines with play/pause/seek/reverse/speed, loops, yoyo, repeatDelay Springs that stay deterministic and serialize as parameters, not baked curves Runtime stagger: one track fans across many targets (~15x smaller JSON than baking) DOM, SVG, Canvas and WebGL adapters; export to CSS, Lottie, GIF, WebP, MP4, sprite sheets GSAP-style API (familiar, not compatible; it compiles to ordinary tracks) live.to() / timeline() , scrollTrigger with scrub, pin, snap splitText (chars, words, lines), morphSVG , drawSVG, motion paths Flip (including shared elements), draggable with inertia, quickTo , smooth scroll Teaching embeds Markers and captions in the JSON; a player that steps, with predict-then-reveal questions One script tag mounts every [data-tinyfly-embed] figure; respects reduced motion npx u/algorisys /tinyfly validate in CI, render to static SVG for RSS/email Video from code npx tinyfly video scene.mjs renders H.264 MP4 in Node, no browser (needs ffmpeg) SRT/WebVTT captions; narration timing from recorded clip lengths Stick figures & cartoon acting Poses, expressions, walk cycles, lip-sync from text (Latin or Devanagari) Gags (take, double take), gaits (sneak, strut, tired), dances, flips scriptTracks() compiles beats like { do: 'walk', to: 640 } into keyframes defineAction() , defineGait() , persona() for your own behaviours Figures acting on code (Animator vs Animation style, for tutorial videos) codePanel() makes every line and word a place in the scene Figures point at lines, swipe them away, grab/throw/kick words, write code by hand Also 3D scenes (meshes, lights, cameras, toon shading) on a plain canvas, no WebGL needed Animated maps: camera fly-ins, pins, routes that draw on Editor: dope sheet, curve editor, symbols, camera, onion skinning, pen tool React/Vue/Svelte/Solid wrappers that revert on unmount LLM-friendly A capabilities catalog generated from the library; wrong names get did-you-mean errors llms.txt , llms-fu

  • 情报分类：技术学习与提效
  • 分类依据：内容涉及技术、AI、软件工具或工程实践
  • 信息来源：Reddit · SaaS
  • 发布时间：2026/10/7 19:30:44