KQ-1121 · MOOD/SWIPE

Mood Swipe

A satisfaction input drawn as one face that you swipe from a frown to a grin: the mouth bends and opens, the eyes go from drooping half-moons to squinting crescents, the brows lift and the cheeks rise, all rebuilt each frame from one number on paths whose commands never change, so the morph is a real interpolation. It follows the finger 1:1, rubber-bands into a deeper frown or a wider grin past the ends, and a release is projected and lands on the nearest stop on the snap spring with its velocity (or coasts on the glide spring when snap is off), while a hum glides an octave with the mood and each stop rings a note. It is a slider: arrow keys step a stop, Page keys jump, Home and End reach frown and grin, with the same flight and sound.

KQ-1121 · MOOD/SWIPE

How was your delivery?

Fernworks · order FW-4410

okay · 3 of 5 · swipe the face

Open it on the Tactile stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/mood-swipe

Props

label: string; default —; The question being answered: the slider's accessible name.
value / defaultValue: number; default 0.5; The mood, 0 (frown) to 1 (grin). With snap on, a value between stops is shown and read at its nearest stop. Controlled or uncontrolled; a refused change flies back.
onValueChange: (value: number) => void; default —; Fires from the swipe, tap or key that changed the mood, with the new value (a stop, or a score to 2 dp with snap off).
stops: number; default 5; How many detents from frown to grin, 2 to 9. The rail's dots, the words and the note scale follow.
labels: readonly string[]; default —; A word per stop, frown first. Used when there is exactly one per stop; otherwise built-in words (Awful, Poor, Okay, Good, Great for five).
face: "filled" | "line" | "duo"; default "filled"; A solid tinted disc with dark features, an outline face in the tint, or a tinted wash with outline features.
colour: "mood" | "accent" | "ink"; default "mood"; The tint: travels from danger through warn to success with the mood, or stays the accent, or stays ink.
snap: boolean; default true; Land on stops with one crisp overshoot. Off, the face coasts and rests wherever it stops, and the value is a continuous score.
sound: boolean; default false; A hum that glides an octave with the mood while the face moves, and a note on a rising scale at each stop it reaches. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Dims the face, takes it out of the tab order and stops every swipe and key.
className: string; default —; Merged onto the outer wrapper.

Prop	Type	Default	Description
label	string	—	The question being answered: the slider's accessible name.
value / defaultValue	number	0.5	The mood, 0 (frown) to 1 (grin). With snap on, a value between stops is shown and read at its nearest stop. Controlled or uncontrolled; a refused change flies back.
onValueChange	(value: number) => void	—	Fires from the swipe, tap or key that changed the mood, with the new value (a stop, or a score to 2 dp with snap off).
stops	number	5	How many detents from frown to grin, 2 to 9. The rail's dots, the words and the note scale follow.
labels	readonly string[]	—	A word per stop, frown first. Used when there is exactly one per stop; otherwise built-in words (Awful, Poor, Okay, Good, Great for five).
face	"filled" \| "line" \| "duo"	"filled"	A solid tinted disc with dark features, an outline face in the tint, or a tinted wash with outline features.
colour	"mood" \| "accent" \| "ink"	"mood"	The tint: travels from danger through warn to success with the mood, or stays the accent, or stays ink.
snap	boolean	true	Land on stops with one crisp overshoot. Off, the face coasts and rests wherever it stops, and the value is a continuous score.
sound	boolean	false	A hum that glides an octave with the mood while the face moves, and a note on a rising scale at each stop it reaches. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Dims the face, takes it out of the tab order and stops every swipe and key.
className	string	—	Merged onto the outer wrapper.