# Showcase — AuCore > Eighteen interactive motion studies built with anime.js — self-drawing SVG, weighted routing, stagger grids, particles, a live network graph, liquid morphing, odometers, loaders and an animation lab. Source: https://ai.aunuhost.bond/showcase — fps 01 ## The mark draws itself A stroke-dashoffset write-on, then a spring settle for the fill and satellites. The standard approach for any line-art logo reveal. timeline · setDashoffset · spring easing 02 ## A request finds its model One request fans out across candidate lanes, the router commits to a single model, then tokens stream back. Loops while visible. idlesequenced timeline · per-target functions 03 ## Stagger from any origin Grid staggers derive delay from a cell index, so a ripple can start anywhere. Move your pointer across the field, or click to fire a burst. anime.stagger with grid + from 04 ## Particles with weight Each fragment gets a launch angle and power, then a two-keyframe vertical path so it rises and falls under something that reads as gravity. Click anywhere. click anywhere in this panel 0 particles spawnedkeyframe arrays · per-target functions · self-cleanup 05 ## A live routing graph Canvas nodes drift, spring back to their slots and retreat from your cursor, while anime.js drives the pulses that travel each edge. Click to fire one. canvas + anime.js driving plain objects 06 ## Liquid that never repeats The blob is generated from eight jittered control points, so every morph is new. An SVG turbulence filter is animated attribute-by-attribute underneath. generated path data · animated feTurbulence 07 ## One shape becomes another Path `d` attributes tween directly when both shapes share the same command structure. Five silhouettes, one continuous morph. —path data interpolation 08 ## A lifecycle you can scrub A timeline created with `autoplay:false` becomes a controllable object — play, pause and seek to any progress value. 0%timeline seek + update callback 09 ## Type that arrives with intent A per-character split reveal with blur, a glyph scramble that resolves to the target word, and a vertical word carousel. optimised for inference One key for every model.Predictable latency.Usage you can audit.No vendor lock-in. character stagger · update callback 10 ## Odometer digits Each digit is a strip of 0–9 translated behind a fixed window. Overshooting by three full revolutions gives the mechanical spin-down. cubicBezier easing · staggered per digit 11 ## Numbers that count themselves in Bars, tabular counters and a self-drawing sparkline, driven from one staggered pass so the panel reads as a single gesture. Requests 0 Tokens 0 p95 latency 0 Success 0 round option · getTotalLength · staggered delay 12 ## A marquee with no seam The track is duplicated in place and translated exactly −50%, so the wrap point is invisible. Two rows travel in opposite directions. aucore-router-autoaucore-router-autoaucore-router-autollama-4-maverickdeepseek-v3.2qwen3-maxmistral-large-3grok-4 streamingtool callingvision input1M contextpriority routingusage analyticstoken minimizersmart router linear loop · percentage translate · hover spring 13 ## Follow an arbitrary curve `anime.path()` returns x, y and angle functions from any SVG path, so an element can travel a route and stay tangent to it. anime.path — translateX / translateY / rotate 14 ## Depth across a tilted plane A 10×10 field rotated into an isometric view. Grid staggers become terrain when the animated property is `translateZ`. translateZ + preserve-3d 15 ## A field that yields to you Dots inside a radius are pushed away with force proportional to proximity, then released on an elastic curve. Throttled to one pass per frame. rAF-throttled pointer · easeOutElastic release 16 ## Six waiting states Every spinner here is anime.js on plain elements — no keyframes, no SVG animation tags, so each one can be paused and resumed programmatically. orbit pulse equaliser morph arc typing loop + direction alternate + stagger 17 ## Depth without decoration Pointer-tracked rotation with an elastic return, plus a light that follows the cursor. Restrained enough for a production dashboard. ◆ #### One endpoint Every model behind the same request shape, so adding a provider costs nothing. ◷ #### Priority routing Higher plans are dispatched first when capacity tightens, with guaranteed floors. ▤ #### Usage you can audit Latency percentiles, error mix and per-model split for every key you hold. pointer rotateX / rotateY · elastic return 18 ## Build the animation yourself Change the origin, easing, property and stagger delay, then read the exact anime.js call that produces what you just watched. Click the grid to replay. Property Stagger origin Easing Stagger delay Duration ## Everything here ships in the product The same motion vocabulary drives the dashboard, the status page and the docs. Grab a key and see it in your own project. [Request a key](https://ai.aunuhost.bond/support)[Open the playground](https://ai.aunuhost.bond/playground)