Skip to main content
8 UI components for building polished scene layouts.

​
SafeArea

Title-safe padding container. Keeps content within broadcast-safe margins (~5% on all sides). 
import { SafeArea } from '@oanim/core';

<SafeArea style={{ justifyContent: 'center', alignItems: 'center' }}>
  <div>Content stays within safe margins</div>
</SafeArea>
PropTypeDefaultDescription
childrenReactNoderequiredContent to render inside safe margins
mode'title' | 'action''title'Safe area mode — title for tighter margins, action for wider
styleCSSProperties{}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. 
import { Background, palettes } from '@oanim/core';

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

// Solid background
<Background color="#0a0a0a" />
PropTypeDefaultDescription
gradientstring—CSS gradient string
colorstring—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. 
import { GlowOrb } from '@oanim/core';

<GlowOrb color="rgba(99, 102, 241, 0.2)" x={30} y={40} />
PropTypeDefaultDescription
colorstringrequiredGlow color (use with alpha for subtlety)
xnumberrequiredHorizontal position (percentage)
ynumberrequiredVertical position (percentage)
sizenumber300Orb diameter in pixels
driftnumber20Maximum drift distance in pixels
opacitynumber1Opacity 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. 
import { Terminal } from '@oanim/core';

<Terminal
  lines={[
    'npm install @oanim/core',
    'npx oanim init my-video',
    'npx remotion studio',
  ]}
  delay={0.3}
/>
PropTypeDefaultDescription
linesstring[]requiredLines to type out sequentially
delaynumber0Seconds before typing starts
charsPerSecondnumber40Typing speed
titlestring'Terminal'Title bar text
bgstring'rgba(0,0,0,0.8)'Background color
textColorstring'#e2e8f0'Text color
fontSizenumber18Font size in pixels
styleCSSProperties{}Additional styles on the container
Renders a dark terminal chrome with a title bar and monospace font.

​
Card

Glassmorphism card with spring entrance animation. 
import { Card } from '@oanim/core';

<Card>
  <h2>Feature Title</h2>
  <p>Feature description goes here.</p>
</Card>
PropTypeDefaultDescription
childrenReactNoderequiredCard content
bgstring'rgba(255,255,255,0.05)'Background color
borderColorstring'rgba(255,255,255,0.1)'Border color
paddingnumber24Inner padding in pixels
borderRadiusnumber12Border radius in pixels
springSpringPreset'snappy'Entrance animation spring
styleCSSProperties{}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. 
import { Badge } from '@oanim/core';

<Badge>NEW</Badge>
<Badge bg="#6366f1" textColor="#fff">v2.0</Badge>
PropTypeDefaultDescription
childrenReactNoderequiredBadge content
bgstring'rgba(255,255,255,0.1)'Background color
textColorstring'#e2e8f0'Text color
borderColorstring'rgba(255,255,255,0.2)'Border color
fontSizenumber14Font size in pixels
springSpringPreset'snappy'Entrance animation spring
styleCSSProperties{}Additional styles
Small pill-shaped labels. Use for version numbers, tags, categories, or status indicators.

​
Grid

Subtle background grid overlay. 
import { Grid } from '@oanim/core';

<Grid />
<Grid cellSize={40} color="rgba(255,255,255,0.08)" animated />
PropTypeDefaultDescription
cellSizenumber60Grid cell size in pixels
colorstring'rgba(255,255,255,0.05)'Line color
lineWidthnumber1Line width in pixels
animatedbooleanfalseAnimate 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. 
import { Vignette } from '@oanim/core';

<Vignette intensity={0.4} />
<Vignette intensity={0.6} color="rgba(0, 0, 30, 1)" />
PropTypeDefaultDescription
intensitynumber0.5Darkness level (0 = none, 1 = fully dark edges)
colorstring'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: 
<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>