@farcaster/snap 1.15.0 → 1.15.2

package/dist/react/accent-context.d.ts

@@ -1,6 +1,8 @@
 import { type ReactNode } from "react";
-export declare function SnapPreviewAccentProvider({ pageAccent, children, }: {
+export declare function SnapPreviewAccentProvider({ pageAccent, appearance, children, }: {
     pageAccent: string | undefined;
+    appearance?: "light" | "dark";
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function useSnapPreviewPageAccent(): string | undefined;
+export declare function useSnapAppearance(): "light" | "dark";

package/dist/react/accent-context.js

@@ -1,10 +1,13 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
-const SnapPreviewAccentContext = createContext(null);
-export function SnapPreviewAccentProvider({ pageAccent, children, }) {
-    return (_jsx(SnapPreviewAccentContext.Provider, { value: { pageAccent }, children: children }));
+const SnapPreviewContext = createContext(null);
+export function SnapPreviewAccentProvider({ pageAccent, appearance = "dark", children, }) {
+    return (_jsx(SnapPreviewContext.Provider, { value: { pageAccent, appearance }, children: children }));
 }
 export function useSnapPreviewPageAccent() {
-    return useContext(SnapPreviewAccentContext)?.pageAccent;
+    return useContext(SnapPreviewContext)?.pageAccent;
+}
+export function useSnapAppearance() {
+    return useContext(SnapPreviewContext)?.appearance ?? "dark";
 }

package/dist/react/hooks/use-snap-colors.js

@@ -1,9 +1,8 @@
 "use client";
 import { useMemo } from "react";
 import { useStateStore } from "@json-render/react";
-import { useColorMode } from "@neynar/ui/color-mode";
 import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex.js";
-import { useSnapPreviewPageAccent } from "../accent-context.js";
+import { useSnapPreviewPageAccent, useSnapAppearance } from "../accent-context.js";
 import { PALETTE_DARK_HEX, PALETTE_LIGHT_HEX } from "@farcaster/snap";
 /** Readable foreground color (black or white) for a given hex background. */
 export function pickForegroundForBg(hex) {
@@ -69,7 +68,7 @@ function buildSnapColors(accentName, mode) {
  */
 export function useSnapColors() {
     const { get } = useStateStore();
-    const { mode } = useColorMode();
+    const mode = useSnapAppearance();
     const pageAccent = useSnapPreviewPageAccent();
     const fromState = get("/theme/accent");
     const accentRaw = (typeof pageAccent === "string" && pageAccent.length > 0

package/dist/react/index.js

@@ -75,6 +75,49 @@ function ConfettiOverlay() {
                     animation: `confettiFall ${duration}s ease-in ${delay}s forwards`,
                 } }, id))), _jsx("style", { children: `@keyframes confettiFall{0%{top:-20px;opacity:1;transform:rotate(0deg) translateX(0)}50%{opacity:1}100%{top:110%;opacity:0;transform:rotate(720deg) translateX(${Math.random() > 0.5 ? "" : "-"}40px)}}` })] }));
 }
