# `PhiaUi.Components.Animation`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/animation/animation.ex#L1)
Animation primitives for PhiaUI — 22 components covering infinite loops,
background effects, text effects, entry/scroll animations, interactive hover,
counter animations, decorative borders, CSS loaders, and canvas effects.
All JS-driven components respect `prefers-reduced-motion`.
## Components (A — Infinite Loop)
- `marquee/1` — horizontal/vertical infinite scroll ticker
- `orbit/1` — element orbiting a center at configurable radius
## Components (B — Background Effects)
- `aurora/1` — animated aurora borealis gradient
- `meteor_shower/1` — falling meteors across a container
- `dot_pattern/1` — radial dot grid background
- `grid_pattern/1` — orthogonal grid lines background
- `ripple_bg/1` — concentric expanding rings
## Components (C — Text Effects)
- `shimmer_text/1` — sliding shine gradient over text
- `typewriter/1` — char-by-char text reveal
- `word_rotate/1` — cycling words with fade
- `text_scramble/1` — glitch-then-reveal text effect
## Components (D — Entry Animations)
- `fade_in/1` — scroll-triggered reveal with direction
- `float/1` — perpetual levitation loop
## Components (E — Interactive Hover)
- `spotlight/1` — cursor-following radial light
- `tilt_card/1` — 3D perspective tilt on hover
## Components (F — Counter)
- `number_ticker/1` — count-up animation to target value
## Components (G — Decorative)
- `animated_border/1` — rotating conic-gradient border
- `pulse_ring/1` — expanding pulsing rings
## Components (H — Loaders)
- `typing_indicator/1` — 3-dot bouncing chat loader
- `wave_loader/1` — wave bar equalizer loader
## Components (I — Canvas Effects)
- `confetti_burst/1` — canvas confetti particles
- `particle_bg/1` — canvas floating particle field
# `animated_border`
Rotating conic-gradient animated border wrapper. Pure CSS.
## Examples
<.animated_border colors={["#ff0080", "#7928ca"]} speed={3} class="p-4">
Fancy border!
## Attributes
* `colors` (`:list`) - Color stops for the rotating conic gradient. Defaults to `["#ff0080", "#ff8c00", "#40e0d0"]`.
* `speed` (`:integer`) - Rotation duration in seconds. Defaults to `4`.
* `border_width` (`:integer`) - Border width in pixels. Defaults to `2`.
* `radius` (`:string`) - Tailwind border-radius class. Defaults to `"rounded-lg"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots
* `inner_block` (required)
# `aurora`
Aurora borealis animated gradient background. Pure CSS.
## Examples
<.aurora colors={["#00d2ff", "#7928ca"]} speed={6} class="h-64 w-full rounded-xl" />
## Attributes
* `colors` (`:list`) - Color stops for the aurora gradient. Defaults to `["#00d2ff", "#3a47d5", "#a8edea", "#fed6e3"]`.
* `speed` (`:integer`) - Animation duration in seconds. Defaults to `8`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
# `confetti_burst`
Canvas confetti particle burst.
Requires `PhiaConfetti` JS hook.
## Examples
<.confetti_burst trigger={:click} count={120} class="absolute inset-0">
## Attributes
* `trigger` (`:atom`) - What triggers the confetti burst. Defaults to `:mount`. Must be one of `:mount`, or `:click`.
* `count` (`:integer`) - Number of confetti particles. Defaults to `80`.
* `colors` (`:list`) - Particle color palette. Defaults to `["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff"]`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
# `dot_pattern`
Radial dot grid background pattern. Pure CSS.
## Examples
<.dot_pattern color="oklch(0.5 0 0 / 20%)" spacing={20} class="absolute inset-0" />
## Attributes
* `color` (`:string`) - Dot color (any CSS value). Defaults to `"currentColor"`.
* `size` (`:integer`) - Dot radius in pixels. Defaults to `1`.
* `spacing` (`:integer`) - Grid cell size in pixels. Defaults to `24`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
# `fade_in`
Wraps content with a scroll-triggered reveal animation.
Requires `PhiaScrollReveal` JS hook.
## Examples
<.fade_in direction={:up} delay={200}>
Appears from below on scroll.
## Attributes
* `direction` (`:atom`) - Entry direction for the slide animation. Defaults to `:up`. Must be one of `:up`, `:down`, `:left`, `:right`, or `:none`.
* `delay` (`:integer`) - Transition delay in milliseconds. Defaults to `0`.
* `duration` (`:integer`) - Transition duration in milliseconds. Defaults to `500`.
* `once` (`:boolean`) - Reveal only once (no re-hide). Defaults to `true`.
* `threshold` (`:float`) - IntersectionObserver threshold. Defaults to `0.1`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots
* `inner_block` (required)
# `float`
Perpetual floating/levitation loop. Pure CSS `@keyframes float`.
## Examples
<.float amplitude={:lg} duration={4}>
## Attributes
* `amplitude` (`:atom`) - Float movement amplitude. Defaults to `:md`. Must be one of `:sm`, `:md`, or `:lg`.
* `duration` (`:integer`) - Float cycle duration in seconds. Defaults to `3`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots
* `inner_block` (required)
# `grid_pattern`
Orthogonal grid lines background. Pure CSS.
## Examples
<.grid_pattern color="oklch(0.5 0 0 / 15%)" size={40} class="absolute inset-0" />
## Attributes
* `color` (`:string`) - Grid line color. Defaults to `"currentColor"`.
* `size` (`:integer`) - Grid cell size in pixels. Defaults to `32`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
# `marquee`
Infinite scroll marquee. Renders slot content twice for a seamless loop.
Requires `PhiaMarquee` JS hook.
## Examples
<.marquee gap="gap-8">
<.marquee direction={:vertical} speed={20} pause_on_hover={false}>
Item 1
## Attributes
* `direction` (`:atom`) - Scroll direction. Defaults to `:horizontal`. Must be one of `:horizontal`, or `:vertical`.
* `speed` (`:integer`) - Animation duration in seconds. Defaults to `40`.
* `pause_on_hover` (`:boolean`) - Pause animation on mouse enter. Defaults to `true`.
* `reverse` (`:boolean`) - Reverse scroll direction. Defaults to `false`.
* `gap` (`:string`) - Tailwind gap class between items. Defaults to `"gap-4"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots
* `inner_block` (required)
# `meteor_shower`
Randomly-positioned falling meteors. Pure CSS `@keyframes meteor`.
## Examples
<.meteor_shower count={15} class="absolute inset-0" />
## Attributes
* `count` (`:integer`) - Number of meteors. Defaults to `20`.
* `color` (`:string`) - Meteor trail color. Defaults to `"#94a3b8"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
# `number_ticker`
Counts up from 0 to `value` with easeOutCubic easing.
Requires `PhiaNumberTicker` JS hook.
## Examples
<.number_ticker value={1248} format={:comma} prefix="$" class="text-4xl font-bold" />
<.number_ticker value={98} format={:percent} suffix="%" duration={2000} />
## Attributes
* `value` (`:integer`) (required) - Target value to count up to.
* `duration` (`:integer`) - Animation duration in milliseconds. Defaults to `1500`.
* `format` (`:atom`) - Number formatting style. Defaults to `:plain`. Must be one of `:plain`, `:comma`, or `:percent`.
* `prefix` (`:string`) - Text before the number (e.g. "$"). Defaults to `""`.
* `suffix` (`:string`) - Text after the number (e.g. "K"). Defaults to `""`.
* `decimal_places` (`:integer`) - Defaults to `0`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
# `orbit`
Element orbiting a center point. Pure CSS `@keyframes orbit`.
## Examples
<.orbit radius={80} duration={8}>
<:center>
## Attributes
* `radius` (`:integer`) - Orbit radius in pixels. Defaults to `60`.
* `duration` (`:integer`) - Orbit duration in seconds. Defaults to `10`.
* `delay` (`:integer`) - Animation delay in milliseconds. Defaults to `0`.
* `reverse` (`:boolean`) - Reverse orbit direction. Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots
* `inner_block` (required)
* `center` - Content placed at the orbit center.
# `particle_bg`
Canvas floating particle field background.
Requires `PhiaParticleBg` JS hook.
## Examples
<.particle_bg count={80} color="rgba(99,102,241,0.6)" connect={true} class="h-screen w-full" />
## Attributes
* `count` (`:integer`) - Number of floating particles. Defaults to `50`.
* `color` (`:string`) - Particle and line color. Defaults to `"rgba(148,163,184,0.8)"`.
* `speed` (`:float`) - Base particle movement speed. Defaults to `0.5`.
* `connect` (`:boolean`) - Draw connecting lines between nearby particles. Defaults to `true`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
# `pulse_ring`
Expanding pulsing rings radiating from a center element. Pure CSS.
## Examples
<.pulse_ring color="oklch(0.6 0.2 250)" size={40}>
## Attributes
* `color` (`:string`) - Ring color. Defaults to `"var(--color-primary)"`.
* `size` (`:integer`) - Base ring size in pixels. Defaults to `48`.
* `duration` (`:integer`) - Pulse duration in seconds. Defaults to `2`.
* `count` (`:integer`) - Number of pulsing rings. Defaults to `3`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots
* `inner_block`
# `ripple_bg`
Concentric expanding rings ripple from center. Pure CSS.
## Examples
<.ripple_bg color="oklch(0.6 0.2 250)" count={4} class="size-40" />
## Attributes
* `color` (`:string`) - Ring color. Defaults to `"var(--color-primary)"`.
* `duration` (`:integer`) - Ripple cycle duration in seconds. Defaults to `2`.
* `count` (`:integer`) - Number of concentric rings. Defaults to `3`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
# `shimmer_text`
Inline text with a sliding shine gradient over the surface. Pure CSS.
## Examples
<.shimmer_text class="text-2xl font-semibold">✨ Magic UI
## Attributes
* `speed` (`:integer`) - Shimmer cycle duration in seconds. Defaults to `8`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots
* `inner_block` (required)
# `spotlight`
Radial gradient spotlight that follows the cursor inside the container.
Requires `PhiaSpotlight` JS hook.
## Examples
<.spotlight class="p-8 rounded-xl border" color="rgba(120,80,255,0.2)" size={400}>
Hover me!
## Attributes
* `color` (`:string`) - Spotlight color (any CSS color). Defaults to `"rgba(255,255,255,0.15)"`.
* `size` (`:integer`) - Spotlight radius in pixels. Defaults to `300`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots
* `inner_block` (required)
# `text_scramble`
Scrambles then reveals text with a glitch effect.
Requires `PhiaTextScramble` JS hook.
## Examples
<.text_scramble text="Decode me" trigger={:hover} />
<.text_scramble text="Hello World" trigger={:click} duration={1200} />
## Attributes
* `text` (`:string`) (required) - Target text to reveal.
* `trigger` (`:atom`) - What triggers the scramble effect. Defaults to `:mount`. Must be one of `:mount`, `:hover`, or `:click`.
* `duration` (`:integer`) - Scramble duration in milliseconds. Defaults to `800`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
# `tilt_card`
3D perspective tilt card on mouse hover.
Requires `PhiaTiltCard` JS hook.
## Examples
<.tilt_card max_tilt={20} glare={true} class="rounded-xl border p-6">
Hover to tilt
## Attributes
* `max_tilt` (`:integer`) - Maximum tilt angle in degrees. Defaults to `15`.
* `scale` (`:float`) - Scale factor on hover. Defaults to `1.05`.
* `glare` (`:boolean`) - Show glare overlay effect. Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots
* `inner_block` (required)
# `typewriter`
Types text char-by-char with an optional cursor blink.
Requires `PhiaTypewriter` JS hook.
## Examples
<.typewriter text="Hello, PhiaUI!" speed={60} cursor={true} loop={true} />
## Attributes
* `text` (`:string`) (required) - The text to type out.
* `speed` (`:integer`) - Milliseconds per character. Defaults to `80`.
* `cursor` (`:boolean`) - Show blinking cursor. Defaults to `true`.
* `loop` (`:boolean`) - Restart after completion. Defaults to `false`.
* `delay` (`:integer`) - Initial delay in milliseconds. Defaults to `0`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
# `typing_indicator`
Three-dot bouncing chat typing indicator. Pure CSS.
## Examples
<.typing_indicator color="var(--color-primary)" size={:lg} />
## Attributes
* `color` (`:string`) - Dot color. Defaults to `"var(--color-muted-foreground)"`.
* `size` (`:atom`) - Defaults to `:md`. Must be one of `:sm`, `:md`, or `:lg`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
# `wave_loader`
Wave equalizer bar loader. Pure CSS.
## Examples
<.wave_loader color="oklch(0.6 0.2 250)" size={:lg} bar_count={7} />
## Attributes
* `color` (`:string`) - Bar color. Defaults to `"var(--color-primary)"`.
* `size` (`:atom`) - Defaults to `:md`. Must be one of `:sm`, `:md`, or `:lg`.
* `bar_count` (`:integer`) - Number of bars. Defaults to `5`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
# `word_rotate`
Cycles through a list of words with a fade/slide transition.
Requires `PhiaWordRotate` JS hook.
## Examples
<.word_rotate words={["Fast", "Beautiful", "Accessible"]} duration={2000} />
## Attributes
* `words` (`:list`) (required) - List of words to cycle through.
* `duration` (`:integer`) - Time per word in milliseconds. Defaults to `2500`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
---
*Consult [api-reference.md](api-reference.md) for complete listing*
## Attributes
* `amplitude` (`:atom`) - Float movement amplitude. Defaults to `:md`. Must be one of `:sm`, `:md`, or `:lg`.
* `duration` (`:integer`) - Float cycle duration in seconds. Defaults to `3`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots
* `inner_block` (required)
# `grid_pattern`
Orthogonal grid lines background. Pure CSS.
## Examples
<.grid_pattern color="oklch(0.5 0 0 / 15%)" size={40} class="absolute inset-0" />
## Attributes
* `color` (`:string`) - Grid line color. Defaults to `"currentColor"`.
* `size` (`:integer`) - Grid cell size in pixels. Defaults to `32`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
# `marquee`
Infinite scroll marquee. Renders slot content twice for a seamless loop.
Requires `PhiaMarquee` JS hook.
## Examples
<.marquee gap="gap-8">
<.marquee direction={:vertical} speed={20} pause_on_hover={false}>
## Attributes
* `radius` (`:integer`) - Orbit radius in pixels. Defaults to `60`.
* `duration` (`:integer`) - Orbit duration in seconds. Defaults to `10`.
* `delay` (`:integer`) - Animation delay in milliseconds. Defaults to `0`.
* `reverse` (`:boolean`) - Reverse orbit direction. Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots
* `inner_block` (required)
* `center` - Content placed at the orbit center.
# `particle_bg`
Canvas floating particle field background.
Requires `PhiaParticleBg` JS hook.
## Examples
<.particle_bg count={80} color="rgba(99,102,241,0.6)" connect={true} class="h-screen w-full" />
## Attributes
* `count` (`:integer`) - Number of floating particles. Defaults to `50`.
* `color` (`:string`) - Particle and line color. Defaults to `"rgba(148,163,184,0.8)"`.
* `speed` (`:float`) - Base particle movement speed. Defaults to `0.5`.
* `connect` (`:boolean`) - Draw connecting lines between nearby particles. Defaults to `true`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
# `pulse_ring`
Expanding pulsing rings radiating from a center element. Pure CSS.
## Examples
<.pulse_ring color="oklch(0.6 0.2 250)" size={40}>
## Attributes
* `color` (`:string`) - Ring color. Defaults to `"var(--color-primary)"`.
* `size` (`:integer`) - Base ring size in pixels. Defaults to `48`.
* `duration` (`:integer`) - Pulse duration in seconds. Defaults to `2`.
* `count` (`:integer`) - Number of pulsing rings. Defaults to `3`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots
* `inner_block`
# `ripple_bg`
Concentric expanding rings ripple from center. Pure CSS.
## Examples
<.ripple_bg color="oklch(0.6 0.2 250)" count={4} class="size-40" />
## Attributes
* `color` (`:string`) - Ring color. Defaults to `"var(--color-primary)"`.
* `duration` (`:integer`) - Ripple cycle duration in seconds. Defaults to `2`.
* `count` (`:integer`) - Number of concentric rings. Defaults to `3`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
# `shimmer_text`
Inline text with a sliding shine gradient over the surface. Pure CSS.
## Examples
<.shimmer_text class="text-2xl font-semibold">✨ Magic UI
## Attributes
* `speed` (`:integer`) - Shimmer cycle duration in seconds. Defaults to `8`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots
* `inner_block` (required)
# `spotlight`
Radial gradient spotlight that follows the cursor inside the container.
Requires `PhiaSpotlight` JS hook.
## Examples
<.spotlight class="p-8 rounded-xl border" color="rgba(120,80,255,0.2)" size={400}>