Skip to content

feat(shared): onboarding personas quick-start with tag pop animation#5939

Open
davidercruz wants to merge 9 commits intomainfrom
davidercruz/onboarding-personas
Open

feat(shared): onboarding personas quick-start with tag pop animation#5939
davidercruz wants to merge 9 commits intomainfrom
davidercruz/onboarding-personas

Conversation

@davidercruz
Copy link
Copy Markdown

@davidercruz davidercruz commented Apr 29, 2026 •
edited
Loading

Changes

Adds an A/B-gated persona picker (Frontend, Backend, AI/ML, DevOps, etc.) inside the onboarding tag step. Selecting a persona batch-follows ~10 curated tags via the existing useTagAndSource().onFollowTags path, and a small staggered pop animation runs across the matching tag chips so the selection reads as intentional.

  • PersonaSelector renders the API-backed persona list using existing Button chip primitives (Float / Primary+Cabbage) so visual style stays consistent with the tag picker
  • Multi-select up to 3 personas; the 4th persona pill goes disabled until one is deselected
  • Per-persona-tag fan-out for recommendations: each persona-tag fires its own recommendedTags request in parallel, results dedupe and cap at 8 visible
  • Soft pruning model: manual tag clicks always add fresh recommendations; the eviction sweep that fades out unselected recommendations only runs every 10th manual click
  • Curated baseline tags fade out once the user has manually picked REQUIRED_TAGS_THRESHOLD (5) individual tags; persona clicks don't count toward the threshold
  • New tag-pop keyframe + procedural spark burst lifted from the leaderboard crown-spark pattern
  • New tag-fade-out keyframe for the eviction animation; onAnimationEnd is routed by event.animationName so pop, spark, and fade-out events don't conflict
  • New onboardingPopBus module event bus lets TagElement react to persona clicks (and TagSelection react to recommend requests) without prop-drilling
  • Mobile auto-scroll: the first persona click smooth-scrolls to the top of the tag area so users can see their selection take effect
  • Headline copy override: when the persona flag is on, the headline shows "Tune your feed" with subtitle "Pick a role to start fast, then add tags you like." This currently overrides the funnel/modal-supplied headline in code; see "Pre-merge" below
  • Backend (onboardingPersonas query) is already shipped in daily-api

Pre-merge

Important

Update Freyja funnel JSON for the persona-experiment variant to set the EditTags step's headline parameter to "Tune your feed". Once Freyja serves the new copy, the in-code override in EditTag.tsx (search for the TODO: drop this override once Freyja's persona-experiment variant ships the new headline directly comment) can be removed.

Events

Type event_name value
New select onboarding persona target_type: 'persona', target_id: <persona id>, extra: { action: 'select' | 'deselect', tags_count, active_count }

Experiment

Yes — gated behind the new onboarding_personas GrowthBook flag (featureOnboardingPersonas, default false). Slack #experiments enrolment to be posted before merge.

Important

Please do not merge the PR until the experiment enrolment is approved.

Manual Testing

On those affected packages:

  • Sanity-checked the webapp onboarding flow
  • Sanity-check in extension
  • Sanity-check companion is unaffected

Did you test the modified components media queries?

  • MobileL (420px)
  • Tablet (656px)
  • Laptop (1020px)

Did you test on actual mobile devices?

  • iOS (Chrome and Safari)
  • Android

🤖 Generated with Claude Code

Preview domain

https://davidercruz-onboarding-personas.preview.app.daily.dev

@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 29, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
daily-webapp Ready Ready Preview Apr 30, 2026 11:24am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
storybook Ignored Ignored Apr 30, 2026 11:24am

Request Review

davidercruz and others added 9 commits April 30, 2026 12:19
@davidercruz @claude
feat(shared): onboarding personas quick-start with tag pop animation
bc03af5 
Adds an A/B-gated "persona" picker (Frontend, Backend, AI/ML, etc.) inside
the onboarding tag step. Selecting a persona batch-follows ~10 curated tags
and triggers a staggered pop animation on the corresponding tag chips so
the selection feels intentional. Gated behind the new
featureOnboardingPersonas GrowthBook flag.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@davidercruz @claude
feat(shared): personas multi-select, recommendations, spark burst
807abe6 
- Multi-select up to 3 personas (4th click no-ops, button looks
  disabled while at the cap).
- Picking a persona now triggers the recommendedTags query for its
  tag list, with a soft-pruning rule: previous recommendation batch
  is evicted from the cache when a new one arrives, while curated
  and selected tags persist.
- Extract useRecommendedTags hook so manual tag clicks and persona
  clicks share the same mutation, slicing, splice-at-anchor, and
  prune logic. Default to 2 recommended tags client-side.
- Adds a spark-burst flourish (5 procedural sparks per chip) to the
  existing pop animation, lifted from the leaderboard crown-spark
  pattern.
- Expose a recommend-request bus so PersonaSelector stays
  self-contained without prop-drilling through TagSelection.