+function SnapLoadingOverlay({ appearance, accentHex, active, }) {
+    const isDark = appearance === "dark";
+    const tint = isDark ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.2)";
+    const trackColor = isDark
+        ? "rgba(255, 255, 255, 0.12)"
+        : "rgba(15, 23, 42, 0.1)";
+    return (_jsxs("div", { style: {
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 10,
+            background: tint,
+            backdropFilter: active ? "blur(10px) saturate(1.05)" : "none",
+            WebkitBackdropFilter: active
+                ? "blur(10px) saturate(1.05)"
+                : "none",
+            opacity: active ? 1 : 0,
+            pointerEvents: active ? "auto" : "none",
+            transition: "opacity 0.28s ease, backdrop-filter 0.28s ease",
+        }, "aria-hidden": !active, "aria-busy": active ? true : undefined, "aria-live": active ? "polite" : undefined, "aria-label": active ? "Loading" : undefined, children: [_jsx("div", { "data-snap-loading-spinner": true, style: {
+                    width: 30,
+                    height: 30,
+                    borderRadius: "50%",
+                    border: `2.5px solid ${trackColor}`,
+                    borderTopColor: accentHex,
+                    opacity: 0.88,
+                    animation: "snapViewSpin 0.75s linear infinite",
+                    flexShrink: 0,
+                } }), _jsx("style", { children: `
+        @keyframes snapViewSpin {
+          to { transform: rotate(360deg); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          [data-snap-loading-spinner] {
+            animation: none;
+            border-top-color: ${accentHex};
+            opacity: 0.75;
+          }
+        }
+      ` })] }));
+}
 const PALETTE = [
     "gray",
     "blue",
@@ -112,15 +155,25 @@ export function SnapView({ snap, handlers, loading = false, appearance = "dark",
         setPageKey((k) => k + 1);
     }, [spec]);
     const showConfetti = snap.effects?.includes("confetti");
+    // Increment key each time a new snap with confetti arrives so the overlay
+    // unmounts/remounts and restarts its animation on every trigger.
+    const confettiEpochRef = useRef(0);
+    const lastConfettiSnapRef = useRef(null);
+    if (showConfetti && snap !== lastConfettiSnapRef.current) {
+        confettiEpochRef.current++;
+        lastConfettiSnapRef.current = snap;
+    }
+    const accentName = snap.theme?.accent ?? "purple";
+    const accentHex = useMemo(() => resolveSnapPaletteHex(accentName, appearance), [accentName, appearance]);
     const previewSurfaceStyle = useMemo(() => {
         const vars = {};
         for (const c of PALETTE)
             vars[`--snap-color-${c}`] = resolveSnapPaletteHex(c, appearance);
         return {
-            ...snapPreviewPrimaryCssProperties(snap.theme?.accent ?? "purple", appearance),
+            ...snapPreviewPrimaryCssProperties(accentName, appearance),
             ...vars,
         };
-    }, [snap.theme?.accent, appearance]);
+    }, [accentName, appearance]);
     const handleAction = useCallback((name, params) => {
         const inputs = (stateRef.current.inputs ?? {});
         const p = (params ?? {});
@@ -156,9 +209,7 @@ export function SnapView({ snap, handlers, loading = false, appearance = "dark",
                 handlers.send_token({
                     token: String(p.token ?? ""),
                     amount: p.amount ? String(p.amount) : undefined,
-                    recipientFid: p.recipientFid
-                        ? Number(p.recipientFid)
-                        : undefined,
+                    recipientFid: p.recipientFid ? Number(p.recipientFid) : undefined,
                     recipientAddress: p.recipientAddress
                         ? String(p.recipientAddress)
                         : undefined,
@@ -174,21 +225,7 @@ export function SnapView({ snap, handlers, loading = false, appearance = "dark",
                 break;
         }
     }, [handlers]);
-    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && _jsx(ConfettiOverlay, {}), _jsx("div", { style: {
-                    position: "absolute",
-                    inset: 0,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    zIndex: 10,
-                    fontSize: 14,
-                    color: appearance === "dark" ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.4)",
-                    background: appearance === "dark" ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.5)",
-                    backdropFilter: loading ? "blur(8px)" : "blur(0px)",
-                    opacity: loading ? 1 : 0,
-                    pointerEvents: loading ? "auto" : "none",
-                    transition: "opacity 0.3s ease, backdrop-filter 0.3s ease",
-                }, children: "Loading..." }), _jsx("div", { style: previewSurfaceStyle, children: _jsx(SnapPreviewAccentProvider, { pageAccent: snap.theme?.accent, children: _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
+    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && _jsx(ConfettiOverlay, {}, confettiEpochRef.current), _jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: loading }), _jsx("div", { style: previewSurfaceStyle, children: _jsx(SnapPreviewAccentProvider, { pageAccent: snap.theme?.accent, appearance: appearance, children: _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
                             applyStatePaths(stateRef.current, changes);
                         }, onAction: handleAction }, pageKey) }) })] }));
 }

