feat(onboarding): persona quiz spotlight-stage redesign#6160
Open
tsahimatsliah wants to merge 11 commits into
Open
feat(onboarding): persona quiz spotlight-stage redesign#6160tsahimatsliah wants to merge 11 commits into
tsahimatsliah wants to merge 11 commits into
Conversation
Rework the buttons and interactions in the Patchy persona quiz step for a gamified, slot-machine feel: - Primary CTAs gain a breathing neon halo + shine sweep on hover, scale on press - Yes/No answers behave like tactile chips with color-coded glow (avocado / ketchup) and icon tint; preserve the downvote's 180° rotation on hover so the arrow no longer flips to point up - Persona/option/picker/modifier rows get a reach-for-it glow, emoji wink and press feedback; selected modifier ticks pop in - Progress bar fills with an animated gold→grape shimmer All effects use design-system tokens and are disabled under prefers-reduced-motion. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…kdrop Default-UI refresh on top of the casino polish: - Migrate every button from the v1 `Button` to `ButtonV2` (new button guidelines): per-size radii (rounded-16/14/12), focus rings, antialiased labels, 150ms transitions. - Fill the primary CTAs with brand `cabbage` (ButtonColor.Cabbage) so the "play" action reads as a confident purple button instead of plain white, paired with the existing neon halo + shine. - Add a scoped casino "stage" backdrop behind the step: layered radial glows (cabbage spotlight, bacon/cheese felt corners) plus a faint dotted felt texture, so the page reads like a lit game table. Applied via QuizStage and the picker only — shared funnel background infra is untouched. All colors use design-system tokens; backdrop/animations respect prefers-reduced-motion. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Reworks the look and feel based on review: - Full-bleed "spotlight stage" backdrop via fixed positioning, so it no longer gets clipped by the content column. Replaces the flat funnel gradient with a soft cabbage spotlight from the top, a warm pool of lamp-light at the base, a vignette that pulls focus to the centre, a slow-drifting aurora and faint twinkling "magic dust". Demo background switched to Blank so the stage owns the look. - Primary CTAs are white again for maximum contrast, lit by a soft luminous halo (white light with a faint cabbage rim) instead of a purple fill. - Speech bubble is now a frosted-glass panel (translucent, blurred, glass top-edge highlight, rounded-24) in place of the flat bordered box. All colors use design-system tokens; backdrop + animations respect prefers-reduced-motion. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah
changed the title
Addressing review feedback on the spotlight stage: - Magic background: a second cooler aurora that drifts and breathes out of phase with the cabbage one, so the spotlight slowly shifts purple → blue, plus floating "magic dust" specks that rise from the lamp and fade. - Thought-cloud connector: glassy trailing circles from the speech panel toward Patchy (up on mobile, out to the right on laptop) so the message reads as coming from him. - Yes / No are now prominent glass answer tiles with a tinted icon badge that fills with its verdict colour on hover (avocado / ketchup), replacing the thin secondary outline. - "Not sure" redesigned as a dashed ghost pill — clearly visible yet plainly secondary to the answer tiles. All colors use design-system tokens; new animations respect prefers-reduced-motion (dust is hidden entirely). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Turns the flat reveal into the payoff of the flow: - The persona emoji becomes a hero "amulet" — a glowing coin in the persona's brand colour, ringed by spinning light spokes, with a shockwave ring and a brand-coloured confetti burst on entrance. Fixes the awkward emoji-at-the-end of the sentence. - Re-sequenced entrance: emblem springs in → shockwave → confetti → kicker → name → tagline → CTAs cascade. - New copy: a "✦ The genie has spoken ✦" kicker above the name. - Name stays readable on any persona colour via a color-mix toward white (was raw persona colour, which went near-invisible for dark personas). All decoration uses design-system tokens and is disabled / hidden under prefers-reduced-motion. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Narrow the Yes/No answer row (max-w-sm) and widen the gap before "Not sure". - Recolor the floating magic dust from gold to purple (cabbage). - Swap the bottom backdrop pool from warm bun/orange to cabbage/purple. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Make the "aha" moment land like a celebration: - A flash "pop" (radial cabbage→white burst from the emblem) fires the instant the persona is exposed. - A full-screen confetti cannon: 48 brand-coloured pieces (squares + streamers) burst from the emblem and rain down across the whole viewport, tumbling as they fall. Rendered in a fixed, click-through overlay so it sits over everything without blocking the CTAs. Confetti config is deterministic (SSR-safe); the whole celebration is hidden under prefers-reduced-motion. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Remove the spinning "sun ray" spokes around the reveal emblem. - Fix the floating dust: lift off the bottom edge, drift steadily up (linear), and fade out by ~25% of the screen height instead of parking mid-screen. - Remove the top spotlight gradient; move the ambient/colour-shift glow to the base so the top of the stage stays clean and dark. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The square confetti pop felt off. Swap it for a firework of glowing dots — the same family as the floating dust — that explodes radially out of the emblem, decelerates, sags a touch with gravity, and fades. Originates from the icon itself (rendered inside the emblem), not a full-screen overlay. Removes the confetti cannon + screen flash overlay. Firework is deterministic (SSR-safe) and hidden under prefers-reduced-motion. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Brand-tint "The genie has spoken" with accent-cabbage instead of tertiary grey. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The reveal held back ALL its content behind a `revealReady` timer (video half-point or a 2.5s fallback), so right after the last answer the screen went near-empty — just Patchy and a tiny emblem — before the content popped in. That empty in-between frame read as a blink / layout shift / glitch. Drop the gating: the reveal content now renders the moment the phase opens and cascades in with its existing staggered entrance (emblem pop → kicker → name → tagline → CTAs), in sync with Patchy's reveal clip. No empty gap, no jump. Removes the revealReady state, its effect, and the mascot onHalfway wiring. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Builds on #6143. A visual + interaction redesign of the Patchy persona quiz step.
Design
Blankso the stage owns the look.ButtonV2(new button guidelines): per-size radii (rounded-16/14/12), focus rings, antialiased labels, 150ms transitions.rounded-24) in place of the flat bordered bubble.Bug fix
DownvoteIconisUpvoteIcon+rotate-180; the hover transform was clobbering that rotation (the No arrow flipped to point up). The hover transform now re-appliesrotate(0.5turn).Notes
prefers-reduced-motion./onboarding-persona-demo(intro, quiz, reveal, modifiers).🤖 Generated with Claude Code
Preview domain
https://feat-persona-quiz-casino-buttons.preview.app.daily.dev