KQ-1548 · ANAGRAM/SORT
Anagram Sort
The headline arrives as a seeded anagram of itself — each word's letters jumbled, stray ones in a softer ink — and sorts itself back in beats: a letter hops over its neighbour on an arc whose height rides its horizontal springs.snap progress, so the spring's one overshoot lands it a hair past its slot and back, while the letter it crosses dips under and the letters between glide aside on springs.glide; each landing squashes on the baseline and a letter that reaches home develops to full ink. The method sets the rhythm — every out-of-order pair at once, one letter at a time leaping into place, or one sweep along the line — and a press, Enter or Space tosses the letters into a new jumble and sorts them again.
Fieldline Mail · overnight
Sorted before you wake
Press Enter to shuffle the letters and sort them again.Receipts, travel and newsletters, filed by the time the coffee is ready.
sorting · 0 of 0 letters home
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/anagram-sort
Props
- text
- string
- default —
- The headline. Letters only ever travel inside their own word.
- as
- "h1" | "h2" | "h3" | "p" | "div" | "span"
- default "h2"
- The element rendered.
- method
- "pairs" | "place" | "sweep"
- default "pairs"
- How the jumble sorts: every out-of-order neighbour pair on each beat, each slot's letter leaping into place one at a time, or one pass along the line hopping each letter back.
- swapSpeed
- number
- default 1
- Tempo of hops and beats, 0.5 to 2.5.
- arcHeight
- number
- default 0.55
- Peak height of a hop, em, 0 to 1. The same room is kept above the first line.
- duration
- number
- default 340
- Time scale of a hop's spring, ms; its damping ratio is kept.
- stagger
- number
- default 140
- Base gap between beats, ms at speed 1.
- delay
- number
- default 0
- Wait before the sort starts, ms.
- settle
- number
- default 0.5
- How hard a letter lands — squash and overshoot, 0 to 1.
- seed
- number
- default 1
- Which anagram the headline starts as.
- color
- string
- default "currentColor"
- Ink of a letter in its place.
- strayColor
- string
- default "color-mix(in oklab, currentColor 42%, transparent)"
- Ink of a letter out of place.
- trigger
- "mount" | "inView" | "hover" | "manual"
- default "inView"
- What starts the sort.
- play
- boolean
- default —
- Manual trigger: true sorts, false tosses the letters back into a jumble.
- once
- boolean
- default true
- Sort once; false jumbles again when it leaves view or the hover ends.
- interactive
- boolean
- default true
- A press, Enter or Space tosses the letters and sorts them again.
- replayKey
- string | number
- default —
- Any change tosses the letters into a new jumble and sorts them again.
- sound
- boolean
- default false
- A tick on every landing of a sort the visitor started, rising as letters reach home. Off unless asked for.
- onProgress
- (home: number, total: number) => void
- default —
- Letters in their place, out of the letters that move: on arrival and from every landing.
- onComplete
- () => void
- default —
- Every letter is home and settled.
- className
- string
- default —
- Size and type; hops and padding are in em.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The headline. Letters only ever travel inside their own word. |
| as | "h1" | "h2" | "h3" | "p" | "div" | "span" | "h2" | The element rendered. |
| method | "pairs" | "place" | "sweep" | "pairs" | How the jumble sorts: every out-of-order neighbour pair on each beat, each slot's letter leaping into place one at a time, or one pass along the line hopping each letter back. |
| swapSpeed | number | 1 | Tempo of hops and beats, 0.5 to 2.5. |
| arcHeight | number | 0.55 | Peak height of a hop, em, 0 to 1. The same room is kept above the first line. |
| duration | number | 340 | Time scale of a hop's spring, ms; its damping ratio is kept. |
| stagger | number | 140 | Base gap between beats, ms at speed 1. |
| delay | number | 0 | Wait before the sort starts, ms. |
| settle | number | 0.5 | How hard a letter lands — squash and overshoot, 0 to 1. |
| seed | number | 1 | Which anagram the headline starts as. |
| color | string | "currentColor" | Ink of a letter in its place. |
| strayColor | string | "color-mix(in oklab, currentColor 42%, transparent)" | Ink of a letter out of place. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | What starts the sort. |
| play | boolean | — | Manual trigger: true sorts, false tosses the letters back into a jumble. |
| once | boolean | true | Sort once; false jumbles again when it leaves view or the hover ends. |
| interactive | boolean | true | A press, Enter or Space tosses the letters and sorts them again. |
| replayKey | string | number | — | Any change tosses the letters into a new jumble and sorts them again. |
| sound | boolean | false | A tick on every landing of a sort the visitor started, rising as letters reach home. Off unless asked for. |
| onProgress | (home: number, total: number) => void | — | Letters in their place, out of the letters that move: on arrival and from every landing. |
| onComplete | () => void | — | Every letter is home and settled. |
| className | string | — | Size and type; hops and padding are in em. |