Writing Effect inspired by Apple

Create a "Xin chào" and "Hello" writing effect inspired by Apple using Motion for React.

Installation

pnpm dlx shadcn@latest add https://chanhdai.com/r/apple-hello-effect.json

import {
  AppleHelloVietnameseEffect,
  AppleHelloEnglishEffect,
} from "@/components/apple-hello-effect";

<AppleHelloVietnameseEffect />
<AppleHelloEnglishEffect />

Prop	Type	Default	Description
`speed`	`number`	1	A multiplier that affects the animation duration. Higher values make the animation slower.
`onAnimationComplete`	`() => void`	`undefined`	Callback function triggered when the animation completes.

Official Apple Hello Lettering, extracted from macOS Sonoma in SVG Form: https://www.figma.com/community/file/1414773009964314315/official-apple-hello-lettering
A modern animation library for JavaScript and React: https://motion.dev
Run your own component registry: https://ui.shadcn.com/docs/registry