# GhostWord

An oversized outlined word that fills with accent when hovered — built for footers and chapter markers.

- Family: Type, imported from `mizu-ui` or `mizu-ui/type`
- Docs: https://mizu.user64bit.world/components/ghost-word
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/type/GhostWord.tsx

## Usage

```tsx
import { GhostWord } from "mizu-ui";

export function Footer() {
  return <GhostWord text="MIZU." />;
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/ghost-word
```

## Props

- `text`: `string`. The word.
- `fill`: `"accent" | "paper"` (default `"accent"`). Hover fill color.
- `size`: `string | number` (default `"clamp(4rem, 12vw, 9rem)"`). Font size, any CSS length; inherit takes the surrounding text's.

## Accessibility

aria-hidden — pair with an sr-only heading for the same text.

## Motion

500ms fill and stroke-color transition with expo letter-spacing settle.