Background
Variant C's key differentiator is a heart burst animation triggered by tapping the badge. This task covers implementing and tuning the animation to production-readiness post decision done in T425446.
The designs feature multiple red heart SVGs of varying sizes radiating outward from the badge icon across the full viewport, with hearts fading out as they travel.
Goal
An animation that feels celebratory on first tap and still feels worth triggering on return visits, built without degrading article page performance.
Requirements
- Evaluation in T425446 concluded.
- Tapping the badge triggers the heart burst animation (variant C only).
- Hearts vary in size and scatter in different directions.
- Animation replays on every tap, including in return sessions.
- Page stays interactive during playback.
Technical
- CSS keyframes + JS orchestration only. No animation libraries.
- Heart elements created dynamically in JS, appended to <body>, removed from DOM after animation finishes. No leftover nodes.
- Target duration: tbd in T425446. Hearts start fading around tbd.
- Hearts must be position: absolute relative to viewport. No layout shift.
- Use requestAnimationFrame for orchestration. No synchronous style reads inside the loop.
- Randomness evaluation: test at minimum two approaches (e.g. fully random angle/size vs. seeded set of fixed trajectories) and assess which feels more delightful on repeat interaction. Done in T425446
- After animation, the variant C "Hide badge" button must appear automatically.
Acceptance criteria for done
- Randomness evaluation completed in sub-task.
- Tapping badge fires heart burst animation: hearts of varied sizes radiate outward from the badge and fade within tbd.
- Animation replays on every tap across all sessions.
- Heart elements removed from DOM after animation completes (no leftover nodes).
- "Hide badge" button appears bottom-center after animation ends.
- No long tasks on the main thread during animation (verified via Performance panel).
- Design sign-off on animation feel.
- Test.