---
name: text-animations
description: "เอกสารสำหรับ Text Animations ใช้เป็นคำอธิบาย แนวทาง หรือข้อมูลอ้างอิงสำหรับงานผลิตสื่อ วิดีโอ เสียง Podcast ภาพเคลื่อนไหว และคอนเทนต์หลายแพลตฟอร์ม ในหัวข้อนี้"
metadata:
  tags: typography, text, typewriter, highlighter ken
---

## Text animations

Based on `useCurrentFrame()`, reduce the string character by character to create a typewriter effect.

## Typewriter Effect

See [Typewriter](assets/text-animations-typewriter.tsx) for an advanced example with a blinking cursor and a pause after the first sentence.

Always use string slicing for typewriter effects. Never use per-character opacity.

## Word Highlighting

See [Word Highlight](assets/text-animations-word-highlight.tsx) for an example for how a word highlight is animated, like with a highlighter pen.
