Mood Scale

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/mood-scale.tsx.

Install the pastetaste component "Mood Scale" (mood-scale) into this Next.js project and use it.

What it is: A feedback card with a stepped slider: a two-eyed face morphs from frown to smile, the surface blends to each step's colour and a big word slides past with motion blur. Note field and thank-you state included.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/mood-scale.json
   (it writes components/pastetaste/mood-scale.tsx; install any npm packages it reports).
2. Import it: import { MoodScale } from "@/components/pastetaste/mood-scale" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- question: string = 'How was your order?' — The question above the face; also the slider's accessible name.
- options: MoodOption[] = Bad / Not bad / Good — Steps from worst to best (2 to 7): label, optional word, color and ink (#rrggbb), optional thanks, thanksBody and prompt. The face is spread evenly across the steps.
- value / defaultValue: number = middle step — Selected step index, controlled or initial.
- onChange: (index: number, option: MoodOption) => void — Called when the step changes, on release or key press (not on every drag frame).
- onSubmit: (result: { index, option, note }) => void — Called when the answer is sent; the card then shows its thank-you state.
- note: boolean = true — Offer an Add note field before sending.
- noteMaxLength: number = 280 — Maximum note length; a counter shows in the field.
- submitLabel / noteLabel / doneLabel: string = 'Send' / 'Add note' / 'Done' — Button texts.
- onDone: () => void — Shows a button on the thank-you state and calls this when pressed.
- onClose: () => void — Shows a close button in the top corner.
- className / style: string / CSSProperties — On the card. Give it a min-height (or a height) to let the face area grow.

Live preview: https://pastetaste.com/c/mood-scale
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 11