Rotating conic-gradient animated border wrapper. Pure CSS.

Examples

<.animated_border colors={["#ff0080", "#7928ca"]} speed={3} class="p-4">
  <p>Fancy border!</p>
</.animated_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 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.

Canvas confetti particle burst. Requires PhiaConfetti JS hook.

Examples

<.confetti_burst trigger={:click} count={120} class="absolute inset-0">
  <button phx-click="celebrate">🎉 Celebrate!</button>
</.confetti_burst>

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.

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.

Wraps content with a scroll-triggered reveal animation. Requires PhiaScrollReveal JS hook.

Examples

<.fade_in direction={:up} delay={200}>
  <p>Appears from below on scroll.</p>
</.fade_in>

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)

Perpetual floating/levitation loop. Pure CSS @keyframes float.

Examples

<.float amplitude={:lg} duration={4}>
  <img src="/hero-icon.svg" class="size-16" />
</.float>

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)

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.

Infinite scroll marquee. Renders slot content twice for a seamless loop. Requires PhiaMarquee JS hook.

Examples

<.marquee gap="gap-8">
  <img src="/logo1.png" />
  <img src="/logo2.png" />
</.marquee>

<.marquee direction={:vertical} speed={20} pause_on_hover={false}>
  <div>Item 1</div>
</.marquee>

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)

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.

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.

Element orbiting a center point. Pure CSS @keyframes orbit.

Examples

<.orbit radius={80} duration={8}>
  <span class="size-3 rounded-full bg-primary" />
  <:center>
    <img src="/logo.svg" class="size-10" />
  </:center>
</.orbit>

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.

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.

Expanding pulsing rings radiating from a center element. Pure CSS.

Examples

<.pulse_ring color="oklch(0.6 0.2 250)" size={40}>
  <span class="size-4 rounded-full bg-primary" />
</.pulse_ring>

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

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.

Inline text with a sliding shine gradient over the surface. Pure CSS.

Examples

<.shimmer_text class="text-2xl font-semibold">✨ Magic UI</.shimmer_text>

Attributes

• speed (:integer) - Shimmer cycle duration in seconds. Defaults to 8.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

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}>
  <h2>Hover me!</h2>
</.spotlight>

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)

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.

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">
  <h3>Hover to tilt</h3>
</.tilt_card>

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)

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.

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 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.

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.