Animated handwritten 'hello' text in multiple languages with a polished Apple-inspired motion effect.
motion-sv
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
apple-hello-effect-english.svelte
apple-hello-effect-hindi.svelte
apple-hello-effect-spanish.svelte
apple-hello-effect-vietnamese.svelte
index.ts
Usage
preview.svelte
Features
- SVG writing/path animation inspired by Apple's "Hello" welcome screen
- Ships with English, Hindi, Spanish, and Vietnamese language variants
- onAnimationComplete callback to trigger logic after the animation finishes
- durationScale prop to control animation speed
Examples
English
Hindi
Spanish
Vietnamese
Custom colors
Props
AppleHelloEffect
Multilingual animated greeting text with Apple-style handwriting motion.
| Name | Type | Default | Description |
|---|---|---|---|
class | string | '' | Additional classes applied to the underlying SVG element. |
durationScale | number | 1 | Scales the overall handwriting animation speed for the current language variation. |
onAnimationComplete | () => void | undefined | Called when the full animation completes. |