Text Patterns

รวม text effect patterns — type animation, image fill text, animated fill text พร้อม reusable base components

Prerequisites — Type & Hook

Type definition + custom hook ที่ต้อง copy ก่อนใช้งาน Text components

Type Definition — types/text.type.ts

Type สำหรับ Text components ทั้งหมด — copy ไปวางที่ types/text.type.ts

useTypeAnimation — Custom Hook

Hook ที่ทำ typing effect — copy ไปวางที่ hooks/useTypeAnimation.ts (ใช้คู่กับ TextTypeAnimation)

พิมพ์ทีละตัว + ลบ + วนซ้ำ — ส่ง items array เป็น props, ไม่ต้องลง lib เพิ่ม

TextTypeAnimation — Usage

สร้าง constant แล้วส่ง items เข้า component — ปรับ speed, cursor ได้

ตัวหนังสือใหญ่ที่ใช้ภาพนิ่งเป็น fill — background-clip: text, pure CSS

ADVENTURE

TextImageFill — Usage

ส่ง text + imageSrc — ตัวหนังสือยิ่งใหญ่ยิ่งเห็นภาพชัด

เหมือน TextImageFill แต่ภาพข้างในเคลื่อนไหว — animate background-position, GPU-accelerated

OCEAN WAVE

TextAnimatedFill — Usage

ส่ง text + imageSrc + speed (slow/normal/fast) — ภาพเคลื่อนไหวใน text