Files
buzz/desktop
Taylor Ho fea87b8abc feat(onboarding): morph nsec card into bracketed shell box on download
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>
2026-07-28 22:13:59 -07:00
..
…

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 frontend
  • pnpm tauri dev - run the desktop app
  • pnpm build - typecheck and build frontend
  • pnpm typecheck - TypeScript checks
  • pnpm lint - Biome lint
  • pnpm 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