Apple Hello Effect

SVG writing animation inspired by Apple’s Hello screen.

Installation

terminal

pnpm dlx layro-cli add @ncdai/apple-hello-effect

npx layro-cli add @ncdai/apple-hello-effect

npx layro-cli add @ncdai/apple-hello-effect

bunx layro-cli add @ncdai/apple-hello-effect

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"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 = {