Lottie Animation

Vector animation played from an exported file.

html

<div class="mot-lot-stage" data-scene="spin">
  <svg class="mot-lot-svg mot-lot-svg--loop" viewBox="0 0 100 100" width="90" height="90" aria-hidden="true">
    <path class="mot-lot-shape" fill="#E8A020" d="M50 10 L90 90 L10 90 Z"/>
  </svg>
  <p class="mot-lot-caption">Vector scene: spin &middot; approximates a Lottie-style JSON animation, played from inline SVG</p>
</div>
<style>
.mot-lot-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 12px system-ui, sans-serif; color: #241430aa; text-align: center; }
.mot-lot-svg { transform-origin: 50% 50%; }
.mot-lot-caption { margin: 10px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  [data-scene="spin"] .mot-lot-svg { animation: mot-lot-spin 1500ms linear; }
  [data-scene="morph"] .mot-lot-shape { animation: mot-lot-morph 1500ms ease-in-out; }
  [data-scene="bounce"] .mot-lot-svg { animation: mot-lot-bounce 1500ms ease-in-out; }
  .mot-lot-svg--loop { animation-iteration-count: infinite !important; }
  @keyframes mot-lot-spin { to { transform: rotate(360deg); } }
  @keyframes mot-lot-morph { 0%,100% { d: path("M50 10 L90 90 L10 90 Z"); } 50% { d: path("M50 20 C80 20 80 80 50 80 C20 80 20 20 50 20 Z"); } }
  @keyframes mot-lot-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
}
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-xs text-[#241430]/70 text-center" data-scene="spin">
  <svg class="tw-lot-svg tw-lot-loop mx-auto" viewBox="0 0 100 100" width="90" height="90" aria-hidden="true">
    <path class="tw-lot-shape" fill="#E8A020" d="M50 10 L90 90 L10 90 Z"/>
  </svg>
  <p class="mt-2.5">Vector scene: spin &middot; approximates a Lottie-style JSON animation, played from inline SVG</p>
</div>
<style>
.tw-lot-svg { transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  [data-scene="spin"] .tw-lot-svg { animation: mot-lot-tw-spin 1500ms linear; }
  [data-scene="morph"] .tw-lot-shape { animation: mot-lot-tw-morph 1500ms ease-in-out; }
  [data-scene="bounce"] .tw-lot-svg { animation: mot-lot-tw-bounce 1500ms ease-in-out; }
  .tw-lot-loop { animation-iteration-count: infinite !important; }
  @keyframes mot-lot-tw-spin { to { transform: rotate(360deg); } }
  @keyframes mot-lot-tw-morph { 0%,100% { d: path("M50 10 L90 90 L10 90 Z"); } 50% { d: path("M50 20 C80 20 80 80 50 80 C20 80 20 20 50 20 Z"); } }
  @keyframes mot-lot-tw-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
}
</style>

react

export function LottieAnimation({
  scene = "spin",
  duration = 1500,
  loop = true,
  accent = "#E8A020",
}) {
  const names = { spin: "mot-lot-spin", morph: "mot-lot-morph", bounce: "mot-lot-bounce" };
  const target = scene === "morph" ? "path" : "svg";
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430aa", textAlign: "center" }}>
      <svg viewBox="0 0 100 100" width="90" height="90" aria-hidden="true" className={target === "svg" ? "scene" : undefined} style={{ margin: "0 auto", display: "block", transformOrigin: "50% 50%" }}>
        <path fill={accent} d="M50 10 L90 90 L10 90 Z" className={target === "path" ? "scene" : undefined} />
      </svg>
      <p style={{ margin: "10px 0 0" }}>Vector scene: {scene} &middot; approximates a Lottie-style JSON animation, played from inline SVG</p>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .scene { animation: ${names[scene]} ${duration}ms ease-in-out ${loop ? "infinite" : 1}; }
          @keyframes mot-lot-spin { to { transform: rotate(360deg); } }
          @keyframes mot-lot-morph { 0%,100% { d: path("M50 10 L90 90 L10 90 Z"); } 50% { d: path("M50 20 C80 20 80 80 50 80 C20 80 20 20 50 20 Z"); } }
          @keyframes mot-lot-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
        }
      `}</style>
    </div>
  );
}