I built a 20KB Motion Engine because Svgator,Rive and Lottie were too heavy for the DOM
Source: Dev.to
The Problem: The “Black Box” of Web Animation
We’ve all been there. You want a high‑fidelity animation, so you reach for Lottie or Rive. They look amazing, but they come with a cost:
- The Weight: Rive’s runtime starts at 280 KB+. Even SVGator sits around 38 KB.
- The SEO Void: Canvas‑based animations are “black boxes.” Search engines can’t see what’s inside.
- Accessibility: Screen readers often struggle with non‑DOM elements.
As a senior developer obsessed with performance, I asked: Can we have high‑end motion without sacrificing the DOM?
The Solution: Fluv, the Semantic Motion Engine
I spent the last few months building Fluv. It’s not just another library; it’s a Semantic Motion Engine designed to treat animations as native web citizens.
Key Achievement: 20 KB Modular Runtime
- Proprietary modular architecture keeps the runtime down to ~20 KB.
- Selective Loading: Only the features your specific animation needs (easing functions, staggering, etc.) are loaded.
- 10 KB–20 KB lighter than the nearest competitors.
Why “Semantic”?
- SEO‑Native: Animations manipulate SVG paths directly in the DOM, making every element crawlable.
- Stylable: Interact with animations via CSS or JavaScript just like any other DOM element.
- Lightweight: No heavy engine needed to “render” a frame; the browser does what it does best.
Technical Deep Dive
I re‑engineered how path data is parsed and interpolated. Instead of massive JSON files, Fluv uses a compressed logic that prioritizes mathematical curves over raw frame data.
Support includes
- Extended animation types (path morphing, transforms).
- Complex staggering for group elements.
- Custom easing functions for organic movement.
Repository
The source code is available on GitHub.
Discussion
I’m curious: What is your “budget” for animation runtimes in your professional projects? Does 280 KB feel like too much for a landing page? Let’s discuss in the comments!