package/dist/react-native/confetti-overlay.d.ts

@@ -0,0 +1 @@
+export declare function ConfettiOverlay(): import("react").JSX.Element;

package/dist/react-native/confetti-overlay.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { Animated, StyleSheet, View, useWindowDimensions, } from "react-native";
+const CONFETTI_COLORS = [
+    "#8B5CF6",
+    "#EC4899",
+    "#3B82F6",
+    "#10B981",
+    "#F59E0B",
+    "#EF4444",
+    "#06B6D4",
+];
+export function ConfettiOverlay() {
+    const { width, height } = useWindowDimensions();
+    const pieces = useMemo(() => Array.from({ length: 80 }, (_, i) => ({
+        id: i,
+        left: Math.random() * width,
+        delay: Math.random() * 1200,
+        duration: 2500 + Math.random() * 2000,
+        color: CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)],
+        size: 6 + Math.random() * 8,
+        startRotation: Math.random() * 360,
+        driftX: (Math.random() > 0.5 ? 1 : -1) * Math.random() * 40,
+    })), 
+    // width captured once on mount; intentional stable dep
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const anims = useRef(pieces.map(() => ({
+        translateY: new Animated.Value(-20),
+        opacity: new Animated.Value(1),
+        rotate: new Animated.Value(0),
+        translateX: new Animated.Value(0),
+    }))).current;
+    useEffect(() => {
+        const animations = pieces.map((piece, i) => {
+            const anim = anims[i];
+            anim.translateY.setValue(-20);
+            anim.opacity.setValue(1);
+            anim.rotate.setValue(0);
+            anim.translateX.setValue(0);
+            return Animated.sequence([
+                Animated.delay(piece.delay),
+                Animated.parallel([
+                    Animated.timing(anim.translateY, {
+                        toValue: height + 20,
+                        duration: piece.duration,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(anim.opacity, {
+                        toValue: 0,
+                        duration: piece.duration,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(anim.rotate, {
+                        toValue: 720,
+                        duration: piece.duration,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(anim.translateX, {
+                        toValue: piece.driftX,
+                        duration: piece.duration,
+                        useNativeDriver: true,
+                    }),
+                ]),
+            ]);
+        });
+        const composite = Animated.parallel(animations);
+        composite.start();
+        return () => composite.stop();
+    }, [pieces, anims, height]);
+    return (_jsx(View, { style: [StyleSheet.absoluteFill, styles.container], pointerEvents: "none", children: pieces.map((piece, i) => {
+            const anim = anims[i];
+            const rotate = anim.rotate.interpolate({
+                inputRange: [0, 720],
+                outputRange: [
+                    `${piece.startRotation}deg`,
+                    `${piece.startRotation + 720}deg`,
+                ],
+            });
+            return (_jsx(Animated.View, { style: [
+                    styles.piece,
+                    {
+                        left: piece.left,
+                        width: piece.size,
+                        height: piece.size * 0.6,
+                        backgroundColor: piece.color,
+                        opacity: anim.opacity,
+                        transform: [
+                            { translateY: anim.translateY },
+                            { translateX: anim.translateX },
+                            { rotate },
+                        ],
+                    },
+                ] }, piece.id));
+        }) }));
+}
+const styles = StyleSheet.create({
+    container: {
+        overflow: "hidden",
+    },
+    piece: {
+        position: "absolute",
+        top: 0,
+        borderRadius: 2,
+    },
+});

package/dist/react-native/index.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
 import { SnapCatalogView } from "./catalog-renderer.js";
-import { SnapThemeProvider, useSnapTheme } from "./theme.js";
+import { SnapThemeProvider, useSnapTheme, } from "./theme.js";
 import { hexToRgba } from "./use-snap-palette.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
+import { ConfettiOverlay } from "./confetti-overlay.js";
 import { DEFAULT_THEME_ACCENT, PALETTE_LIGHT_HEX, PALETTE_DARK_HEX, } from "@farcaster/snap";
 // ─── Re-exports ───────────────────────────────────────
 export { useSnapTheme, hexToRgba };
@@ -42,7 +43,9 @@ function applyStatePaths(model, changes) {
 }
 function resolveAccentHex(accent, appearance) {
     const map = appearance === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
-    const name = accent && Object.hasOwn(map, accent) ? accent : DEFAULT_THEME_ACCENT;
+    const name = accent && Object.hasOwn(map, accent)
+        ? accent
+        : DEFAULT_THEME_ACCENT;
     return map[name];
 }
 // ─── SnapView ─────────────────────────────────────────
@@ -50,6 +53,15 @@ function SnapViewInner({ snap, handlers, loading = false, }) {
     const { mode } = useSnapTheme();
     const spec = snap.ui;
     const accentHex = resolveAccentHex(snap.theme?.accent, mode);
+    const showConfetti = snap.effects?.includes("confetti");
+    // Increment key each time a new snap with confetti arrives so the overlay
+    // unmounts/remounts and restarts its animation on every trigger.
+    const confettiEpochRef = useRef(0);
+    const lastConfettiSnapRef = useRef(null);
+    if (showConfetti && snap !== lastConfettiSnapRef.current) {
+        confettiEpochRef.current++;
+        lastConfettiSnapRef.current = snap;
+    }
     const initialState = useMemo(() => ({
         ...(spec.state ?? {}),
         inputs: { ...(spec.state?.inputs ?? {}) },
@@ -117,7 +129,9 @@ function SnapViewInner({ snap, handlers, loading = false, }) {
                     token: String(p.token ?? ""),
                     amount: p.amount ? String(p.amount) : undefined,
                     recipientFid: p.recipientFid ? Number(p.recipientFid) : undefined,
-                    recipientAddress: p.recipientAddress ? String(p.recipientAddress) : undefined,
+                    recipientAddress: p.recipientAddress
+                        ? String(p.recipientAddress)
+                        : undefined,
                 });
                 break;
             case "swap_token":
@@ -130,12 +144,12 @@ function SnapViewInner({ snap, handlers, loading = false, }) {
                 break;
         }
     }, []);
-    return (_jsxs(View, { style: styles.container, children: [loading && (_jsx(View, { style: [
+    return (_jsxs(View, { style: styles.container, children: [loading ? (_jsx(View, { style: [
                     styles.overlay,
                     {
-                        backgroundColor: mode === "dark" ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.5)",
+                        backgroundColor: mode === "dark" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.2)",
                     },
-                ], children: _jsx(ActivityIndicator, { size: "large", color: accentHex }) })), _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
+                ], children: _jsx(ActivityIndicator, { size: "large", color: accentHex }) })) : null, showConfetti ? _jsx(ConfettiOverlay, {}, confettiEpochRef.current) : null, _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
                     applyStatePaths(stateRef.current, changes);
                 }, onAction: handleAction }, pageKey)] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "1.15.0",
+  "version": "1.15.2",
   "description": "Farcaster Snaps 🫰",
   "repository": {
     "type": "git",

package/src/react/accent-context.tsx

@@ -2,28 +2,35 @@
 
 import { createContext, useContext, type ReactNode } from "react";
 
-type SnapPreviewAccentContextValue = {
+type SnapPreviewContextValue = {
   /** From loaded snap `page.theme.accent` (undefined if the snap omits it). */
   pageAccent: string | undefined;
+  /** Light/dark appearance passed from SnapView. */
+  appearance: "light" | "dark";
 };
 
-const SnapPreviewAccentContext =
-  createContext<SnapPreviewAccentContextValue | null>(null);
+const SnapPreviewContext = createContext<SnapPreviewContextValue | null>(null);
 
 export function SnapPreviewAccentProvider({
   pageAccent,
+  appearance = "dark",
   children,
 }: {
   pageAccent: string | undefined;
+  appearance?: "light" | "dark";
   children: ReactNode;
 }) {
   return (
-    <SnapPreviewAccentContext.Provider value={{ pageAccent }}>
+    <SnapPreviewContext.Provider value={{ pageAccent, appearance }}>
       {children}
-    </SnapPreviewAccentContext.Provider>
+    </SnapPreviewContext.Provider>
   );
 }
 
 export function useSnapPreviewPageAccent(): string | undefined {
-  return useContext(SnapPreviewAccentContext)?.pageAccent;
+  return useContext(SnapPreviewContext)?.pageAccent;
+}
+
+export function useSnapAppearance(): "light" | "dark" {
+  return useContext(SnapPreviewContext)?.appearance ?? "dark";
 }

package/src/react/hooks/use-snap-colors.ts

@@ -2,9 +2,8 @@
 
 import { useMemo } from "react";
 import { useStateStore } from "@json-render/react";
-import { useColorMode } from "@neynar/ui/color-mode";
 import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex";
-import { useSnapPreviewPageAccent } from "../accent-context";
+import { useSnapPreviewPageAccent, useSnapAppearance } from "../accent-context";
 import type { PaletteColor } from "@farcaster/snap";
 import { PALETTE_DARK_HEX, PALETTE_LIGHT_HEX } from "@farcaster/snap";
 
@@ -113,7 +112,7 @@ function buildSnapColors(
  */
 export function useSnapColors(): SnapColors {
   const { get } = useStateStore();
-  const { mode } = useColorMode();
+  const mode = useSnapAppearance();
   const pageAccent = useSnapPreviewPageAccent();
   const fromState = get("/theme/accent");
   const accentRaw =

package/src/react/index.tsx

@@ -50,10 +50,7 @@ export type SnapActionHandlers = {
     recipientFid?: number;
     recipientAddress?: string;
   }) => void;
-  swap_token: (params: {
-    sellToken?: string;
-    buyToken?: string;
-  }) => void;
+  swap_token: (params: { sellToken?: string; buyToken?: string }) => void;
 };
 
 // ─── Internal helpers ──────────────────────────────────
@@ -144,7 +141,76 @@ function ConfettiOverlay() {
           }}
         />
       ))}
-      <style>{`@keyframes confettiFall{0%{top:-20px;opacity:1;transform:rotate(0deg) translateX(0)}50%{opacity:1}100%{top:110%;opacity:0;transform:rotate(720deg) translateX(${Math.random() > 0.5 ? "" : "-"}40px)}}`}</style>
+      <style>{`@keyframes confettiFall{0%{top:-20px;opacity:1;transform:rotate(0deg) translateX(0)}50%{opacity:1}100%{top:110%;opacity:0;transform:rotate(720deg) translateX(${
+        Math.random() > 0.5 ? "" : "-"
+      }40px)}}`}</style>
+    </div>
+  );
+}
+
+function SnapLoadingOverlay({
+  appearance,
+  accentHex,
+  active,
+}: {
+  appearance: "light" | "dark";
+  accentHex: string;
+  active: boolean;
+}) {
+  const isDark = appearance === "dark";
+  const tint = isDark ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.2)";
+  const trackColor = isDark
+    ? "rgba(255, 255, 255, 0.12)"
+    : "rgba(15, 23, 42, 0.1)";
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 10,
+        background: tint,
+        backdropFilter: active ? "blur(10px) saturate(1.05)" : "none",
+        WebkitBackdropFilter: active
+          ? "blur(10px) saturate(1.05)"
+          : "none",
+        opacity: active ? 1 : 0,
+        pointerEvents: active ? "auto" : "none",
+        transition: "opacity 0.28s ease, backdrop-filter 0.28s ease",
+      }}
+      aria-hidden={!active}
+      aria-busy={active ? true : undefined}
+      aria-live={active ? "polite" : undefined}
+      aria-label={active ? "Loading" : undefined}
+    >
+      <div
+        data-snap-loading-spinner
+        style={{
+          width: 30,
+          height: 30,
+          borderRadius: "50%",
+          border: `2.5px solid ${trackColor}`,
+          borderTopColor: accentHex,
+          opacity: 0.88,
+          animation: "snapViewSpin 0.75s linear infinite",
+          flexShrink: 0,
+        }}
+      />
+      <style>{`
+        @keyframes snapViewSpin {
+          to { transform: rotate(360deg); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          [data-snap-loading-spinner] {
+            animation: none;
+            border-top-color: ${accentHex};
+            opacity: 0.75;
+          }
+        }
+      `}</style>
     </div>
   );
 }
