Apple Hello Effect

import { AppleHelloEffect } from '@hanzo/ui'

Default

The word "Hello" revealing itself one letter at a time.

Hello

export function Default() {
  return (
    <YStack items="center" justify="center" minH={200}>
      <AppleHelloEffect />
    </YStack>
  )
}

Custom text

Any string works, split the same way.

Hanzo

export function CustomText() {
  return (
    <YStack items="center" justify="center" minH={200}>
      <AppleHelloEffect text="Hanzo" />
    </YStack>
  )
}

Faster

A shorter `duration` makes each letter's rise snappier.

Fast

export function Faster() {
  return (
    <YStack items="center" justify="center" minH={200}>
      <AppleHelloEffect text="Fast" duration={0.6} />
    </YStack>
  )
}

Types

export type AppleHelloEffectProps = React.ComponentProps<'div'> & {
  /** The string to reveal, one letter at a time. */
  text?: string
  /** Seconds each letter's own rise takes. */
  duration?: number
}

Exports

AppleHelloEffecttype AppleHelloEffectProps