Logo
Neura
Back to Home

Getting Started

Introduction
Installation
Usage
Dark Mode
Theming
Layouts

Components

Atoms

Form Elements

Field
Label
Description
Fieldset
Form
Input
Textarea
Select
Autocomplete
Calendar
Date Picker
Rich Editor
Checkbox
Radio
Switch
OTP
Dropzone
Tags Input

Layout

Container
Grid
Stack
Box
Card
Divider
Spacer

Navigation

Navlist
Link

Feedback

Alert
Callout
Toast
Dialog
Modal
Popover

Content

Text
Heading
Brand
Lottie
Skeleton

Data Display

Table
Chart
Kanban
Image Gallery
Tabs
Accordion
Badge
Avatar

Actions

Button
Command Palette
Composer
Context Menu
Dropdown

Utilities

Theme Switcher
Wizard

Lottie

Display animated Lottie animations with floating and rotation effects

Basic Usage

Display a Lottie animation by providing the animation file path: 
<neura::lottie 
    animation="animations/Celebrations Begin.json"
/>

Lottie.js Included

The lottie-web library is already included in this project via npm. The lottieAnimation() Alpine.js function is automatically available. Get free animations

Getting Lottie Animations

Step 1: Visit LottieFiles.com and browse thousands of free animations
Step 2: Download the animation as a JSON file
Step 3: Place it in your public/animations/ folder
Step 4: Use it with <neura::lottie animation="animations/your-file.json" />

Animation Speed

Control the playback speed of the animation: 

<neura::lottie animation="animations/Celebrations Begin.json" speed="1" />


<neura::lottie animation="animations/Celebrations Begin.json" speed="2" />


<neura::lottie animation="animations/Celebrations Begin.json" speed="0.5" />

Delayed Start

Delay the start of the animation by a specified number of milliseconds: 

<neura::lottie 
    animation="animations/Celebrations Begin.json" 
    delay="1000"
/>


<neura::lottie 
    animation="animations/Celebrations Begin.json" 
    delay="2000"
/>

Floating Effect

Add a floating effect with customizable speed and amount:
Gentle floating
Fast floating 

<neura::lottie 
    animation="animations/Celebrations Begin.json" 
    floatSpeed="1000"
    floatAmount="20"
/>


<neura::lottie 
    animation="animations/Mouse scroll animation.json" 
    floatSpeed="500"
    floatAmount="40"
/>

Rotation Effect

Add a subtle rotation synchronized with the floating effect:
Subtle (0.5)
None (0)
Strong (1.5) 

<neura::lottie 
    animation="animations/Celebrations Begin.json" 
    rotateAmount="0.5"
/>


<neura::lottie 
    animation="animations/Mouse scroll animation.json" 
    rotateAmount="0"
/>


<neura::lottie 
    animation="animations/Success Alert icon.json" 
    rotateAmount="1.5"
/>

Positioning

Position the animation using Tailwind positioning classes: 

<neura::lottie 
    animation="animations/Celebrations Begin.json" 
    position="top-0 right-0"
/>


<neura::lottie 
    animation="animations/Mouse scroll animation.json" 
    position="bottom-0 left-0"
/>


<neura::lottie 
    animation="animations/Success Alert icon.json" 
    position="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
/>

Size and Scale

Control the size and scale of the animation: 

<neura::lottie 
    animation="animations/Notification bell.json" 
    size="w-16 h-16"
    scale="1"
/>


<neura::lottie 
    animation="animations/Notification bell.json" 
    size="w-40 h-40"
    scale="2"
/>


<neura::lottie 
    animation="animations/Notification bell.json" 
    size="w-24 md:w-40 h-24 md:h-40"
/>

Color vs Monochrome

By default, animations display in their original colors. Use the monochrome prop to apply dark mode filters:
With colors (default)
Monochrome 

<neura::lottie 
    animation="animations/Celebrations Begin.json"
/>


<neura::lottie 
    animation="animations/Celebrations Begin.json"
    monochrome
/>

Opacity

Adjust the opacity of the animation: 

<neura::lottie 
    animation="animations/Notification bell.json" 
    opacity="opacity-30"
