defmodule Enguia do @moduledoc """ Enguia — Animation library for Phoenix LiveView. Provides declarative CSS animations powered by the Web Animations API, with a simple Elixir DSL and a lightweight JavaScript hook. ## Quick Start Add to your `mix.exs`: {:enguia, "~> 0.1"} In your JavaScript entrypoint (`assets/js/app.js`): import EnguiaHook from "../../deps/enguia/priv/static/enguia.js" let liveSocket = new LiveSocket("/live", Socket, { hooks: { EnguiaHook } }) In any LiveView or component: use Enguia # Then in HEEx: <.motion animate={fade_in()}> Hello, world! <.motion animate={slide_up(trigger: :visible, delay: 100)} tag="section"> Slides up when scrolled into view ## `use Enguia` Calling `use Enguia` in a module imports both `Enguia.Components` and `Enguia.Presets`, giving you access to all preset helpers and the `<.motion>` component directly. ## Available Presets | Function | Default trigger | |---|---| | `fade_in/1` | `:mount` | | `fade_out/1` | `:mount` | | `slide_up/1` | `:visible` | | `slide_down/1` | `:visible` | | `slide_left/1` | `:visible` | | `slide_right/1` | `:visible` | | `scale_in/1` | `:mount` | | `scale_out/1` | `:mount` | | `shake/1` | `:mount` | | `pulse/1` | `:mount` (repeat: `:infinity`) | | `bounce/1` | `:mount` (repeat: `:infinity`) | ## Triggers - `:mount` — animates immediately when the component mounts - `:visible` — animates when scrolled into view (IntersectionObserver) - `:hover` — animates on mouse enter - `:click` — animates on click """ defmacro __using__(_opts) do quote do import Enguia.Components import Enguia.Presets import Enguia.TextAnimations end end end