UI Components

import { SafeArea } from '@oanim/core';

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

import { Background, palettes } from '@oanim/core';

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

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

import { GlowOrb } from '@oanim/core';

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

import { Terminal } from '@oanim/core';

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

import { Card } from '@oanim/core';

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

import { Badge } from '@oanim/core';

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

import { Grid } from '@oanim/core';

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

import { Vignette } from '@oanim/core';

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

<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>