# Atmosphere Animation

## Example

```svelte
<script lang="ts">
	import { AtmosphereAnimation, Box } from '@foxui/all';
</script>

<Box class="not-prose flex items-center justify-center">
	<AtmosphereAnimation class="max-w-xl" />
</Box>
```

## Documentation

## Usage

A prebuilt Atmosphere hero animation, perfect for atproto/Bluesky login screens. Both `lottie-web` and the animation JSON are lazy-loaded, so they only download when the component mounts.

```svelte
<AtmosphereAnimation class="max-w-xl" />
```

Set size with regular classes. Defaults to `aspect-video w-full`.

## API Reference

### AtmosphereAnimation
Prebuilt animated Atmosphere hero (Lottie). lottie-web and the animation JSON are dynamically imported, so nothing ships until the component mounts.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| loop | `boolean` | `true` | Whether to loop the animation. |
| autoplay | `boolean` | `true` | Whether to start playing on mount. |