Skip to main content
Three typography components for animated text in your Remotion compositions.

​
AnimatedCharacters

Staggered per-character spring entrance. Each character animates in individually with configurable delay and spring physics. 
import { AnimatedCharacters } from '@oanim/core';

<AnimatedCharacters
  text="Hello World"
  delay={0.2}
  stagger={0.03}
  spring="snappy"
/>

​
Props

PropTypeDefaultDescription
textstringrequiredText to animate
delaynumber0Seconds before first character appears
staggernumber0.03Seconds between each character
springSpringPreset'snappy'Spring preset for each character
styleCSSProperties{}Additional styles on the text container

​
Tips

  • Use for headings and hero text where you want a premium feel
  • Keep stagger between 0.02-0.05 for readable pacing
  • Pair with 'bouncy' spring for playful headers or 'smooth' for formal text

​
TypewriterText

Character-by-character typing reveal with an optional blinking cursor. 
import { TypewriterText } from '@oanim/core';

<TypewriterText
  text="npm install @oanim/core"
  delay={0.5}
  charsPerSecond={20}
  showCursor={true}
/>

​
Props

PropTypeDefaultDescription
textstringrequiredText to type out
delaynumber0Seconds before typing starts
charsPerSecondnumber20Typing speed
showCursorbooleantrueShow blinking cursor
cursorCharstring'▋'Custom cursor character
styleCSSProperties{}Additional styles on the text container

​
Tips

  • Use for terminal commands, code snippets, or any “typing” effect
  • Pair with the Terminal component for a terminal window look
  • Adjust charsPerSecond based on text length — longer text benefits from faster typing

​
CountUp

Animated number counter with optional prefix, suffix, and decimal formatting. 
import { CountUp } from '@oanim/core';

<CountUp
  from={0}
  to={10000}
  delay={0.3}
  duration={1}
  prefix="$"
  suffix="+"
  decimals={0}
/>

​
Props

PropTypeDefaultDescription
fromnumber0Starting value
tonumberrequiredEnding value
delaynumber0Seconds before count starts
durationnumber1Duration of the count animation in seconds
prefixstring''Text before the number (e.g. $)
suffixstring''Text after the number (e.g. %, +)
decimalsnumber0Number of decimal places
styleCSSProperties{}Additional styles on the number container

​
Tips

  • Use for metrics, statistics, and data-driven scenes
  • Pair with Card component for a dashboard look
  • Combine with fadeUp on the container for a staggered entrance with the count