Display

Component

Animate

Zero configuration motion and interaction wrapper. Add continuous loops, smooth hover micro-interactions, press feedback, and directional transforms to any component out of the box.

Component Syntax

blade

<x-aura::animate type="bounce">
    <x-aura::icon name="arrow-down" size="sm" />
</x-aura::animate>

1. Continuous Motion Loops (Zero-Config Core)

blade

bounce

spin

pulse

ping

<!-- Vertical Bounce -->
<x-aura::animate type="bounce">
    <x-aura::icon name="arrow-down" size="md" :container="true" />
</x-aura::animate>

<!-- 360 Spin Loader -->
<x-aura::animate type="spin">
    <x-aura::icon name="loader-2" size="md" :container="true" />
</x-aura::animate>

<!-- Opacity Pulse -->
<x-aura::animate type="pulse">
    <x-aura::icon name="activity" size="md" :container="true" />
</x-aura::animate>

<!-- Radar Ripple Ping -->
<x-aura::animate type="ping">
    <x-aura::icon name="bell" size="md" :container="true" />
</x-aura::animate>

2. Interactive Hover Micro-Interactions (Hover to Trigger)

blade

hover-scale

hover-scale-sm

hover-lift

hover-bounce

hover-spin (180°)

hover-wiggle

hover-tilt-left

hover-glow

<!-- Scale Up on Hover -->
<x-aura::animate type="hover-scale">
    <x-aura::button variant="primary" size="sm">
        Scale (110%)
    </x-aura::button>
</x-aura::animate>

<!-- Subtle Scale (105%) -->
<x-aura::animate type="hover-scale-sm">
    <x-aura::button variant="secondary" size="sm">
        Scale Sm
    </x-aura::button>
</x-aura::animate>

<!-- Elevate and Drop Shadow on Hover -->
<x-aura::animate type="hover-lift">
    <x-aura::button variant="secondary" size="sm">
        Hover Lift
    </x-aura::button>
</x-aura::animate>

<!-- 180° Spin on Hover -->
<x-aura::animate type="hover-spin">
    <x-aura::icon name="refresh-cw" size="md" :container="true" />
</x-aura::animate>

<!-- Tilt Wiggle on Hover -->
<x-aura::animate type="hover-wiggle">
    <x-aura::icon name="bell" size="md" :container="true" />
</x-aura::animate>

3. Hover Rotations & Directional Flips (Hover to Trigger)

blade

hover-flip-x

hover-flip-y

hover-rotate-45

hover-rotate-90

hover-rotate-180

hover-rotate-270

<!-- Horizontal Mirror Flip on Hover -->
<x-aura::animate type="hover-flip-x">
    <x-aura::icon name="arrow-right" size="md" :container="true" />
</x-aura::animate>

<!-- Vertical Mirror Flip on Hover -->
<x-aura::animate type="hover-flip-y">
    <x-aura::icon name="arrow-down" size="md" :container="true" />
</x-aura::animate>

<!-- 45° Smooth Rotation on Hover -->
<x-aura::animate type="hover-rotate-45">
    <x-aura::icon name="plus" size="md" :container="true" />
</x-aura::animate>

<!-- 90° Smooth Rotation on Hover -->
<x-aura::animate type="hover-rotate-90">
    <x-aura::icon name="arrow-right" size="md" :container="true" />
</x-aura::animate>

<!-- 180° Inversion Rotation on Hover -->
<x-aura::animate type="hover-rotate-180">
    <x-aura::icon name="arrow-up" size="md" :container="true" />
</x-aura::animate>

<!-- 270° Rotation on Hover -->
<x-aura::animate type="hover-rotate-270">
    <x-aura::icon name="compass" size="md" :container="true" />
</x-aura::animate>

4. Active & Press States (Click to Trigger)

blade

active-press

active-sink

active-bounce

<!-- Press Scale Down -->
<x-aura::animate type="active-press">
    <x-aura::button variant="primary" size="sm">
        Press Scale
    </x-aura::button>
</x-aura::animate>

<!-- Sink Downward on Click -->
<x-aura::animate type="active-sink">
    <x-aura::button variant="secondary" size="sm">
        Press Sink
    </x-aura::button>
</x-aura::animate>

5. Static Orientations & Transformations

blade

flip-x

flip-y

rotate-45

rotate-90

rotate-180

<!-- Horizontal Mirror Flip -->
<x-aura::animate type="flip-x">
    <x-aura::icon name="arrow-right" size="md" :container="true" />
</x-aura::animate>

<!-- Vertical Mirror Flip -->
<x-aura::animate type="flip-y">
    <x-aura::icon name="arrow-down" size="md" :container="true" />
</x-aura::animate>

<!-- 45° Angle -->
<x-aura::animate type="rotate-45">
    <x-aura::icon name="plus" size="md" :container="true" />
</x-aura::animate>

<!-- 90° Right Angle -->
<x-aura::animate type="rotate-90">
    <x-aura::icon name="arrow-right" size="md" :container="true" />
</x-aura::animate>

6. Inline Integration with Badges and Text

blade

Recording Live

Syncing Data

3 Notifications

<!-- Live Pulsing Beacon -->
<x-aura::badge variant="neutral" size="md">
    <x-aura::flex align="center" gap="2">
        <x-aura::animate type="pulse" :inline="true">
            <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
        </x-aura::animate>
        <span>Recording Live</span>
    </x-aura::flex>
</x-aura::badge>

<!-- Syncing Spinner Badge -->
<x-aura::badge variant="subtle" size="md">
    <x-aura::flex align="center" gap="2">
        <x-aura::animate type="spin" :inline="true">
            <x-aura::icon name="loader-2" size="xs" />
        </x-aura::animate>
        <span>Syncing Data</span>
    </x-aura::flex>
</x-aura::badge>

Component Attributes

Available configuration properties for the <x-aura::animate> wrapper component.

Property	Default	Values
type	bounce	bounce spin pulse ping hover-scale hover-lift hover-bounce hover-spin hover-wiggle hover-rotate-45 hover-rotate-90 hover-rotate-180 hover-flip-x hover-flip-y active-press active-sink flip-x flip-y rotate-45 rotate-90 rotate-180 rotate-270
inline	false	true false
as	div	div span section

Aura Wire

Component Library

Animate

Component Syntax

1. Continuous Motion Loops (Zero-Config Core)

2. Interactive Hover Micro-Interactions (Hover to Trigger)

3. Hover Rotations & Directional Flips (Hover to Trigger)

4. Active & Press States (Click to Trigger)

5. Static Orientations & Transformations

6. Inline Integration with Badges and Text

Component Attributes

Icon

Tag

Aura Wire