ldraney/daily-100
Archived
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

SvelteKit: Celebration animations #9

New issue
Open
opened 2026-03-28 02:10:19 +00:00 by forgejo_admin · 0 comments
forgejo_admin commented 2026-03-28 02:10:19 +00:00
Copy link

Type

Feature

Lineage

Depends on daily-100 #7 (SvelteKit scaffold).

Repo

forgejo_admin/daily-100

User Story

As a user
I want celebration animations when I hit milestones
So that achieving goals feels rewarding

Context

Duolingo-inspired celebration system. Confetti on first perfect day (8/8). "First Perfect Week" badge at 7-day perfect streak. Special celebration screen at 30-day perfect streak. Level-up animation with new title reveal. Numeric milestone celebrations at 10, 25, 50, 100, 200, 365 perfect days. Screenshot-shareable milestone cards.

File Targets

Files the agent should modify or create:

  • src/lib/components/Celebration.svelte -- celebration overlay component
  • src/lib/celebrations.ts -- milestone detection logic
  • src/lib/components/MilestoneCard.svelte -- shareable milestone card

Files the agent should NOT touch:

  • prototype/ -- reference only
  • API code -- frontend only

Acceptance Criteria

  • Confetti animation on first 8/8 day
  • Level-up animation with new title reveal
  • Milestone celebrations at defined thresholds
  • Animations are smooth and don't block user interaction
  • Milestone cards are screenshot-friendly

Test Expectations

  • Trigger each celebration type with test data
  • Animations complete without jank on mobile
  • Run command: npm run build

Constraints

  • CSS animations preferred over JS animation libraries
  • Minimal external dependencies (canvas-confetti is acceptable)
  • Animations must not block checklist interaction

Checklist

  • PR opened
  • Tests pass
  • No unrelated changes

Related

  • daily-100 -- project
### Type Feature ### Lineage Depends on daily-100 #7 (SvelteKit scaffold). ### Repo `forgejo_admin/daily-100` ### User Story As a user I want celebration animations when I hit milestones So that achieving goals feels rewarding ### Context Duolingo-inspired celebration system. Confetti on first perfect day (8/8). "First Perfect Week" badge at 7-day perfect streak. Special celebration screen at 30-day perfect streak. Level-up animation with new title reveal. Numeric milestone celebrations at 10, 25, 50, 100, 200, 365 perfect days. Screenshot-shareable milestone cards. ### File Targets Files the agent should modify or create: - `src/lib/components/Celebration.svelte` -- celebration overlay component - `src/lib/celebrations.ts` -- milestone detection logic - `src/lib/components/MilestoneCard.svelte` -- shareable milestone card Files the agent should NOT touch: - `prototype/` -- reference only - API code -- frontend only ### Acceptance Criteria - [ ] Confetti animation on first 8/8 day - [ ] Level-up animation with new title reveal - [ ] Milestone celebrations at defined thresholds - [ ] Animations are smooth and don't block user interaction - [ ] Milestone cards are screenshot-friendly ### Test Expectations - [ ] Trigger each celebration type with test data - [ ] Animations complete without jank on mobile - Run command: `npm run build` ### Constraints - CSS animations preferred over JS animation libraries - Minimal external dependencies (canvas-confetti is acceptable) - Animations must not block checklist interaction ### Checklist - [ ] PR opened - [ ] Tests pass - [ ] No unrelated changes ### Related - `daily-100` -- project
Commenting is not possible because the repository is archived.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
ldraney/daily-100#9
No description provided.