Kinetiq

KQ-1365 · DECK/SHUFFLE

Deck Shuffle

Every letter is a little playing card dealt face down; the deal riffles across the line, each card lifting on the snap spring and turning over and over in 3D through seeded random cards of its own case until the last half-turn shows its letter, the final quarter-turn handing its speed to the snap spring so it lands flat with one wobble while its lift drops on recoil and the drop shadow tightens. Pointing at a word riffles it again, a tap does on touch, and a keyboard handle riffles the whole line with Enter or one word at a time with Left and Right.

KQ-1365 · DECK/SHUFFLE

Waylight Card Room · Friday

Shuffle up and deal.

Enter shuffles the whole line; Left and Right shuffle one word at a time.

Doors at eight. House rules, no stakes.

dealing · cards turning

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/deck-shuffle

Props

children
string
default —
The line, as a string. Wins over text.
text
string
default —
The line, when it is not given as children.
as
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"
default "p"
The element that carries the line.
riffles
number
default 4
How many random cards each letter turns through before its own, 1 to 8.
spread
number
default 500
How long the riffle takes to spread from the first letter to the last, ms.
speed
number
default 9
Card turns a second while riffling.
glyphs
string
default ""
The deck the random cards are drawn from; empty draws letters of the same case.
seed
number
default 0
Seed for the cards drawn and the deal's tilt.
cards
boolean
default true
Draw each letter on a card tile; false flips bare letters.
tilt
number
default 1.5
Largest hand-dealt tilt of a card, degrees.
lift
number
default 0.14
How high a card lifts off the table while it riffles, em.
face
string
default "var(--popover)"
The card face, any CSS colour.
back
string
default "var(--accent-bright)"
The card back's pattern, any CSS colour.
interactive
boolean
default true
Pointing at a word, tapping it or the keys riffle it again.
trigger
"mount" | "inView" | "hover" | "manual"
default "inView"
When the deal plays.
once
boolean
default true
Play once, or again each time it re-enters view or is hovered.
delay
number
default 0
Wait before the deal, ms.
play
boolean
default false
With trigger "manual": true deals, false turns every card face down.
sound
boolean
default false
A soft card-on-felt sound as each card the visitor riffled lands.
onComplete
() => void
default —
The deal has landed, every card face up.
className
string
default —
Classes for the root; card sizes are in em of its font size.