- Subtitle copy on the persona row to introduce the quick-start.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@davidercruz @claude
feat(shared): per-tag recommendation fan-out and curated fade-out
aaf1d57 
- Recommendation calls now fan out per persona-tag (one parallel
  query per seed). Results are deduped and capped at 8 visible.
- Curated baseline tags fade out once the user has selected
  REQUIRED_TAGS_THRESHOLD (5) or more tags. The transition is
  one-way: once gone, deselecting back below the threshold does
  not bring them back.
- Recommendations that get superseded by a fresh batch now play
  the same fade-out animation before being removed from the grid,
  rather than disappearing instantly.
- Adds the tag-fade-out keyframe and routes onAnimationEnd in
  TagElement to disambiguate pop, spark, and fade-out events via
  event.animationName.
- TagSelection owns the exit lifecycle (exitingTags + removedTags)
  and useRecommendedTags now exposes onEvicting so the parent can
  drive the animation.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@davidercruz @claude
fix(shared): trip curated fade only on manual tag clicks
7cd92d2 
Picking a persona batch-follows ~10 tags in a single click, which
previously tripped the curated-baseline fade-out instantly because
the threshold was reading feedSettings.includeTags.size.

Track a separate manualSelectCount that increments only inside
handleClickTag (manual follow events). Personas don't count toward
the threshold — the curated 25 stay visible until the user has
expressed individual taste by clicking REQUIRED_TAGS_THRESHOLD (5)
single tags.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@davidercruz @claude
fix(shared): keep selected tags out of recommendation evictions, thro…
2cc527a 
…ttle refresh

Two bugs in the manual tag-click flow:

1. Clicking a recommended tag was wiping it from the screen along
   with its siblings. The eviction pass evicted any name that wasn't
   in the new batch, including the just-selected one. Now the hook
   accepts a selectedRef and excludes selected names from eviction.

2. Every manual click clobbered the entire recommendation batch,
   making them feel disposable. Throttle to fire at most once per
   10 clicks (the very first click still fires so the user gets
   recommendations immediately).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@davidercruz @claude
fix(shared): make tag-click recommendations additive, throttle eviction
4b4100d 
Previously every manual tag click cleared the existing recommendation
batch and replaced it with a fresh one, so recommendations felt like
they were vanishing on every click. Adding was effectively gated by
the same cadence as removal.

Now adding is immediate and removing is throttled:

- Every manual tag click fetches fresh recommendations and appends
  them to the screen. The recommendation ref accumulates names across
  clicks; new fetches dedupe against it so we don't add the same name
  twice.
- The eviction sweep — fading out previously-shown recommendations
  the user didn't pick — only runs every 10th manual click.
- Persona-driven recommendation requests (via the bus) are always
  additive; they never trigger eviction.
- A new onFreshRecommendations callback drives the pop animation so
  only freshly-arrived tags pop, not the accumulated set.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@davidercruz @claude
feat(shared): tune-your-feed copy and mobile auto-scroll on persona pick
b44701e 
- When the persona feature is on, the headline now reads "Tune your
  feed" instead of "Pick tags that are relevant to you" — the page
  shows both personas and tags, so framing it as feed tuning is
  clearer than naming the mechanic.
- Subtitle becomes "Pick a role to start fast, then add tags you
  like." — the original "Quick start: pick up to 3 roles" phrasing
  was OK but didn't connect personas to tags.
- The funnel-supplied headline prop still takes precedence; only the
  default fallback changed.
- On mobile, the first persona click smooth-scrolls the viewport to
  the top of the tag area so the user sees their selection take
  effect instead of scrolling manually. Subsequent persona clicks
  don't re-scroll. Desktop layout fits both regions on screen, no
  scroll triggered.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@davidercruz @claude
fix(shared): force tune-your-feed headline when persona flag is on
6ed41b7 
The headline prop is supplied by Freyja funnel JSON and by the
OnboardingV2 modal, so EditTag's default fallback never fired in
practice. Override the caller-supplied headline with "Tune your feed"
whenever the persona feature flag is on; otherwise keep the existing
caller-supplied copy.

A TODO comment marks this for removal once Freyja's persona-experiment
variant ships the new headline directly.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@davidercruz @claude
feat(shared): round-robin recommendation merge for diverse coverage
7e26f0f 
Two changes to widen the recommendation surface, especially for
personas with heavily overlapping tag clusters like AI/ML:

- Bump the default visible cap from 8 to 12.
- Replace "first response wins" iteration with a round-robin walk:
  take the top recommendation from each seed in turn, then the
  second, and so on. Previously the first 4–5 seeds processed
  could fully fill the union (since their top recommendations
  overlap), starving later seeds like data-science, pytorch,
  algorithms of any contribution. Now every seed gets a turn
  before any seed's later results are picked.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@davidercruz davidercruz force-pushed the davidercruz/onboarding-personas branch from c84271f to 7e26f0f Compare April 30, 2026 11:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@davidercruz