KQ-1551 · BLADE/TYPE
Blade Type
A headline cut from stiff card that a drag cuts like a blade: a bright streak follows the pointer and every letter it passes through splits exactly along the line where the blade entered and left it, the upper piece sliding down the cut on springs.glide with the blade's speed, then dropping and tipping a little on springs.recoil while the staying piece flinches on springs.flick. After the heal delay the pieces draw back together on springs.snap, one crisp overshoot as they meet, and the seam flashes and cools to a faint mark that fades away. Enter or Space makes one diagonal cut across the whole headline, a tap nicks the letter under it, and a silent diagonal cut on arrival shows what it does.
Coldbrook Paper Co. · 600gsm board
Cut clean, mended clean
Drag across the headline to cut it, or press Enter for a diagonal cut.Heavy board for the boxes, sleeves and covers that have to last.
whole · drag across the headline to cut it
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/blade-type
Props
- text
- string
- default —
- The headline.
- as
- "h1" | "h2" | "h3" | "p" | "div"
- default "h2"
- The element rendered.
- gravity
- number
- default 0.5
- How far the cut pieces slide down the cut and drop, 0 to 1.
- healDelay
- number
- default 900
- How long the pieces stay apart before they draw back together, ms.
- thickness
- number
- default 2
- Depth of the card's cut edge, px.
- ink
- string
- default "currentColor"
- Face colour of the card.
- edgeColor
- string
- default —
- Colour of the card's edge; defaults to the ink mixed toward the page.
- seamColor
- string
- default "oklch(from var(--warn) 0.8 0.13 h)"
- Colour of the blade's streak and the mended seam.
- scar
- number
- default 3200
- How long the faint mark stays after mending, ms; 0 leaves none.
- angle
- number
- default 14
- Slope of the keyboard's and the arrival's diagonal cut, degrees; flattened when needed so it crosses every line.
- trigger
- "mount" | "inView" | "manual"
- default "inView"
- When the arrival cut runs, to show what the headline does; manual never runs it.
- once
- boolean
- default true
- Run the arrival cut once, or on every return to view.
- delay
- number
- default 350
- Wait before the arrival cut, ms.
- replayKey
- string | number
- default —
- Any change runs the diagonal cut.
- interactive
- boolean
- default true
- Dragging, tapping and keys cut the headline.
- disabled
- boolean
- default false
- Nothing cuts.
- sound
- boolean
- default false
- A swish for each stroke the visitor makes, pitched by its speed. Off unless asked for.
- onCut
- (letters: number) => void
- default —
- A stroke finished: how many letters it split.
- onHeal
- () => void
- default —
- Every open cut has mended.
- className
- string
- default —
- Size and type; the slide and drop are in em.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The headline. |
| as | "h1" | "h2" | "h3" | "p" | "div" | "h2" | The element rendered. |
| gravity | number | 0.5 | How far the cut pieces slide down the cut and drop, 0 to 1. |
| healDelay | number | 900 | How long the pieces stay apart before they draw back together, ms. |
| thickness | number | 2 | Depth of the card's cut edge, px. |
| ink | string | "currentColor" | Face colour of the card. |
| edgeColor | string | — | Colour of the card's edge; defaults to the ink mixed toward the page. |
| seamColor | string | "oklch(from var(--warn) 0.8 0.13 h)" | Colour of the blade's streak and the mended seam. |
| scar | number | 3200 | How long the faint mark stays after mending, ms; 0 leaves none. |
| angle | number | 14 | Slope of the keyboard's and the arrival's diagonal cut, degrees; flattened when needed so it crosses every line. |
| trigger | "mount" | "inView" | "manual" | "inView" | When the arrival cut runs, to show what the headline does; manual never runs it. |
| once | boolean | true | Run the arrival cut once, or on every return to view. |
| delay | number | 350 | Wait before the arrival cut, ms. |
| replayKey | string | number | — | Any change runs the diagonal cut. |
| interactive | boolean | true | Dragging, tapping and keys cut the headline. |
| disabled | boolean | false | Nothing cuts. |
| sound | boolean | false | A swish for each stroke the visitor makes, pitched by its speed. Off unless asked for. |
| onCut | (letters: number) => void | — | A stroke finished: how many letters it split. |
| onHeal | () => void | — | Every open cut has mended. |
| className | string | — | Size and type; the slide and drop are in em. |