KQ-1589 · BRANCH/DRAFT
Branch Draft
A headline that writes itself out loud: at each pause the candidate continuations fan down from the caret like cards hinged there, each opening on springs.snap a cascade apart, faint, with a small weight beside it. The weights flicker while it thinks, then converge — the strongest gains real typographic weight and full ink on springs.glide while the others thin, fade and drop away — and the chosen words swing up into the line and set in solid ink at their real place in the flow, so they wrap like text, before the caret moves on. With interactive, the arrow keys or the pointer pick a ghost, which gains the weight, and Tab, Enter or a click accepts it.
Gaugeworks · planner
Plan the week around your best hours, not your inbox.
Plan the week around your best hours, one block at a time.
At each pause, the arrow keys choose the next words and Tab or Enter accepts them.A calendar that protects focus time first and fits the rest around it.
weighing the next words · arrows choose, tab accepts
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/branch-draft
Props
- steps
- { text: string; alternates?: string[]; weights?: number[] }[]
- default a scripted three-step headline
- The headline: an opening, then each pause's chosen words and the alternates it weighs (weights seeded when left out, with text the strongest).
- as
- "h1" | "h2" | "h3" | "p" | "div" | "span"
- default "h2"
- The element the headline renders as.
- candidates
- number
- default 3
- How many continuations fan out at each pause, the chosen one included (2 to 5).
- pace
- number
- default 1
- Speed of the whole draft, 0.5 (deliberate) to 2 (brisk).
- ghostOpacity
- number
- default 0.45
- How faint a ghost continuation is before it is chosen, 0 to 1.
- ghostColor
- string
- default "var(--accent-bright)"
- The ghosts' colour, any CSS colour.
- showWeights
- boolean
- default true
- Show each ghost's weight beside it, flickering while it weighs.
- fan
- number
- default 3
- Degrees each ghost turns more than the one above it.
- interactive
- boolean
- default false
- Let the visitor choose: arrows or the pointer pick, Tab, Enter or a click accepts; a pick left alone is taken after a moment.
- loop
- boolean
- default true
- Write the headline again after hold; only while it is on screen.
- hold
- number
- default 2600
- How long the finished headline holds before it is written again, ms.
- trigger
- "mount" | "inView" | "manual"
- default "inView"
- When writing starts: on mount, when first on screen, or only when replayKey changes.
- delay
- number
- default 0
- Wait before writing starts, ms.
- replayKey
- string | number
- default —
- Change it to write the headline again from the start.
- onStep
- (index: number, chosen: string) => void
- default —
- Fires as each pause settles, with the step's index and the words chosen.
- onComplete
- (text: string) => void
- default —
- Fires when the headline is written, with its full text.
- className
- string
- default —
- Sets the type (size, weight) and places the headline; the ghosts and the committed words inherit it.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { text: string; alternates?: string[]; weights?: number[] }[] | a scripted three-step headline | The headline: an opening, then each pause's chosen words and the alternates it weighs (weights seeded when left out, with text the strongest). |
| as | "h1" | "h2" | "h3" | "p" | "div" | "span" | "h2" | The element the headline renders as. |
| candidates | number | 3 | How many continuations fan out at each pause, the chosen one included (2 to 5). |
| pace | number | 1 | Speed of the whole draft, 0.5 (deliberate) to 2 (brisk). |
| ghostOpacity | number | 0.45 | How faint a ghost continuation is before it is chosen, 0 to 1. |
| ghostColor | string | "var(--accent-bright)" | The ghosts' colour, any CSS colour. |
| showWeights | boolean | true | Show each ghost's weight beside it, flickering while it weighs. |
| fan | number | 3 | Degrees each ghost turns more than the one above it. |
| interactive | boolean | false | Let the visitor choose: arrows or the pointer pick, Tab, Enter or a click accepts; a pick left alone is taken after a moment. |
| loop | boolean | true | Write the headline again after hold; only while it is on screen. |
| hold | number | 2600 | How long the finished headline holds before it is written again, ms. |
| trigger | "mount" | "inView" | "manual" | "inView" | When writing starts: on mount, when first on screen, or only when replayKey changes. |
| delay | number | 0 | Wait before writing starts, ms. |
| replayKey | string | number | — | Change it to write the headline again from the start. |
| onStep | (index: number, chosen: string) => void | — | Fires as each pause settles, with the step's index and the words chosen. |
| onComplete | (text: string) => void | — | Fires when the headline is written, with its full text. |
| className | string | — | Sets the type (size, weight) and places the headline; the ghosts and the committed words inherit it. |