> ## Documentation Index
> Fetch the complete documentation index at: https://docs.open-animate.com/llms.txt
> Use this file to discover all available pages before exploring further.

# UI Components

> Composable building blocks for scene layouts

8 UI components for building polished scene layouts.

## SafeArea

Title-safe padding container. Keeps content within broadcast-safe margins (\~5% on all sides).

```tsx theme={null}
import { SafeArea } from '@oanim/core';

<SafeArea style={{ justifyContent: 'center', alignItems: 'center' }}>
  <div>Content stays within safe margins</div>
</SafeArea>
```

| Prop       | Type                  | Default   | Description                                                      |
| ---------- | --------------------- | --------- | ---------------------------------------------------------------- |
| `children` | `ReactNode`           | required  | Content to render inside safe margins                            |
| `mode`     | `'title' \| 'action'` | `'title'` | Safe area mode — `title` for tighter margins, `action` for wider |
| `style`    | `CSSProperties`       | `{}`      | Additional styles on the container                               |

Use `SafeArea` as the content layer in every scene to ensure text and UI elements don't get clipped at edges.

## Background

Gradient or solid-color backgrounds.

```tsx theme={null}
import { Background, palettes } from '@oanim/core';

// Gradient background
<Background gradient={`linear-gradient(135deg, ${palettes.dark.bg}, ${palettes.dark.bgAlt})`} />

// Solid background
<Background color="#0a0a0a" />
```

| Prop       | Type     | Default | Description            |
| ---------- | -------- | ------- | ---------------------- |
| `gradient` | `string` | —       | CSS gradient string    |
| `color`    | `string` | —       | Solid background color |

Place `Background` as the first child inside `AbsoluteFill` so it sits behind all other layers.

## GlowOrb

Animated glowing orb for ambient visual interest. Drifts slowly with a gentle floating animation.

```tsx theme={null}
import { GlowOrb } from '@oanim/core';

<GlowOrb color="rgba(99, 102, 241, 0.2)" x={30} y={40} />
```

| Prop      | Type     | Default  | Description                              |
| --------- | -------- | -------- | ---------------------------------------- |
| `color`   | `string` | required | Glow color (use with alpha for subtlety) |
| `x`       | `number` | required | Horizontal position (percentage)         |
| `y`       | `number` | required | Vertical position (percentage)           |
| `size`    | `number` | `300`    | Orb diameter in pixels                   |
| `drift`   | `number` | `20`     | Maximum drift distance in pixels         |
| `opacity` | `number` | `1`      | Opacity multiplier                       |

Place between `Background` and content layers for a soft ambient effect.

## Terminal

Terminal window with typewriter line animation. Lines appear one at a time with a typing effect.

```tsx theme={null}
import { Terminal } from '@oanim/core';

<Terminal
  lines={[
    'npm install @oanim/core',
    'npx oanim init my-video',
    'npx remotion studio',
  ]}
  delay={0.3}
/>
```

| Prop             | Type            | Default             | Description                        |
| ---------------- | --------------- | ------------------- | ---------------------------------- |
| `lines`          | `string[]`      | required            | Lines to type out sequentially     |
| `delay`          | `number`        | `0`                 | Seconds before typing starts       |
| `charsPerSecond` | `number`        | `40`                | Typing speed                       |
| `title`          | `string`        | `'Terminal'`        | Title bar text                     |
| `bg`             | `string`        | `'rgba(0,0,0,0.8)'` | Background color                   |
| `textColor`      | `string`        | `'#e2e8f0'`         | Text color                         |
| `fontSize`       | `number`        | `18`                | Font size in pixels                |
| `style`          | `CSSProperties` | `{}`                | Additional styles on the container |

Renders a dark terminal chrome with a title bar and monospace font.

## Card

Glassmorphism card with spring entrance animation.

```tsx theme={null}
import { Card } from '@oanim/core';

<Card>
  <h2>Feature Title</h2>
  <p>Feature description goes here.</p>
</Card>
```

