feat(checkin): redesign screens with shared motion + scan→profile transition#35
Merged
Conversation
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…s/today Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Spec and task-by-task plan for elevating the checkin screens with a shared motion vocabulary. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Reusable motion constants plus Reveal, StatTile, LiveDot, and PageShell, all reduced-motion aware. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Extract the sonar success icon and choreograph the result card (icon pop + ring, staggered rows, footer settle). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Gradient ground, staggered card entrance, a static scan reticle, and a scan-lock confirmation puck; fix the manual-entry icon. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Apply the motion vocabulary to login, manual (sliding segmented control), first-time, history (animated summary + live dot), settings, and the guideline carousel (directional slides). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Enable React view transitions and morph the scan-lock puck into the participant profile header; reduced-motion safe. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The exit crossfade still played a 0.2s fade when motion is reduced; make it instant for consistency with the rest of the app. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Summary
Elevates the checkin iPad PWA with a cohesive, reduced-motion-aware motion vocabulary, bringing all seven non-profile screens up to the polish bar set by the participant profile page.
lib/motion.tsconstants +Reveal/StatTile/LiveDot/PageShellprimitives (all reduced-motion aware).IconBug→keyboard fix), login (welcome hero), manual (sliding segmented control), first-time (staggered steps + candidate grid), history (animated summary + pulsing presence dot), settings (mentor identity header), guideline (directional slide transitions, animated progress, ←/→ keys).SuccessIcon+ choreographedResultSummaryCard(icon pop + sonar ring, staggered rows, footer settle), shared by check-in/out and first-time.experimental.viewTransition; the home scan-lock puck morphs into the profile header via a sharedparticipant-portalname, plus an app-wide route crossfade, all reduced-motion guarded in CSS.Out of scope (intentionally untouched)
The profile detail view and the AppShell header are not redesigned. The only change to the profile page is the
<ViewTransition>wrap on its header card and the result branch delegating toResultSummaryCard.Notes
motion. Tone resolution uses staticRecordmaps (Tailwind-v4 safe). Noany.docs/superpowers/specs/2026-05-29-checkin-redesign-design.mdanddocs/superpowers/plans/2026-05-29-checkin-redesign.md.Test plan
No JS test runner in this app; CI gate is type-check + Biome + build (all green). Manual device checks:
🤖 Generated with Claude Code