Docs UI and Animation¶
The AIERP docs site should feel product-grade, but it should still behave like documentation first.
Preferred Animation Style For AIERP¶
Use SVG for¶
- system landscapes
- service boundaries
- integration maps
- fulfillment flows
Use Lottie for¶
- hero animations
- short workflow explainers
- lightweight onboarding motion
Use Rive only when you truly need¶
- interactive stateful demos
- richer embedded explainers with user-triggered state changes
For AIERP, the best default is:
SVG + Lottie
That keeps the docs maintainable while still feeling polished.
Ready-To-Drop Lottie Snippet¶
<div class="anim-card">
<div
class="lottie-player"
data-lottie-path="/assets/animations/hero-lottie.json"
data-loop="true"
data-autoplay="true"
data-renderer="svg"
aria-hidden="true">
</div>
<p class="anim-caption">AIERP retail workflow overview.</p>
<img
class="anim-fallback"
src="/assets/animations/fallback.svg"
alt="Static fallback showing the AIERP workflow" />
</div>
Ready-To-Drop Rive Snippet¶
<div class="anim-card">
<canvas
class="rive-player"
data-rive-src="/assets/animations/flow.riv"
data-rive-state-machine="State Machine 1"
width="720"
height="420"
aria-hidden="true">
</canvas>
<p class="anim-caption">Interactive AIERP service flow.</p>
<img
class="anim-fallback"
src="/assets/animations/fallback.svg"
alt="Static fallback showing the AIERP service flow" />
</div>