| Prop           | Type            | Default                    | Description               |
| -------------- | --------------- | -------------------------- | ------------------------- |
| `children`     | `ReactNode`     | required                   | Card content              |
| `bg`           | `string`        | `'rgba(255,255,255,0.05)'` | Background color          |
| `borderColor`  | `string`        | `'rgba(255,255,255,0.1)'`  | Border color              |
| `padding`      | `number`        | `24`                       | Inner padding in pixels   |
| `borderRadius` | `number`        | `12`                       | Border radius in pixels   |
| `spring`       | `SpringPreset`  | `'snappy'`                 | Entrance animation spring |
| `style`        | `CSSProperties` | `{}`                       | Additional styles         |

Cards have a frosted glass effect with subtle borders and an automatic spring entrance animation. Use for feature highlights, metric displays, and content grouping.

## Badge

Pill-shaped label component with spring entrance.

```tsx theme={null}
import { Badge } from '@oanim/core';

<Badge>NEW</Badge>
<Badge bg="#6366f1" textColor="#fff">v2.0</Badge>
```

| Prop          | Type            | Default                   | Description               |
| ------------- | --------------- | ------------------------- | ------------------------- |
| `children`    | `ReactNode`     | required                  | Badge content             |
| `bg`          | `string`        | `'rgba(255,255,255,0.1)'` | Background color          |
| `textColor`   | `string`        | `'#e2e8f0'`               | Text color                |
| `borderColor` | `string`        | `'rgba(255,255,255,0.2)'` | Border color              |
| `fontSize`    | `number`        | `14`                      | Font size in pixels       |
| `spring`      | `SpringPreset`  | `'snappy'`                | Entrance animation spring |
| `style`       | `CSSProperties` | `{}`                      | Additional styles         |

Small pill-shaped labels. Use for version numbers, tags, categories, or status indicators.

## Grid

Subtle background grid overlay.

```tsx theme={null}
import { Grid } from '@oanim/core';

<Grid />
<Grid cellSize={40} color="rgba(255,255,255,0.08)" animated />
```

| Prop        | Type      | Default                    | Description                      |
| ----------- | --------- | -------------------------- | -------------------------------- |
| `cellSize`  | `number`  | `60`                       | Grid cell size in pixels         |
| `color`     | `string`  | `'rgba(255,255,255,0.05)'` | Line color                       |
| `lineWidth` | `number`  | `1`                        | Line width in pixels             |
| `animated`  | `boolean` | `false`                    | Animate grid with a subtle drift |

Renders a faint grid pattern. Place between `Background` and content layers for a technical/engineered aesthetic.

## Vignette

Edge-darkening overlay.

```tsx theme={null}
import { Vignette } from '@oanim/core';

<Vignette intensity={0.4} />
<Vignette intensity={0.6} color="rgba(0, 0, 30, 1)" />
```

| Prop        | Type     | Default           | Description                                     |
| ----------- | -------- | ----------------- | ----------------------------------------------- |
| `intensity` | `number` | `0.5`             | Darkness level (0 = none, 1 = fully dark edges) |
| `color`     | `string` | `'rgba(0,0,0,1)'` | Vignette color (defaults to black)              |

Place as one of the last layers to subtly draw focus to the center of the frame.

## Scene layering pattern

Combine components in this order for a polished scene:

```tsx theme={null}
<AbsoluteFill>
  {/* 1. Background */}
  <Background gradient="linear-gradient(135deg, #0a0a0a, #1a1a2e)" />

  {/* 2. Ambient elements */}
  <GlowOrb color="rgba(99, 102, 241, 0.2)" x={30} y={40} />
  <Grid />

  {/* 3. Overlays */}
  <Vignette intensity={0.4} />

  {/* 4. Content */}
  <SafeArea style={{ justifyContent: 'center', alignItems: 'center' }}>
    {/* Your animated content here */}
  </SafeArea>
</AbsoluteFill>
```