Apple Hello Effect
Create a "Xin chào" and "Hello" writing effect inspired by Apple using Motion for React.
Loading...
import { AppleHelloVietnameseEffect } from "@/components/ncdai/apple-hello-effect";
export function VietnameseDemo() {
return <AppleHelloVietnameseEffect />;
}Loading...
import { AppleHelloEnglishEffect } from "@/components/ncdai/apple-hello-effect";
export function EnglishDemo() {
return <AppleHelloEnglishEffect />;
}Installation
pnpm dlx shadcn add @ncdai/apple-hello-effect
Usage
import {
AppleHelloVietnameseEffect,
AppleHelloEnglishEffect,
} from "@/components/ncdai/apple-hello-effect";<AppleHelloVietnameseEffect />
<AppleHelloEnglishEffect />Props
| 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. |
Acknowledgments
- 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