onboarding decision flow

sources

implementation steps

1. Use onboarding tiles for the first meaningful choice; each tile should map to a product path, not a marketing benefit.
2. Confirm irreversible or high-friction choices in the modal pattern, keeping copy short and concrete.
3. Use card spread or morphing icon motion only where it clarifies state transition or selection, never as page filler.
4. Keep selected and preview states visually distinct so the user understands what will happen before proceeding.
5. Measure mobile layout first; tile labels and controls must not resize the grid when selections change.

# Adopt onboarding decision flow

Build a first-run onboarding using the components showcase adoption recipe `onboarding-decision-flow`.

## Intent
A first-run choice flow that combines selectable tiles, focused confirmation, and restrained motion.

## Component sources
- onboarding: onboarding tiles (src/components/onboarding-tiles)
- modal: modal dialog (src/components/modal)
- cards: card spread (src/components/cards)
- morphing-icon: morphing icon (src/components/morphing-icon)

## Style sources
- components: components — default (@creative-int/design)
- squish: squish — paper + emoji (external — Squish (research))

## Implementation steps
1. Use onboarding tiles for the first meaningful choice; each tile should map to a product path, not a marketing benefit.
2. Confirm irreversible or high-friction choices in the modal pattern, keeping copy short and concrete.
3. Use card spread or morphing icon motion only where it clarifies state transition or selection, never as page filler.
4. Keep selected and preview states visually distinct so the user understands what will happen before proceeding.
5. Measure mobile layout first; tile labels and controls must not resize the grid when selections change.

## Acceptance checks
- user can select a path, review the result, and continue without encountering a dead end
- selected, hovered, focused, and disabled states are visually distinct
- motion respects reduced-motion settings or has a non-motion equivalent
- mobile tile labels wrap cleanly without overlapping controls
- proof covers /onboarding, /modal, and the adopting route

## Proof routes
- /adoption/onboarding-decision-flow
- /onboarding
- /modal

acceptance

• user can select a path, review the result, and continue without encountering a dead end
• selected, hovered, focused, and disabled states are visually distinct
• motion respects reduced-motion settings or has a non-motion equivalent
• mobile tile labels wrap cleanly without overlapping controls
• proof covers /onboarding, /modal, and the adopting route

artifact