Hello

Hello recreates the Apple setup-screen welcome: a large greeting that cycles through languages — English, Japanese, French, Korean, and more — each word blurring and floating in, holding for a moment, then blurring away for the next.

Preview

import { Hello } from "@/registry/spark-ui/hello";

export default function HelloDemo() {
  return (
    <div className="flex min-h-48 w-full items-center justify-center p-6">
      <Hello />
    </div>
  );
}

Hello

Installation

$ npx shadcn@latest add https://spark-ui-olive.vercel.app/r/hello.json

Usage

import { Hello } from "@/components/hello";

export default function HelloDemo() {
  return (
    <div className="flex min-h-48 w-full items-center justify-center p-6">
      <Hello />
    </div>
  );
}

Properties

Prop	Type	Default	Description
`greetings`	`readonly string[]`	`"Hello" in ten languages`	Greetings to cycle through, in order. Pass your own list to change languages or words.
`interval`	`number`	`2000`	Milliseconds each greeting stays on screen before the next one animates in.
`className`	`string`	`—`	Additional classes for the container; use text utilities to change the greeting's size or color.

Accessibility

The greeting is decorative text; screen readers read the currently rendered word.
Under prefers-reduced-motion the blur and float animations are disabled — greetings still rotate, but swap instantly.