# SoftType

A variable-font engine in CSS — weight and width oscillate through the Archivo axes.

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

## Usage

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

export function Engine() {
  return <SoftType text="Aa" mode="both" speed={1} />;
}
```

## 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/soft-type
```

## Props

- `text`: `string` (default `"Aa"`). The specimen glyphs.
- `mode`: `"weight" | "width" | "both"` (default `"weight"`). Which axes oscillate.
- `speed`: `number` (default `1`). Oscillation rate multiplier.
- `min / max`: `number` (default `100 / 900`). Weight range.

## Accessibility

The type specimen carries role=img and a descriptive label.

## Motion

CSS keyframes interpolate font-variation-settings. Reduced motion holds the actual font axes still.