Celebrate widget

The celebrate widget is a transient overlay — it mounts, plays an animation, and unmounts itself. Use it when something big just happened.

Mount

import { hatchedCelebrate } from 'https://cdn.hatched.com/widget/v1/celebrate.js';

hatchedCelebrate({
  token: sessionToken,
  type: 'badge-awarded',
  detail: { badgeId: 'badge_week_warrior' },
});

Or declaratively, mount-on-event:

<div
  data-hatched-widget="celebrate"
  data-hatched-token="SESSION_TOKEN"
  data-hatched-trigger="badge.awarded streak.milestone evolution.complete"
></div>

When any of the listed events fire for the session's buddy, the overlay plays automatically.

Celebration types

• hatch — the egg cracks open
• badge-awarded
• streak-milestone
• evolution-complete
• custom — you pass title, subtitle, and lottie/video

Required scopes

• buddy:read

Respect prefers-reduced-motion

All celebrate animations automatically scale down to a subtle fade when prefers-reduced-motion: reduce is set. No opt-in needed.