GhostWord
An oversized outlined word that fills with accent when hovered — built for footers and chapter markers.
Live — this one is real
Hover the word — it fills
Usage
import { GhostWord } from "mizu-ui";
export function Footer() {
return <GhostWord text="MIZU." />;
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect type/GhostWord.tsx
Source is included in the npm package under src/type/GhostWord.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The word. |
| fill | "accent" | "paper" | "accent" | Hover fill color. |
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.