/>


<neura::lottie 
    animation="animations/Notification bell.json" 
    opacity="opacity-90"
/>


<neura::lottie 
    animation="animations/Notification bell.json" 
    opacity="opacity-100"
/>

Float Offset

Offset the floating animation phase for multiple animations: 

<neura::lottie 
    animation="animations/Celebrations Begin.json" 
    floatOffset="0"
    position="top-10 left-10"
/>

<neura::lottie 
    animation="animations/Notification bell.json" 
    floatOffset="1"
    position="top-10 right-10"
/>

<neura::lottie 
    animation="animations/Success Alert icon.json" 
    floatOffset="2"
    position="bottom-10 left-10"
/>

Complete Example

A complete example with multiple animated decorations:

Welcome to Our Platform

Experience the power of animated backgrounds that bring your content to life. 
<div class="relative min-h-screen overflow-hidden">
    
    <neura::lottie 
        animation="animations/Celebrations Begin.json"
        position="top-0 right-0"
        size="w-64 h-64"
        opacity="opacity-20"
        floatSpeed="2000"
        floatAmount="30"
        rotateAmount="0.3"
        scale="1.5"
        delay="0"
    />
    
    
    <neura::lottie 
        animation="animations/Success Alert icon.json"
        position="bottom-0 left-0"
        size="w-48 h-48"
        opacity="opacity-40"
        floatSpeed="1500"
        floatAmount="20"
        rotateAmount="0.5"
        scale="1.2"
        delay="500"
        floatOffset="1"
    />
    
    
    <div class="relative z-10">
        
    </div>
</div>

Props

Prop Type Default Description
animation string - Path to the Lottie JSON animation file (required)
delay number 0 Delay before starting animation (in milliseconds)
speed number 1 Playback speed multiplier
floatSpeed number 1000 Speed of the floating effect (lower = faster)
floatAmount number 20 Vertical distance of floating movement (in pixels)
floatOffset number 0 Phase offset for the floating effect
rotateAmount number 0.5 Amount of rotation synchronized with floating
position string '' Tailwind positioning classes
size string w-24 md:w-40 h-24 md:h-40 Width and height classes
opacity string opacity-90 Opacity class
scale number 1.5 Transform scale value
monochrome boolean false Apply monochrome filters (brightness-0 and invert) for dark mode compatibility

Common Use Cases

Examples of practical applications:

Hero Section Decoration 

<section class="relative min-h-screen">
    <neura::lottie 
        animation="animations/Celebrations Begin.json"
        position="top-0 right-0"
        size="w-96 h-96"
        opacity="opacity-20"
        floatSpeed="3000"
        floatAmount="40"
    />
    <div class="relative z-10">
        
    </div>
</section>

Loading State 

<div class="flex items-center justify-center h-64">
    <neura::lottie 
        animation="animations/Mouse scroll animation.json"
        position="relative"
        size="w-32 h-32"
        opacity="opacity-100"
        floatAmount="0"
        rotateAmount="0"
        speed="1.5"
    />
</div>

Success Message 

<div class="text-center p-8">
    <neura::lottie 
        animation="animations/Success Alert icon.json"
        position="relative mx-auto"
        size="w-24 h-24"
        opacity="opacity-100"
        floatAmount="10"
        floatSpeed="2000"
        speed="1"
    />
    <h3 class="mt-4 text-lg font-semibold">Success!</h3>
</div>

Empty State 

<div class="text-center p-12">
    <neura::lottie 
        animation="animations/Notification bell.json"
        position="relative mx-auto"
        size="w-40 h-40"
        opacity="opacity-50"
        floatAmount="15"
        floatSpeed="2500"
    />
    <p class="mt-4 text-neutral-600">No items found</p>
</div>

Notes

Positioning

The component uses position: absolute by default, so make sure the parent container has position: relative.

Pointer Events

The animation has pointer-events: none so it won't interfere with user interactions.

Performance

The floating and rotation effects update every 50ms. Use sparingly for best performance.

Dark Mode

The SVG is automatically inverted in dark mode using filters. The animation will appear bright on dark backgrounds.