Effects

Effects are page-level overlays that fire when a page is rendered. They trigger on both the initial load (GET) and after submit responses.

Available Effects

Effects fire once per page render. If a submit action returns the same page with "effects": ["confetti"], the confetti fires again. They do not repeat on client-side re-renders of the same page.

Preview

Usage

Add the effects array at the top level of the snap response:

{
  "version": "1.0",
  "effects": ["confetti"],
  "ui": {
    "root": "page",
    "elements": {
      "page": {
        "type": "stack",
        "props": { "gap": "md" },
        "children": ["title", "body"]
      },
      "title": {
        "type": "text",
        "props": { "content": "You won!", "weight": "bold", "align": "center" }
      },
      "body": {
        "type": "text",
        "props": {
          "content": "Congratulations on completing the challenge!",
          "align": "center"
        }
      }
    }
  }
}

When to Use Effects

Effects are best for:

• Celebrations — completing a challenge, winning a game
• Milestones — reaching a streak, hitting a follower count
• Completion states — finishing a multi-page flow

Use effects sparingly. They are most impactful when unexpected and earned, not when they appear on every page transition.