Typography

​

AnimatedCharacters

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

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

​

Props

​

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

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

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

​

Props

​

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

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

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

​

Props

​

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