Skip to content

Commit 69faa66

Browse files
comatoryclaude
andcommitted
fix: use non-worker canvas-confetti instance
The default confetti() export uses OffscreenCanvas + Web Worker which silently fails in some contexts. Using confetti.create() with main-thread rendering instead. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 9f48dee commit 69faa66

File tree

1 file changed

+8
-2
lines changed

1 file changed

+8
-2
lines changed

studio/src/hooks/use-fireworks.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import confetti from 'canvas-confetti';
22
import React from 'react';
33

4+
// Use main-thread rendering instead of the default Worker-backed confetti().
5+
// The default export uses main.toString() to inject itself into a Blob Worker,
6+
// which breaks when bundlers (Next.js/webpack) transform the code.
7+
// See: https://github.com/catdad/canvas-confetti/issues/166
8+
const fire = confetti.create(undefined, { resize: true });
9+
410
const fireworks = () => {
511
const duration = 2 * 1000;
612
const animationEnd = Date.now() + duration;
@@ -19,13 +25,13 @@ const fireworks = () => {
1925

2026
const particleCount = 50 * (timeLeft / duration);
2127
// since particles fall down, start a bit higher than random
22-
confetti(
28+
fire(
2329
Object.assign({}, defaults, {
2430
particleCount,
2531
origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
2632
}),
2733
);
28-
confetti(
34+
fire(
2935
Object.assign({}, defaults, {
3036
particleCount,
3137
origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },

0 commit comments

Comments
 (0)