Word swap

Words that take turns in one place: the new one drops in out of a blur as the old one sinks away. Pure CSS transitions.

I build springs

Features

Every word sits in the same grid cell, so the slot is as wide as the widest word and the line never jumps.
The swap is CSS transitions on a data-state: no animation library, nothing per frame.
Controlled with index, or cycling on its own with every.

Home: the role under the nameTeacher, Developer, Researcher, Engineer: one word in place, on the hero's clock.

Get runets.

git clone https://github.com/ziyam-khan/runets

Copy these files into your project, keeping their folders.
- src/kit/word-swap.tsx
- styles/kit.css
Install what they use.
```
pnpm add react
```
Load the styles once. Bring your own base tokens, or use runets’ default theme.
```
import 'runets/styles/theme.css'
import 'runets/styles/kit.css'
```

Prop	Type	What it does
`words`	`string[]`	The words, in order.
`index`	`number`	Which word shows; wraps, so a running counter works.
`every`	`number`	Milliseconds per word when index is not given.

Only the current word is exposed; the waiting ones are aria-hidden.
If the words matter, also give the full list to assistive tech once (the hero does).
Reduced motion swaps instantly.

The code is in src/kit/word-swap.tsx in runets, MIT licensed.