// In your project's font loading file
import { continueRender, delayRender, staticFile } from 'remotion';

const waitForFont = delayRender();
const font = new FontFace('TikTok Sans', `url(${staticFile('fonts/TikTok Sans/TikTokSans-Variable.ttf')})`);

font.load().then(() => {
  document.fonts.add(font);
  continueRender(waitForFont);
});

import { TikTokText } from '@getbluma/tiktok-text';

<TikTokText>Hello World</TikTokText>
<TikTokText size="xl" weight="bold">Big Bold Text</TikTokText>

import { TikTokTextOutline } from '@getbluma/tiktok-text';

// Basic usage (white text, black outline)
<TikTokTextOutline>Hello World</TikTokTextOutline>

// Custom colors
<TikTokTextOutline color="#FFFF00" outlineColor="#FF0000">
  Yellow with Red Outline
</TikTokTextOutline>

// With gradient fill
<TikTokTextOutline
  gradient={{
    type: 'linear',
    angle: 90,
    stops: [
      { offset: '0%', color: '#FF0000' },
      { offset: '100%', color: '#FFFF00' }
    ]
  }}
>
  Gradient Text
</TikTokTextOutline>

import { TikTokTextBlock } from '@getbluma/tiktok-text';

// Basic usage (purple background, white text)
<TikTokTextBlock>Hello World</TikTokTextBlock>

// With preset color
<TikTokTextBlock backgroundColor="red">Warning Message</TikTokTextBlock>
<TikTokTextBlock backgroundColor="blue" size="xl">Blue Background</TikTokTextBlock>

// Step indicator style (white bg, black text)
<TikTokTextBlock backgroundColor="white" color="#000000">
  1. first step title
</TikTokTextBlock>

// Multi-line text with gooey wrap effect
<TikTokTextBlock backgroundColor="purple" size="m">
  this is a longer piece of text that will
  wrap across multiple lines with smooth
  rounded corners on each line
</TikTokTextBlock>

// Using custom hex color
<TikTokTextBlock backgroundColor="#FF69B4">Custom Pink</TikTokTextBlock>

shadow={{
  offsetX: 4,
  offsetY: 4,
  blur: 8,
  color: 'rgba(0,0,0,0.5)'
}}

gradient={{
  type: 'linear', // or 'radial'
  angle: 90,      // for linear gradients
  stops: [
    { offset: '0%', color: '#FF0000' },
    { offset: '100%', color: '#FFFF00' }
  ]
}}

import { wrapText } from '@getbluma/tiktok-text';

const lines = wrapText('Long text that needs wrapping', 20);
// Returns: ['Long text that needs', 'wrapping']