The same animated SVG funnel app built across 7 frameworks as part of the action–state reference suite, plus one additional React 19 implementation added separately:
| App | Framework | Tween Engine | Bundle | Visibility |
|---|---|---|---|---|
| funnel-s4e | Svelte 5 | built-in | 50k | private |
| funnel-uce | uCE | Anime.js | 58k | private |
| funnel-sld | Solid | Anime.js | 58k | private |
| funnel-lit | Lit | Anime.js | 63k | private |
| funnel-p4t | Preact | Anime.js | 63k | private |
| funnel-wc | Stencil | Anime.js | 66k | public |
| funnel-vue | Vue 3 | Anime.js | 110k | private |
| funnel-r3t | React 19 | Anime.js | — | private |
Each app: 12 building blocks as single-file components, Tailwind CSS with custom color plugin, responsive layout, SVG shapes rendered directly, state persisted to Local Storage, deployed on Vercel.
The funnel geometry originated at Demandbase, where it was procedurally generated using Raphael.js in ~278 lines of code — drawing the perspective SVG shapes programmatically at runtime. For the app suite, the geometry was translated into static SVG elements, removing the procedural generation entirely. Anime.js (or Svelte's built-in tweening engine in the Svelte implementation) handles the animation against those static elements. Same visual result, fundamentally different approach: the complex drawing logic was replaced by markup, and the animation became a separate concern.
The animation is fully interruptable — if the target changes mid-animation, the tween stops and restarts from its current position toward the new target with no reset or shudder. The funnel continuously interpolates toward whatever the current state says, making rapid selections feel seamless rather than jumpy.