@@ -174,10 +240,7 @@ export function SnapView({
   appearance?: "light" | "dark";
 }) {
   const spec = snap.ui;
-  const initialState = useMemo(
-    () => spec.state ?? { inputs: {} },
-    [spec],
-  );
+  const initialState = useMemo(() => spec.state ?? { inputs: {} }, [spec]);
 
   const stateRef = useRef<Record<string, unknown>>(initialState);
 
@@ -207,18 +270,31 @@ export function SnapView({
 
   const showConfetti = snap.effects?.includes("confetti");
 
+  // Increment key each time a new snap with confetti arrives so the overlay
+  // unmounts/remounts and restarts its animation on every trigger.
+  const confettiEpochRef = useRef(0);
+  const lastConfettiSnapRef = useRef<typeof snap | null>(null);
+  if (showConfetti && snap !== lastConfettiSnapRef.current) {
+    confettiEpochRef.current++;
+    lastConfettiSnapRef.current = snap;
+  }
+
+  const accentName = snap.theme?.accent ?? "purple";
+
+  const accentHex = useMemo(
+    () => resolveSnapPaletteHex(accentName, appearance),
+    [accentName, appearance],
+  );
+
   const previewSurfaceStyle = useMemo(() => {
     const vars: Record<string, string> = {};
     for (const c of PALETTE)
       vars[`--snap-color-${c}`] = resolveSnapPaletteHex(c, appearance);
     return {
-      ...snapPreviewPrimaryCssProperties(
-        snap.theme?.accent ?? "purple",
-        appearance,
-      ),
+      ...snapPreviewPrimaryCssProperties(accentName, appearance),
       ...vars,
     } as CSSProperties;
-  }, [snap.theme?.accent, appearance]);
+  }, [accentName, appearance]);
 
   const handleAction = useCallback(
     (name: unknown, params: unknown) => {
@@ -259,9 +335,7 @@ export function SnapView({
           handlers.send_token({
             token: String(p.token ?? ""),
             amount: p.amount ? String(p.amount) : undefined,
-            recipientFid: p.recipientFid
-              ? Number(p.recipientFid)
-              : undefined,
+            recipientFid: p.recipientFid ? Number(p.recipientFid) : undefined,
             recipientAddress: p.recipientAddress
               ? String(p.recipientAddress)
               : undefined,
@@ -282,29 +356,18 @@ export function SnapView({
 
   return (
     <div style={{ position: "relative", width: "100%" }}>
-      {showConfetti && <ConfettiOverlay />}
-      <div
-        style={{
-          position: "absolute",
-          inset: 0,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          zIndex: 10,
-          fontSize: 14,
-          color: appearance === "dark" ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.4)",
-          background: appearance === "dark" ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.5)",
-          backdropFilter: loading ? "blur(8px)" : "blur(0px)",
-          opacity: loading ? 1 : 0,
-          pointerEvents: loading ? "auto" : "none",
-          transition: "opacity 0.3s ease, backdrop-filter 0.3s ease",
-        }}
-      >
-        Loading...
-      </div>
+      {showConfetti && <ConfettiOverlay key={confettiEpochRef.current} />}
+      <SnapLoadingOverlay
+        appearance={appearance}
+        accentHex={accentHex}
+        active={loading}
+      />
 
       <div style={previewSurfaceStyle}>
-        <SnapPreviewAccentProvider pageAccent={snap.theme?.accent}>
+        <SnapPreviewAccentProvider
+          pageAccent={snap.theme?.accent}
+          appearance={appearance}
+        >
           <SnapCatalogView
             key={pageKey}
             spec={spec}

package/src/react-native/confetti-overlay.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useMemo, useRef } from "react";
+import {
+  Animated,
+  StyleSheet,
+  View,
+  useWindowDimensions,
+} from "react-native";
+
+const CONFETTI_COLORS = [
+  "#8B5CF6",
+  "#EC4899",
+  "#3B82F6",
+  "#10B981",
+  "#F59E0B",
+  "#EF4444",
+  "#06B6D4",
+];
+
+export function ConfettiOverlay() {
+  const { width, height } = useWindowDimensions();
+
+  const pieces = useMemo(
+    () =>
+      Array.from({ length: 80 }, (_, i) => ({
+        id: i,
+        left: Math.random() * width,
+        delay: Math.random() * 1200,
+        duration: 2500 + Math.random() * 2000,
+        color:
+          CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)]!,
+        size: 6 + Math.random() * 8,
+        startRotation: Math.random() * 360,
+        driftX: (Math.random() > 0.5 ? 1 : -1) * Math.random() * 40,
+      })),
+    // width captured once on mount; intentional stable dep
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const anims = useRef(
+    pieces.map(() => ({
+      translateY: new Animated.Value(-20),
+      opacity: new Animated.Value(1),
+      rotate: new Animated.Value(0),
+      translateX: new Animated.Value(0),
+    })),
+  ).current;
+
+  useEffect(() => {
+    const animations = pieces.map((piece, i) => {
+      const anim = anims[i]!;
+      anim.translateY.setValue(-20);
+      anim.opacity.setValue(1);
+      anim.rotate.setValue(0);
+      anim.translateX.setValue(0);
+
+      return Animated.sequence([
+        Animated.delay(piece.delay),
+        Animated.parallel([
+          Animated.timing(anim.translateY, {
+            toValue: height + 20,
+            duration: piece.duration,
+            useNativeDriver: true,
+          }),
+          Animated.timing(anim.opacity, {
+            toValue: 0,
+            duration: piece.duration,
+            useNativeDriver: true,
+          }),
+          Animated.timing(anim.rotate, {
+            toValue: 720,
+            duration: piece.duration,
+            useNativeDriver: true,
+          }),
+          Animated.timing(anim.translateX, {
+            toValue: piece.driftX,
+            duration: piece.duration,
+            useNativeDriver: true,
+          }),
+        ]),
+      ]);
+    });
+
+    const composite = Animated.parallel(animations);
+    composite.start();
+    return () => composite.stop();
+  }, [pieces, anims, height]);
+
+  return (
+    <View style={[StyleSheet.absoluteFill, styles.container]} pointerEvents="none">
+      {pieces.map((piece, i) => {
+        const anim = anims[i]!;
+        const rotate = anim.rotate.interpolate({
+          inputRange: [0, 720],
+          outputRange: [
+            `${piece.startRotation}deg`,
+            `${piece.startRotation + 720}deg`,
+          ],
+        });
+        return (
+          <Animated.View
+            key={piece.id}
+            style={[
+              styles.piece,
+              {
+                left: piece.left,
+                width: piece.size,
+                height: piece.size * 0.6,
+                backgroundColor: piece.color,
+                opacity: anim.opacity,
+                transform: [
+                  { translateY: anim.translateY },
+                  { translateX: anim.translateX },
+                  { rotate },
+                ],
+              },
+            ]}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+  },
+  piece: {
+    position: "absolute",
+    top: 0,
+    borderRadius: 2,
+  },
+});

package/src/react-native/index.tsx

@@ -1,10 +1,15 @@
 import type { Spec } from "@json-render/core";
 import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
 import { SnapCatalogView } from "./catalog-renderer";
-import { SnapThemeProvider, useSnapTheme, type SnapNativeColors } from "./theme";
+import {
+  SnapThemeProvider,
+  useSnapTheme,
+  type SnapNativeColors,
+} from "./theme";
 import { hexToRgba } from "./use-snap-palette";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
+import { ConfettiOverlay } from "./confetti-overlay";
 import {
   DEFAULT_THEME_ACCENT,
   PALETTE_LIGHT_HEX,
@@ -47,10 +52,7 @@ export type SnapActionHandlers = {
     recipientFid?: number;
     recipientAddress?: string;
   }) => void;
-  swap_token: (params: {
-    sellToken?: string;
-    buyToken?: string;
-  }) => void;
+  swap_token: (params: { sellToken?: string; buyToken?: string }) => void;
 };
 
 // ─── Re-exports ───────────────────────────────────────
@@ -94,9 +96,15 @@ function applyStatePaths(
   }
 }
 
-function resolveAccentHex(accent: string | undefined, appearance: "light" | "dark"): string {
+function resolveAccentHex(
+  accent: string | undefined,
+  appearance: "light" | "dark",
+): string {
   const map = appearance === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
-  const name = accent && Object.hasOwn(map, accent) ? (accent as PaletteColor) : DEFAULT_THEME_ACCENT;
+  const name =
+    accent && Object.hasOwn(map, accent)
+      ? (accent as PaletteColor)
+      : DEFAULT_THEME_ACCENT;
   return map[name];
 }
 
@@ -115,6 +123,17 @@ function SnapViewInner({
   const spec = snap.ui;
   const accentHex = resolveAccentHex(snap.theme?.accent, mode);
 
+  const showConfetti = snap.effects?.includes("confetti");
+
+  // Increment key each time a new snap with confetti arrives so the overlay
+  // unmounts/remounts and restarts its animation on every trigger.
+  const confettiEpochRef = useRef(0);
+  const lastConfettiSnapRef = useRef<typeof snap | null>(null);
+  if (showConfetti && snap !== lastConfettiSnapRef.current) {
+    confettiEpochRef.current++;
+    lastConfettiSnapRef.current = snap;
+  }
+
   const initialState = useMemo(
     () => ({
       ...(spec.state ?? {}),
@@ -191,7 +210,9 @@ function SnapViewInner({
           token: String(p.token ?? ""),
           amount: p.amount ? String(p.amount) : undefined,
           recipientFid: p.recipientFid ? Number(p.recipientFid) : undefined,
-          recipientAddress: p.recipientAddress ? String(p.recipientAddress) : undefined,
+          recipientAddress: p.recipientAddress
+            ? String(p.recipientAddress)
+            : undefined,
         });
         break;
       case "swap_token":
@@ -207,19 +228,20 @@ function SnapViewInner({
 
   return (
     <View style={styles.container}>
-      {loading && (
+      {loading ? (
         <View
           style={[
             styles.overlay,
             {
               backgroundColor:
-                mode === "dark" ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.5)",
+                mode === "dark" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.2)",
             },
           ]}
         >
           <ActivityIndicator size="large" color={accentHex} />
         </View>
-      )}
+      ) : null}
+      {showConfetti ? <ConfettiOverlay key={confettiEpochRef.current} /> : null}
       <SnapCatalogView
         key={pageKey}
         spec={spec}