@farcaster/snap 2.0.3 → 2.1.1

package/dist/react/components/cell-grid.d.ts

@@ -1,5 +1,7 @@
-export declare function SnapCellGrid({ element: { props }, }: {
+export declare function SnapCellGrid({ element: { props, on }, emit, }: {
     element: {
         props: Record<string, unknown>;
+        on?: Record<string, unknown>;
     };
+    emit: (name: string) => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/react/components/cell-grid.js

@@ -4,14 +4,16 @@ import { useStateStore } from "@json-render/react";
 import { cn } from "@neynar/ui/utils";
 import { POST_GRID_TAP_KEY } from "@farcaster/snap";
 import { useSnapColors } from "../hooks/use-snap-colors.js";
-export function SnapCellGrid({ element: { props }, }) {
+export function SnapCellGrid({ element: { props, on }, emit, }) {
     const { get, set } = useStateStore();
     const colors = useSnapColors();
     const cols = Number(props.cols ?? 2);
     const rows = Number(props.rows ?? 2);
     const select = String(props.select ?? "off");
-    const interactive = select !== "off";
     const isMultiple = select === "multiple";
+    const isSelectable = select !== "off";
+    const hasPressAction = Boolean(on?.press);
+    const interactive = isSelectable || hasPressAction;
     const cells = Array.isArray(props.cells) ? props.cells : [];
     const gap = String(props.gap ?? "sm");
     const gapMap = { none: 0, sm: 1, md: 2, lg: 4 };
@@ -28,7 +30,7 @@ export function SnapCellGrid({ element: { props }, }) {
                 selectedSet.add(part);
         }
     }
-    const isSelected = (r, c) => selectedSet.has(`${r},${c}`);
+    const isSelected = (r, c) => isSelectable && selectedSet.has(`${r},${c}`);
     const handleTap = (r, c) => {
         const key = `${r},${c}`;
         if (isMultiple) {
@@ -42,6 +44,8 @@ export function SnapCellGrid({ element: { props }, }) {
         else {
             set(tapPath, key);
         }
+        if (hasPressAction)
+            emit("press");
     };
     const cellMap = new Map();
     for (const c of cells) {
@@ -72,7 +76,7 @@ export function SnapCellGrid({ element: { props }, }) {
                 }, children: cell?.content ?? "" }, `${r}-${c}`));
         }
     }
-    const selectionLabel = interactive && selectedSet.size > 0
+    const selectionLabel = isSelectable && selectedSet.size > 0
         ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
         : null;
     return (_jsxs("div", { children: [_jsx("div", { style: {

package/dist/react/snap-view-core.js

@@ -155,7 +155,12 @@ export function SnapViewCore({ snap, handlers, loading = false, appearance = "da
     useEffect(() => {
         setPageKey((k) => k + 1);
     }, [spec]);
-    const showConfetti = snap.effects?.includes("confetti");
+    const showConfetti = snap.effects?.includes("confetti") ?? false;
+    const [confettiKey, setConfettiKey] = useState(0);
+    useEffect(() => {
+        if (showConfetti)
+            setConfettiKey((k) => k + 1);
+    }, [showConfetti, snap]);
     const accentName = snap.theme?.accent ?? "purple";
     const accentHex = useMemo(() => resolveSnapPaletteHex(accentName, appearance), [accentName, appearance]);
     const previewSurfaceStyle = useMemo(() => {
@@ -221,7 +226,7 @@ export function SnapViewCore({ snap, handlers, loading = false, appearance = "da
                 break;
         }
     }, [handlers]);
-    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && _jsx(ConfettiOverlay, {}), loadingOverlay === undefined ? (_jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: loading })) : loading ? (_jsx(_Fragment, { children: loadingOverlay })) : null, _jsx("div", { style: previewSurfaceStyle, children: _jsx(SnapPreviewAccentProvider, { pageAccent: snap.theme?.accent, appearance: appearance, children: _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
+    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && _jsx(ConfettiOverlay, {}, confettiKey), loadingOverlay === undefined ? (_jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: loading })) : loading ? (_jsx(_Fragment, { children: loadingOverlay })) : null, _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/v1/snap-view.js

@@ -49,40 +49,46 @@ export function SnapCardV1({ snap, handlers, loading = false, appearance = "dark
             position: "relative",
             width: "100%",
             maxWidth,
-            overflow: "hidden",
-            ...(plain ? {} : {
-                borderRadius: 16,
-                border: `1px solid ${borderColor}`,
-                backgroundColor: surfaceBg,
-            }),
-        }, children: [_jsx("div", { style: isClipped
-                    ? {
-                        maxHeight: SNAP_MAX_HEIGHT,
-                        overflow: "hidden",
-                    }
-                    : undefined, children: _jsx("div", { ref: contentRef, style: plain ? undefined : { padding: 16 }, children: _jsx(SnapViewV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, loadingOverlay: null }) }) }), loadingOverlay === undefined ? (_jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: loading })) : loading ? (_jsx(_Fragment, { children: loadingOverlay })) : null, isExpandable ? (_jsx("div", { style: {
-                    display: "flex",
-                    justifyContent: "center",
-                    padding: plain ? "8px 0 0" : "10px 16px 12px",
-                    ...(plain
-                        ? {}
-                        : { borderTop: `1px solid ${borderColor}` }),
-                }, children: _jsx("button", { type: "button", "aria-expanded": isExpanded, onClick: () => setIsExpanded((value) => !value), style: {
-                        appearance: "none",
-                        border: "none",
-                        borderRadius: 9999,
-                        backgroundColor: toggleBg,
-                        color: toggleText,
-                        padding: "6px 10px",
-                        fontSize: 13,
-                        lineHeight: "18px",
-                        fontWeight: 600,
-                        cursor: "pointer",
-                    }, onMouseEnter: (event) => {
-                        event.currentTarget.style.backgroundColor = toggleBgHover;
-                    }, onMouseLeave: (event) => {
-                        event.currentTarget.style.backgroundColor = toggleBg;
-                    }, children: isExpanded ? "Show less" : "Show more" }) })) : null, actionError && (_jsx("div", { style: {
+        }, children: [_jsxs("div", { style: {
+                    position: "relative",
+                    overflow: "hidden",
+                    ...(plain ? {} : {
+                        borderRadius: 16,
+                        border: `1px solid ${borderColor}`,
+                        backgroundColor: surfaceBg,
+                    }),
+                }, children: [_jsx("div", { style: isClipped
+                            ? {
+                                maxHeight: SNAP_MAX_HEIGHT,
+                                overflow: "hidden",
+                            }
+                            : undefined, children: _jsx("div", { ref: contentRef, style: plain ? undefined : { padding: 16 }, children: _jsx(SnapViewV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, loadingOverlay: null }) }) }), loadingOverlay === undefined ? (_jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: loading })) : loading ? (_jsx(_Fragment, { children: loadingOverlay })) : null] }), isExpandable ? (_jsx("button", { type: "button", "aria-expanded": isExpanded, onClick: () => setIsExpanded((value) => !value), style: {
+                    position: "absolute",
+                    bottom: 0,
+                    left: "50%",
+                    transform: "translate(-50%, 50%)",
+                    appearance: "none",
+                    border: `1px solid ${borderColor}`,
+                    borderRadius: 9999,
+                    backgroundColor: isDark ? "rgba(30,30,30,0.6)" : "rgba(255,255,255,0.6)",
+                    backdropFilter: "blur(12px) saturate(180%)",
+                    WebkitBackdropFilter: "blur(12px) saturate(180%)",
+                    color: toggleText,
+                    padding: "2px 10px",
+                    fontSize: 12,
+                    lineHeight: "16px",
+                    fontWeight: 600,
+                    cursor: "pointer",
+                    zIndex: 11,
+                }, onMouseEnter: (event) => {
+                    event.currentTarget.style.backgroundColor = isDark
+                        ? "rgba(50,50,50,0.7)"
+                        : "rgba(245,245,245,0.75)";
+                }, onMouseLeave: (event) => {
+                    event.currentTarget.style.backgroundColor = isDark
+                        ? "rgba(30,30,30,0.6)"
+                        : "rgba(255,255,255,0.6)";
+                }, children: isExpanded ? "Show less" : "Show more" })) : null, actionError && (_jsx("div", { style: {
                     padding: "8px 12px",
                     fontSize: 13,
                     color: appearance === "dark"

package/dist/react/v2/snap-view.js

@@ -1,11 +1,12 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { validateSnapResponse } from "../../validator.js";
 import { SnapViewCore, SnapLoadingOverlay } from "../snap-view-core.js";
 import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex.js";
 const SNAP_MAX_HEIGHT = 500;
 const SNAP_WARNING_HEIGHT = 700;
+const SHOW_MORE_OVERHANG = 14;
 // ─── Default validation error fallback ────────────────
 function SnapValidationFallback({ appearance, message, }) {
     const isDark = appearance === "dark";
@@ -44,45 +45,110 @@ export function SnapViewV2({ snap, handlers, loading = false, appearance = "dark
 }
 // ─── SnapCardV2 ──────────────────────────────────────
 export function SnapCardV2({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, plain = false, loadingOverlay, }) {
-    const maxHeight = showOverflowWarning ? SNAP_WARNING_HEIGHT : SNAP_MAX_HEIGHT;
     const isDark = appearance === "dark";
     const bg = isDark ? "rgba(0,0,0,0.85)" : "rgba(255,255,255,0.9)";
     const borderColor = isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
     const surfaceBg = isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.02)";
+    const toggleBg = isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)";
+    const toggleBgHover = isDark
+        ? "rgba(255,255,255,0.1)"
+        : "rgba(0,0,0,0.08)";
+    const toggleText = isDark ? "rgba(255,255,255,0.82)" : "rgba(0,0,0,0.72)";
     const accentHex = useMemo(() => resolveSnapPaletteHex(snap.theme?.accent ?? "purple", appearance), [snap.theme?.accent, appearance]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+    const contentRef = useRef(null);
+    const [isExpandable, setIsExpandable] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(false);
+    useEffect(() => {
+        setIsExpanded(false);
+    }, [snap]);
+    useEffect(() => {
+        const node = contentRef.current;
+        if (!node)
+            return;
+        const measure = () => {
+            setIsExpandable(node.scrollHeight > SNAP_MAX_HEIGHT + 1);
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => {
+            measure();
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [snap, plain, showOverflowWarning]);
+    useEffect(() => {
+        if (!isExpandable) {
+            setIsExpanded(false);
+        }
+    }, [isExpandable]);
+    const isClipped = !showOverflowWarning && isExpandable && !isExpanded;
+    const containerMaxHeight = showOverflowWarning ? SNAP_WARNING_HEIGHT : undefined;
+    return (_jsxs("div", { style: {
+            paddingBottom: !showOverflowWarning && isExpandable ? SHOW_MORE_OVERHANG : 0,
+        }, children: [_jsxs("div", { style: {
                     position: "relative",
                     width: "100%",
                     maxWidth,
-                    maxHeight,
-                    overflow: "hidden",
-                    ...(plain ? {} : {
-                        borderRadius: 16,
-                        border: `1px solid ${borderColor}`,
-                        backgroundColor: surfaceBg,
-                    }),
-                }, children: [_jsx("div", { style: plain ? undefined : { padding: 16 }, children: _jsx(SnapViewV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback, loadingOverlay: null }) }), loadingOverlay === undefined ? (_jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: loading })) : loading ? (_jsx(_Fragment, { children: loadingOverlay })) : null, showOverflowWarning && (_jsxs("div", { style: {
+                }, children: [_jsxs("div", { style: {
+                            position: "relative",
+                            maxHeight: containerMaxHeight,
+                            overflow: "hidden",
+                            ...(plain ? {} : {
+                                borderRadius: 16,
+                                border: `1px solid ${borderColor}`,
+                                backgroundColor: surfaceBg,
+                            }),
+                        }, children: [_jsx("div", { style: isClipped
+                                    ? { maxHeight: SNAP_MAX_HEIGHT, overflow: "hidden" }
+                                    : undefined, children: _jsx("div", { ref: contentRef, style: plain ? undefined : { padding: 16 }, children: _jsx(SnapViewV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback, loadingOverlay: null }) }) }), loadingOverlay === undefined ? (_jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: loading })) : loading ? (_jsx(_Fragment, { children: loadingOverlay })) : null, showOverflowWarning && (_jsxs("div", { style: {
+                                    position: "absolute",
+                                    top: SNAP_MAX_HEIGHT,
+                                    left: 0,
+                                    right: 0,
+                                    bottom: 0,
+                                    pointerEvents: "none",
+                                    zIndex: 10,
+                                }, children: [_jsx("div", { style: { borderTop: "1px dashed rgba(255,100,100,0.6)", position: "relative" }, children: _jsxs("span", { style: {
+                                                position: "absolute",
+                                                top: -10,
+                                                right: 0,
+                                                fontSize: 10,
+                                                fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                                                color: "rgba(255,100,100,0.7)",
+                                                background: bg,
+                                                padding: "1px 4px",
+                                                borderRadius: 3,
+                                            }, children: [SNAP_MAX_HEIGHT, "px"] }) }), _jsx("div", { style: {
+                                            height: "100%",
+                                            background: "repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,100,100,0.06) 8px, rgba(255,100,100,0.06) 16px)",
+                                        } })] }))] }), !showOverflowWarning && isExpandable ? (_jsx("button", { type: "button", "aria-expanded": isExpanded, onClick: () => setIsExpanded((value) => !value), style: {
                             position: "absolute",
-                            top: SNAP_MAX_HEIGHT,
-                            left: 0,
-                            right: 0,
                             bottom: 0,
-                            pointerEvents: "none",
-                            zIndex: 10,
-                        }, children: [_jsx("div", { style: { borderTop: "1px dashed rgba(255,100,100,0.6)", position: "relative" }, children: _jsxs("span", { style: {
-                                        position: "absolute",
-                                        top: -10,
-                                        right: 0,
-                                        fontSize: 10,
-                                        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
-                                        color: "rgba(255,100,100,0.7)",
-                                        background: bg,
-                                        padding: "1px 4px",
-                                        borderRadius: 3,
-                                    }, children: [SNAP_MAX_HEIGHT, "px"] }) }), _jsx("div", { style: {
-                                    height: "100%",
-                                    background: "repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,100,100,0.06) 8px, rgba(255,100,100,0.06) 16px)",
-                                } })] }))] }), actionError && (_jsx("div", { style: {
+                            left: "50%",
+                            transform: "translate(-50%, 50%)",
+                            appearance: "none",
+                            border: `1px solid ${borderColor}`,
+                            borderRadius: 9999,
+                            backgroundColor: isDark ? "rgba(30,30,30,0.6)" : "rgba(255,255,255,0.6)",
+                            backdropFilter: "blur(12px) saturate(180%)",
+                            WebkitBackdropFilter: "blur(12px) saturate(180%)",
+                            color: toggleText,
+                            padding: "2px 10px",
+                            fontSize: 12,
+                            lineHeight: "16px",
+                            fontWeight: 600,
+                            cursor: "pointer",
+                            zIndex: 11,
+                        }, onMouseEnter: (event) => {
+                            event.currentTarget.style.backgroundColor = isDark
+                                ? "rgba(50,50,50,0.7)"
+                                : "rgba(245,245,245,0.75)";
+                        }, onMouseLeave: (event) => {
+                            event.currentTarget.style.backgroundColor = isDark
+                                ? "rgba(30,30,30,0.6)"
+                                : "rgba(255,255,255,0.6)";
+                        }, children: isExpanded ? "Show less" : "Show more" })) : null] }), actionError && (_jsx("div", { style: {
                     maxWidth,
                     padding: "8px 12px",
                     fontSize: 13,

package/dist/react-native/components/snap-cell-grid.d.ts

@@ -1,2 +1,2 @@
 import type { ComponentRenderProps } from "@json-render/react-native";
-export declare function SnapCellGrid({ element: { props }, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;
+export declare function SnapCellGrid({ element, emit, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;

package/dist/react-native/components/snap-cell-grid.js

@@ -4,7 +4,9 @@ import { useStateStore } from "@json-render/react-native";
 import { useSnapPalette } from "../use-snap-palette.js";
 import { useSnapTheme } from "../theme.js";
 import { POST_GRID_TAP_KEY } from "@farcaster/snap";
-export function SnapCellGrid({ element: { props }, }) {
+export function SnapCellGrid({ element, emit, }) {
+    const { props } = element;
+    const on = element.on;
     const { hex, appearance } = useSnapPalette();
     const { colors } = useSnapTheme();
     const { get, set } = useStateStore();
@@ -16,8 +18,10 @@ export function SnapCellGrid({ element: { props }, }) {
     const gapMap = { none: 0, sm: 1, md: 2, lg: 4 };
     const gapPx = gapMap[gap] ?? 1;
     const select = String(props.select ?? "off");
-    const interactive = select !== "off";
     const isMultiple = select === "multiple";
+    const isSelectable = select !== "off";
+    const hasPressAction = Boolean(on?.press);
+    const interactive = isSelectable || hasPressAction;
     const name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
     const tapPath = `/inputs/${name}`;
     const tapRaw = get(tapPath);
@@ -28,7 +32,7 @@ export function SnapCellGrid({ element: { props }, }) {
                 selectedSet.add(part);
         }
     }
-    const isSelected = (r, c) => selectedSet.has(`${r},${c}`);
+    const isSelected = (r, c) => isSelectable && selectedSet.has(`${r},${c}`);
     const handleTap = (r, c) => {
         const key = `${r},${c}`;
         if (isMultiple) {
@@ -42,6 +46,8 @@ export function SnapCellGrid({ element: { props }, }) {
         else {
             set(tapPath, key);
         }
+        if (hasPressAction)
+            emit("press");
     };
     const cellMap = new Map();
     for (const c of cells) {
@@ -69,7 +75,7 @@ export function SnapCellGrid({ element: { props }, }) {
         }
         rowEls.push(_jsx(View, { style: [styles.gridRow, { gap: gapPx }], children: rowCells }, r));
     }
-    const selectionLabel = interactive && selectedSet.size > 0
+    const selectionLabel = isSelectable && selectedSet.size > 0
         ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
         : null;
     return (_jsxs(View, { style: [styles.wrap, { gap: gapPx, backgroundColor: colors.muted, padding: 4, borderRadius: 8 }], children: [rowEls, selectionLabel ? (_jsx(Text, { style: [styles.selectionText, { color: colors.textSecondary }], children: selectionLabel })) : null] }));

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

@@ -20,63 +20,60 @@ export function ConfettiOverlay() {
         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,
+        // Per-piece swirl: amplitude, frequency (full oscillations), phase.
+        swirlAmp: 20 + Math.random() * 40,
+        swirlFreq: 1 + Math.random() * 1.5,
+        swirlPhase: Math.random() * Math.PI * 2,
     })), 
     // 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),
+        progress: 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);
+            anim.progress.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,
-                    }),
-                ]),
+                Animated.timing(anim.progress, {
+                    toValue: 1,
+                    duration: piece.duration,
+                    useNativeDriver: true,
+                }),
             ]);
         });
         const composite = Animated.parallel(animations);
         composite.start();
         return () => composite.stop();
     }, [pieces, anims, height]);
+    // Sample the sine curve at fixed progress points to build an interpolation
+    // that drives horizontal swirl on the native driver.
+    const SAMPLE_COUNT = 21;
+    const samplePoints = Array.from({ length: SAMPLE_COUNT }, (_, k) => k / (SAMPLE_COUNT - 1));
     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],
+            const translateY = anim.progress.interpolate({
+                inputRange: [0, 1],
+                outputRange: [-20, height + 20],
+            });
+            const rotate = anim.progress.interpolate({
+                inputRange: [0, 1],
                 outputRange: [
                     `${piece.startRotation}deg`,
                     `${piece.startRotation + 720}deg`,
                 ],
             });
+            const opacity = anim.progress.interpolate({
+                inputRange: [0, 0.5, 1],
+                outputRange: [1, 1, 0],
+            });
+            const translateX = anim.progress.interpolate({
+                inputRange: samplePoints,
+                outputRange: samplePoints.map((t) => Math.sin(t * piece.swirlFreq * Math.PI * 2 + piece.swirlPhase) *
+                    piece.swirlAmp),
+            });
             return (_jsx(Animated.View, { style: [
                     styles.piece,
                     {
@@ -84,10 +81,10 @@ export function ConfettiOverlay() {
                         width: piece.size,
                         height: piece.size * 0.6,
                         backgroundColor: piece.color,
-                        opacity: anim.opacity,
+                        opacity,
                         transform: [
-                            { translateY: anim.translateY },
-                            { translateX: anim.translateX },
+                            { translateY },
+                            { translateX },
                             { rotate },
                         ],
                     },

package/dist/react-native/snap-view-core.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
 import { SnapCatalogView } from "./catalog-renderer.js";
+import { ConfettiOverlay } from "./confetti-overlay.js";
 import { useSnapTheme } from "./theme.js";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
@@ -79,6 +80,12 @@ export function SnapViewCoreInner({ snap, handlers, loading = false, loadingOver
     useEffect(() => {
         setPageKey((k) => k + 1);
     }, [spec]);
+    const showConfetti = snap.effects?.includes("confetti") ?? false;
+    const [confettiKey, setConfettiKey] = useState(0);
+    useEffect(() => {
+        if (showConfetti)
+            setConfettiKey((k) => k + 1);
+    }, [showConfetti, snap]);
     const handlersRef = useRef(handlers);
     handlersRef.current = handlers;
     const handleAction = useCallback((name, params) => {
@@ -140,7 +147,7 @@ export function SnapViewCoreInner({ snap, handlers, loading = false, loadingOver
                     : loadingOverlay
                 : null, _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
                     applyStatePaths(stateRef.current, changes);
-                }, onAction: handleAction }, pageKey)] }));
+                }, onAction: handleAction }, pageKey), showConfetti && _jsx(ConfettiOverlay, {}, confettiKey)] }));
 }
 export function SnapLoadingOverlay({ appearance, accentHex, }) {
     return (_jsx(View, { style: [

package/dist/react-native/v1/snap-view.js

@@ -23,39 +23,36 @@ function SnapCardV1Inner({ snap, handlers, loading = false, borderRadius, action
     }, [snap]);
     const isExpandable = contentHeight > SNAP_MAX_HEIGHT + 1;
     const isClipped = isExpandable && !isExpanded;
-    return (_jsxs(_Fragment, { children: [_jsx(View, { style: cardStyles.frameRing, children: _jsxs(View, { style: [
-                        plain ? undefined : cardStyles.card,
-                        plain ? undefined : {
-                            borderRadius,
-                            borderColor: colors.border,
-                            backgroundColor: colors.surface,
-                        },
-                    ], children: [_jsx(View, { style: isClipped ? { maxHeight: SNAP_MAX_HEIGHT, overflow: "hidden" } : undefined, children: _jsx(View, { collapsable: false, onLayout: (event) => {
-                                    const nextHeight = Math.round(event.nativeEvent.layout.height);
-                                    setContentHeight((currentHeight) => isClipped
-                                        ? Math.max(currentHeight, nextHeight)
-                                        : currentHeight === nextHeight
-                                            ? currentHeight
-                                            : nextHeight);
-                                }, style: plain ? undefined : cardStyles.body, children: _jsx(SnapViewV1Inner, { snap: snap, handlers: handlers, loading: loading, loadingOverlay: null }) }) }), loading
-                            ? loadingOverlay === undefined
-                                ? _jsx(SnapLoadingOverlay, { appearance: mode, accentHex: accentHex })
-                                : loadingOverlay
-                            : null, isExpandable ? (_jsx(View, { style: [
-                                cardStyles.expandRow,
-                                plain
-                                    ? cardStyles.expandRowPlain
-                                    : { borderTopColor: colors.border },
-                            ], children: _jsx(Pressable, { style: ({ pressed }) => [
-                                    cardStyles.expandButton,
-                                    {
-                                        backgroundColor: pressed
-                                            ? colors.mutedHover
-                                            : colors.muted,
-                                    },
-                                ], onPress: () => {
-                                    setIsExpanded((value) => !value);
-                                }, children: _jsx(Text, { style: [cardStyles.expandButtonText, { color: colors.text }], children: isExpanded ? "Show less" : "Show more" }) }) })) : null] }) }), actionError && (_jsx(Text, { style: [
+    const isDark = mode === "dark";
+    const pillBg = isDark ? "rgba(40,40,40,0.92)" : "rgba(255,255,255,0.92)";
+    const pillBgPressed = isDark ? "rgba(60,60,60,0.95)" : "rgba(240,240,240,0.95)";
+    return (_jsxs(_Fragment, { children: [_jsxs(View, { style: cardStyles.frameRing, children: [_jsxs(View, { style: [
+                            plain ? undefined : cardStyles.card,
+                            plain ? undefined : {
+                                borderRadius,
+                                borderColor: colors.border,
+                                backgroundColor: colors.surface,
+                            },
+                        ], children: [_jsx(View, { style: isClipped ? { maxHeight: SNAP_MAX_HEIGHT, overflow: "hidden" } : undefined, children: _jsx(View, { collapsable: false, onLayout: (event) => {
+                                        const nextHeight = Math.round(event.nativeEvent.layout.height);
+                                        setContentHeight((currentHeight) => isClipped
+                                            ? Math.max(currentHeight, nextHeight)
+                                            : currentHeight === nextHeight
+                                                ? currentHeight
+                                                : nextHeight);
+                                    }, style: plain ? undefined : cardStyles.body, children: _jsx(SnapViewV1Inner, { snap: snap, handlers: handlers, loading: loading, loadingOverlay: null }) }) }), loading
+                                ? loadingOverlay === undefined
+                                    ? _jsx(SnapLoadingOverlay, { appearance: mode, accentHex: accentHex })
+                                    : loadingOverlay
+                                : null] }), isExpandable ? (_jsx(View, { pointerEvents: "box-none", style: cardStyles.expandFloat, children: _jsx(Pressable, { style: ({ pressed }) => [
+                                cardStyles.expandButton,
+                                {
+                                    backgroundColor: pressed ? pillBgPressed : pillBg,
+                                    borderColor: colors.border,
+                                },
+                            ], onPress: () => {
+                                setIsExpanded((value) => !value);
+                            }, children: _jsx(Text, { style: [cardStyles.expandButtonText, { color: colors.text }], children: isExpanded ? "Show less" : "Show more" }) }) })) : null] }), actionError && (_jsx(Text, { style: [
                     cardStyles.actionError,
                     {
                         color: appearance === "dark"
@@ -71,30 +68,27 @@ const cardStyles = StyleSheet.create({
     frameRing: { alignSelf: "stretch" },
     card: { overflow: "hidden", borderWidth: 1, minHeight: 120 },
     body: { paddingHorizontal: 16, paddingVertical: 16 },
-    expandRow: {
+    expandFloat: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: -14,
+        height: 28,
         alignItems: "center",
-        paddingHorizontal: 16,
-        paddingTop: 10,
-        paddingBottom: 12,
-        borderTopWidth: StyleSheet.hairlineWidth,
-    },
-    expandRowPlain: {
-        paddingHorizontal: 0,
-        paddingTop: 8,
-        paddingBottom: 0,
-        borderTopWidth: 0,
+        justifyContent: "center",
     },
     expandButton: {
         minWidth: 92,
         alignItems: "center",
         justifyContent: "center",
         borderRadius: 9999,
+        borderWidth: 1,
         paddingHorizontal: 10,
-        paddingVertical: 6,
+        paddingVertical: 4,
     },
     expandButtonText: {
-        fontSize: 13,
-        lineHeight: 18,
+        fontSize: 12,
+        lineHeight: 16,
         fontWeight: "600",
     },
     actionError: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 13 },