mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
Add a shared-element transition in the backup step: clicking "Download my key" scales the textured nsec card down and translates it up into a compact white square "shell box", framing the metaphor that the user is working on the secure shell that surrounds their key while the encrypted download view loads in below. - BackupStep.tsx: wrap the chooser's nsec Card and the download view's shell box in motion.div elements sharing a layoutId, so Motion runs the FLIP morph (550ms, same cubic-bezier as the onboarding line-slide) with an automatic crossfade; going back via "All backup options" reverses the morph - Add ShellBracket: black square brackets (6px lines, 2rem outer radius) that fade in and clamp inward around the box once the morph settles (onLayoutAnimationComplete gates via new shellSettled state); geometry keeps the lines 10px clear of the box on all sides, concentric with its rounded-2xl corners, forming a 96px square around the 64px box - Fade/rise the "Download your key" card in concurrently with the morph, replacing the old VIEW_ANIMATION_CLASS crossfade - Respect prefers-reduced-motion via useReducedMotion: morph and bracket entrance render their final state instantly - No e2e changes needed: all existing test ids are preserved and the onboarding-backup.spec.ts suite passes unmodified (8/8) Co-authored-by: Taylor Ho <taylorkmho@gmail.com> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Buzz
Desktop chat shell with:
- Tauri + React + TypeScript + Vite
- Tailwind CSS
- shadcn/ui-ready shared components
- Biome (lint/format/check)
- Feature-driven frontend structure
Scripts
pnpm dev- run the web frontendpnpm tauri dev- run the desktop apppnpm build- typecheck and build frontendpnpm typecheck- TypeScript checkspnpm lint- Biome lintpnpm format- Biome format (write)pnpm check- Biome check
Structure
src/shared- reusable app-wide code (ui,lib,styles)src/features- feature modules (vertical slices)src/app- top-level app composition