# Apple Hello Effect
SVG writing animation inspired by Apple’s “Hello” screen.
```tsx
"use client"
import { useState } from "react"
import { AnimatePresence } from "motion/react"
import { AppleHelloEffectEnglish } from "@/components/apple-hello-effect/apple-hello-effect-english"
import { AppleHelloEffectHindi } from "@/components/apple-hello-effect/apple-hello-effect-hindi"
import { AppleHelloEffectSpanish } from "@/components/apple-hello-effect/apple-hello-effect-spanish"
import { AppleHelloEffectVietnamese } from "@/components/apple-hello-effect/apple-hello-effect-vietnamese"
export default function AppleHelloEffectLanguagesDemo() {
const [index, setIndex] = useState(0)
const handleAnimationEnd = () => {
setIndex((prevIndex) => (prevIndex + 1) % 4)
}
const demos = [
,
,
,
,
]
return {demos[index]}
}
```
## Installation
For English:
```bash
npx shadcn@latest add @ncdai/apple-hello-effect
```
For Hindi:
```bash
npx shadcn@latest add @ncdai/apple-hello-effect-hindi
```
For Spanish:
```bash
npx shadcn@latest add @ncdai/apple-hello-effect-spanish
```
For Vietnamese:
```bash
npx shadcn@latest add @ncdai/apple-hello-effect-vietnamese
```
Install the following dependencies
```bash
npm install motion clsx tailwind-merge
```
Add a cn helper
```ts title="lib/utils.ts"
import type { ClassValue } from "clsx"
import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export const cn = (...inputs: ClassValue[]) => {
return twMerge(clsx(inputs))
}
export function absoluteUrl(path: string) {
return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
}
```
Copy and paste the following code into your project
For English:
```tsx title="components/apple-hello-effect-english.tsx"
"use client"
import type { ComponentProps } from "react"
import type { TargetAndTransition } from "motion/react"
import { motion } from "motion/react"
import { cn } from "@/lib/utils"
const initialProps: TargetAndTransition = {
pathLength: 0,
opacity: 0,
}
const animateProps: TargetAndTransition = {
pathLength: 1,
opacity: 1,
}
export type AppleHelloEffectEnglishProps = Omit<
ComponentProps,
"durationScale" | "onAnimationComplete"
> & {
/**
* Scales the duration and delay of the handwriting animation.
* Values below 1 speed up, values above 1 slow down.
* @defaultValue 1
*/
durationScale?: number
/** Called when the full handwriting animation completes. */
onAnimationComplete?: () => void
}
export function AppleHelloEffectEnglish({
className,
durationScale = 1,
onAnimationComplete,
...props
}: AppleHelloEffectEnglishProps) {
const calc = (x: number) => x * durationScale
return (
hello
{/* h1 */}
{/* h2, ello */}
)
}
```
For Hindi:
```tsx title="components/apple-hello-effect-hindi.tsx"
"use client"
import type { ComponentProps } from "react"
import type { TargetAndTransition } from "motion/react"
import { motion } from "motion/react"
import { cn } from "@/lib/utils"
const initialProps: TargetAndTransition = {
pathLength: 0,
opacity: 0,
}
const animateProps: TargetAndTransition = {
pathLength: 1,
opacity: 1,
}
export type AppleHelloEffectProps = Omit<
ComponentProps,
"durationScale" | "onAnimationComplete"
> & {
/**
* Scales the duration and delay of the handwriting animation.
* Values below 1 speed up, values above 1 slow down.
* @defaultValue 0.8
*/
durationScale?: number
/** Called when the full handwriting animation completes. */
onAnimationComplete?: () => void
}
export function AppleHelloEffectHindi({
className,
durationScale = 0.8,
onAnimationComplete,
...props
}: AppleHelloEffectProps) {
const calc = (x: number) => x * durationScale
return (
नमस्ते
)
}
```
For Spanish:
```tsx title="components/apple-hello-effect-spanish.tsx"
"use client"
import type { ComponentProps } from "react"
import type { TargetAndTransition } from "motion/react"
import { motion } from "motion/react"
import { cn } from "@/lib/utils"
const initialProps: TargetAndTransition = {
pathLength: 0,
opacity: 0,
}
const animateProps: TargetAndTransition = {
pathLength: 1,
opacity: 1,
}
export type AppleHelloEffectProps = Omit<
ComponentProps,
"durationScale" | "onAnimationComplete"
> & {
/**
* Scales the duration and delay of the handwriting animation.
* Values below 1 speed up, values above 1 slow down.
* @defaultValue 1
*/
durationScale?: number
/** Called when the full handwriting animation completes. */
onAnimationComplete?: () => void
}
export function AppleHelloEffectSpanish({
className,
durationScale = 1,
onAnimationComplete,
...props
}: AppleHelloEffectProps) {
const calc = (x: number) => x * durationScale
return (
hola
)
}
```
For Vietnamese:
```tsx title="components/apple-hello-effect-vietnamese.tsx"
"use client"
import type { ComponentProps } from "react"
import type { TargetAndTransition } from "motion/react"
import { motion } from "motion/react"
import { cn } from "@/lib/utils"
const initialProps: TargetAndTransition = {
pathLength: 0,
opacity: 0,
}
const animateProps: TargetAndTransition = {
pathLength: 1,
opacity: 1,
}
export type AppleHelloEffectProps = Omit<
ComponentProps,
"durationScale" | "onAnimationComplete"
> & {
/**
* Scales the duration and delay of the handwriting animation.
* Values below 1 speed up, values above 1 slow down.
* @defaultValue 1
*/
durationScale?: number
/** Called when the full handwriting animation completes. */
onAnimationComplete?: () => void
}
export function AppleHelloEffectVietnamese({
className,
durationScale = 1,
onAnimationComplete,
...props
}: AppleHelloEffectProps) {
const calc = (x: number) => x * durationScale
return (
xin chào
{/* x1 */}
{/* x2 */}
{/* i */}
{/* n1 */}
{/* n2 */}
{/* c, h1 */}
{/* h2 */}
{/* a1 */}
{/* a2, o */}
{/* sign */}
)
}
```
Update the import paths to match your project setup
## Usage
```tsx
import { AppleHelloEffectEnglish } from "@/components/apple-hello-effect-english"
import { AppleHelloEffectHindi } from "@/components/apple-hello-effect-hindi"
import { AppleHelloEffectSpanish } from "@/components/apple-hello-effect-spanish"
import { AppleHelloEffectVietnamese } from "@/components/apple-hello-effect-vietnamese"
```
```tsx
```
## API Reference
void) | undefined",
"simplifiedType": "function",
"required": false,
"deprecated": false
},
{
"name": "durationScale",
"description": "Scales the duration and delay of the handwriting animation.\nValues below 1 speed up, values above 1 slow down.",
"tags": [
{
"name": "defaultValue",
"text": "1"
}
],
"type": "number | undefined",
"simplifiedType": "number",
"required": false,
"deprecated": false
}
]
}}
/>
## Credits
* [JaceThings](https://github.com/JaceThings/SF-Hello)
## References
* [SVG pathLength](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength)
* [React Motion component](https://motion.dev/docs/react-motion-component)
Last updated on April 5, 2026