(defcomp
  ()
  (~examples/page-content
    :title "Animations"
    :description "CSS animations play on swap. The component injects a style tag with a keyframe animation and applies the class. Each click picks a random background colour."
    :demo-description "Click to swap in content with a fade-in animation."
    :demo (~examples/animations-demo)
    :sx-code "(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.animate))))\"\n  :sx-target \"#anim-target\"\n  :sx-swap \"innerHTML\"\n  \"Load with animation\")\n\n;; Component uses CSS animation class\n(defcomp ~examples-content/anim-result (&key color time)\n  (div :class \"sx-fade-in ...\"\n    (style \".sx-fade-in { animation: sxFadeIn 0.5s }\")\n    (p \"Faded in!\")))"
    :handler-names (list "ex-animate")
    :comp-placeholder-id "anim-comp"
    :wire-placeholder-id "anim-wire"))
