WAIT — Slowing — last commit 7mo ago

• Last commit 7mo ago
• 4 active contributors
• ISC licensed
• CI configured
• Tests present
• ⚠ Slowing — last commit 7mo ago
• ⚠ Small team — 4 contributors active in recent commits
• ⚠ Single-maintainer risk — top contributor 96% of recent commits
• ⚠ Scorecard: marked unmaintained (0/10)
• ⚠ Scorecard: default branch unprotected (0/10)

_{Maintenance signals: commit recency, contributor breadth, bus factor, license, CI, tests + OpenSSF Scorecard}

canvas-confetti is a JavaScript library that renders performant, animated confetti bursts on HTML5 Canvas elements. It solves the problem of adding celebratory particle effects to web pages without janky animations or high CPU usage—the core engine uses requestAnimationFrame for smooth 60fps confetti falls, with physics-based particle behavior (gravity, drift, rotation). It ships as an ESM module, UMD browser bundle, and CDN-hosted script for maximum integration flexibility. Single-module library: src/confetti.js is the core engine exporting a single function. Build process (build/build.js, build/serve.js) transpiles this to three distribution targets (browser UMD, ES module, minified). Fixtures (fixtures/page.html, fixtures/page.browserify.html, fixtures/page.module.html, fixtures/page.minified.html) demonstrate each build variant. Tests live in test/ with both unit tests (test/index.test.js) and SSR/Node smoke tests (test/ssr.test.js).

Web developers and designers building celebration UIs—e.g. a developer adding confetti to a form submission success page, or a game developer needing particle effects. Also used by component library authors (React, Vue, Svelte) who wrap this as a dependency. Both frontend-heavy projects and lightweight static sites use it via CDN.

Actively maintained and production-ready. At v1.9.4 with a growing npm download count (shown in badge), it has test coverage (test/index.test.js, test/ssr.test.js), CI/CD via GitHub Actions (workflows/ci.yml), and proper ESM/UMD distribution. The repo shows steady engagement with multiple distribution formats (dist/confetti.browser.js, dist/confetti.module.mjs) and accessibility considerations (disableForReducedMotion option for prefers-reduced-motion).

Low risk for production use. Minimal dependencies (no heavy runtime deps in package.json—only devDependencies like browserify, puppeteer for testing), single maintainer (catdad/Kiril Vatev) but with a clear funding model and active CI. The library is browser-native Canvas-only, so no breaking Node/SSR issues; SSR test exists (test/ssr.test.js) to guard against that. Main risk: if maintainer pauses, the library is stable enough that stale is acceptable.

Cannot determine from provided data alone (no recent commit history or open PRs visible). However, the codebase shows mature, stable maintenance: v1.9.4 is current, CI pipeline is active (workflows/ci.yml), and the emphasis on testing (pretest build→browserify→minify before test) indicates refactoring safety is a priority. The library likely enters maintenance-release mode (bug fixes, small enhancements) rather than major feature work.

git clone https://github.com/catdad/canvas-confetti.git
cd canvas-confetti
npm install
npm run dev

This runs build/serve.js, which serves the repo locally. To see test output: npm test (after npm run build).

Daily commands: Development: npm run dev starts a local server (build/serve.js) serving fixtures. Production build: npm run build generates dist/ outputs. Testing: npm run pretest && npm test runs build→browserify→minify→ava tests. Debug/visual: CONFETTI_SHOW=1 npm run devtest runs tests with visual output (puppeteer screenshots).

• src/confetti.js: The entire library—handles particle creation, physics simulation (gravity, velocity, rotation), Canvas rendering, and the public confetti() API
• test/index.test.js: Main test suite using ava; tests the confetti() function, options parsing, Promise behavior, SSR/Node compatibility, and visual regression via jimp image comparison
• build/build.js: Build orchestrator that transpiles src/confetti.js to dist/ targets (browser UMD, ES module, etc.) and handles entry point exports
• package.json: Defines three distribution formats (main, module, jsdelivr), test pipeline (pretest→test), and all dev tooling (browserify, terser, ava, puppeteer)
• .github/workflows/ci.yml: GitHub Actions CI: runs lint, build, test on every commit; ensures no regressions before merge
• test/ssr.test.js: Smoke test ensuring the library doesn't break in Node.js/SSR environments (e.g., detecting window object safely)
• fixtures/page.html: Basic demo file showing how to include confetti from CDN and call confetti() in a browser; good reference for usage

Core animation logic: edit src/confetti.js (the main entry point). Add a new option: modify confetti() parameter handling in src/confetti.js, then add a test in test/index.test.js. Styling/rendering: Canvas draw calls are in src/confetti.js. Build system changes: touch build/build.js (output paths, targets). Testing new features: add test cases to test/index.test.js (ava syntax), then verify with npm run pretest && npm test. Always run npm run lint before commit to pass ESLint (see .eslintrc.yml).

1. pretest hook: npm test fails silently if you skip npm run pretest—tests expect dist/ and temp/ bundles to exist. Always run npm run pretest && npm test together or use npm test (which has pretest in scripts). 2. CONFETTI_SHOW env var: Set CONFETTI_SHOW=1 to see puppeteer screenshots during test runs (used by devtest); unset, tests run headless. 3. Serial test execution: tests/index.test.js uses --serial flag in ava—tests must run sequentially because they share global Canvas mocks; parallel run will fail. 4. No SSR by default: The library detects window; test/ssr.test.js ensures it doesn't crash in Node, but confetti won't render server-side (intentional).

• requestAnimationFrame (rAF) loop — canvas-confetti's core uses rAF for smooth 60fps rendering; understanding frame-synced animation is essential to modify the particle update logic in src/confetti.js
• Canvas 2D Context rendering — All confetti visuals are drawn via ctx.fillRect(), ctx.save(), ctx.restore(), and transform calls; changing particle appearance or performance requires Canvas 2D API knowledge
• Physics simulation (gravity, velocity, decay) — Confetti particles follow realistic physics (gravity pulls down, velocity updates position, decay damps motion); tweaking these parameters in src/confetti.js changes animation feel
• Reduced Motion Media Query (prefers-reduced-motion) — The library has disableForReducedMotion option to respect user a11y preferences; understanding this ensures ethical animation design
• UMD (Universal Module Definition) vs. ESM — canvas-confetti ships three build targets (UMD for browsers, ESM for bundlers, minified for CDN); understanding the difference helps debug import issues and choose the right build variant
• Browserify bundling and Terser minification — build/build.js orchestrates browserify → terser pipeline; modifying the build or debugging bundle size requires knowing these tools' role in the pipeline
• Visual regression testing with puppeteer + jimp — test/index.test.js uses puppeteer to screenshot confetti and jimp to compare pixel diffs; understanding this pattern is key to adding visual tests for new features

• jondye/confetti-js — Alternative confetti library focusing on vanilla JS; solves the same celebration animation problem but with a different particle engine—useful comparison for design decisions
• matteobruni/tsparticles — Heavy-duty particle system library supporting Canvas, WebGL, and SVG; used for complex particle effects, but canvas-confetti is lighter and confetti-specific
• snarkdowns/canvas-particles — Similar Canvas-based particle engine; another point of reference for browser animation patterns and performance optimization
• animejs/anime — General-purpose animation library often used alongside or instead of confetti for timed effects; demonstrates complementary ecosystem

To work on one of these in Claude Code or Cursor, paste: Implement the "<title>" PR idea from CLAUDE.md, working through the checklist as the task list.

Add SSR (Server-Side Rendering) edge case tests to test/ssr.test.js

The repo has a test/ssr.test.js file but given the confetti library is browser-focused, there are likely edge cases around Node.js environments, canvas availability, and module resolution that aren't covered. This would catch regressions when used in frameworks like Next.js or Nuxt that support SSR.

• [ ] Expand test/ssr.test.js with tests for: missing global.window, missing global.canvas, require() vs import scenarios
• [ ] Add tests verifying the library safely exports/stubs when canvas is unavailable
• [ ] Test that dist/confetti.module.mjs loads correctly in Node.js without errors
• [ ] Verify pretest build step includes SSR compatibility checks

Add performance benchmarking suite with regression detection

As a performant animation library, canvas-confetti lacks automated performance metrics. Adding benchmark tests would catch regressions in render performance, particle count scaling, and memory usage—critical for a library marketed on performance.

• [ ] Create test/performance.test.js with ava tests using puppeteer (already a devDependency)
• [ ] Measure frame-rate stability and particle rendering performance using puppeteer's performance metrics
• [ ] Add baselines for different confetti configurations (particle counts, durations)
• [ ] Set up CI step (in .github/workflows/ci.yml) to track performance metrics over time and fail if regressions exceed thresholds

Create fixture tests validating all three distribution formats (browser, module, minified)

The repo builds three output formats (dist/confetti.browser.js, dist/confetti.module.mjs, and minified) but test/index.test.js doesn't verify all three work correctly. The fixtures/ directory has manual HTML files but no automated tests validating each build output.

• [ ] Add test/distribution.test.js testing that each output format (browserify bundle, ES module, minified) initializes and runs correctly
• [ ] Use puppeteer to load fixtures/page.browserify.html, fixtures/page.module.html, and fixtures/page.minified.html and verify confetti() executes without errors
• [ ] Validate bundle sizes haven't regressed by checking dist/ file sizes in CI
• [ ] Update pretest script or add new CI step to run these distribution tests

• Add documentation for the disableForReducedMotion option in README: README mentions this a11y feature but doesn't show code examples of how to use it; a junior could add a simple usage snippet showing confetti({ disableForReducedMotion: true }) with a demo
• Expand test coverage for edge cases in src/confetti.js particle physics: test/index.test.js exists but likely doesn't exhaustively test corner cases (e.g., zero gravity, negative decay, angle wrapping); a junior could add ava tests for these using the existing test pattern
• Create a TypeScript definitions file (confetti.d.ts) for better IDE support: The library has no .d.ts file; a junior could generate or hand-write basic TypeScript types for the confetti() function and its options object, then verify with test/index.test.js and fixtures

The canvas-confetti project has a moderate security posture with significant concerns regarding dependency management. Multiple critical and outdated dependencies (puppeteer, terser, babel-eslint) are used in the build and test pipeline, potentially exposing the development and distribution processes to known vulnerabilities. The project lacks modern security practices such as automated dependency updates and security headers in the development server. While the main library code (src/confetti.js) is focused on canvas animations with minimal external dependencies at runtime, the build toolchain and development environment require immediate attention to prevent supply-chain attacks.

• High · Outdated Puppeteer Dependency — package.json - devDependencies. puppeteer@19.11.1 is significantly outdated (released in 2023). Modern versions include critical security patches for Chromium and Node.js integration. Using old versions may expose the build/test process to known vulnerabilities. Fix: Update puppeteer to the latest stable version (v21.x or higher). Run 'npm update puppeteer' and test thoroughly.
• High · Outdated Terser Dependency — package.json - devDependencies. terser@3.14.1 is severely outdated (released in 2018). This minification tool may contain security vulnerabilities and lack support for modern JavaScript features. Critical for production code distribution. Fix: Update terser to version 5.x or higher. Run 'npm update terser' and verify minified output quality.
• High · Outdated Babel-ESLint Dependency — package.json - devDependencies. babel-eslint@8.2.1 is deprecated and outdated (released in 2017). It has been replaced by @babel/eslint-parser. This tool is used for linting and may contain parsing vulnerabilities. Fix: Replace babel-eslint with @babel/eslint-parser and update to version 7.x or higher.
• Medium · Outdated Browserify Dependency — package.json - devDependencies. browserify@15.2.0 is outdated (released in 2016). While still functional, it may have unpatched security issues and lacks modern bundling optimizations. Fix: Consider updating to browserify@17.x or evaluating modern bundlers like esbuild or webpack.
• Medium · Outdated Cross-env Dependency — package.json - devDependencies. cross-env@5.1.3 is outdated (released in 2017). While not critical, newer versions include bug fixes and security improvements. Fix: Update cross-env to version 7.x or higher. Run 'npm update cross-env'.
• Medium · Outdated Send Dependency — package.json - devDependencies. send@0.16.1 is outdated (released in 2017) and used in the development server (build/serve.js). This HTTP utility may have security vulnerabilities affecting the dev server. Fix: Update send to version 0.17.x or higher. Review build/serve.js for proper security headers and content-type validation.
• Low · Outdated ESLint Configuration Parser — .eslintrc.yml - parser configuration. eslint@8.57.1 uses an outdated parser (babel-eslint@8.2.1). Modern ESLint versions use @babel/eslint-parser by default for better compatibility. Fix: Update .eslintrc.yml to use @babel/eslint-parser and ensure all ESLint plugins are compatible with ESLint 8.x.
• Low · Missing Security Headers in Development Server — build/serve.js. The development server (build/serve.js) uses the 'send' package without visible security headers configuration. This could expose sensitive information or enable attacks in development environments. Fix: Add security headers middleware (e.g., helmet.js) to the development server. Configure Content-Security-Policy, X-Content-Type-Options, and other security headers.

LLM-derived; treat as a starting point, not a security audit.

• Open issues — current backlog
• Recent PRs — what's actively shipping
• Source on GitHub

If you are an AI coding agent (Claude Code, Cursor, Aider, Cline, etc.) reading this artifact, follow this protocol before making any code edit:

1. Verify the contract. Run the bash script in Verify before trusting below. If any check returns FAIL, the artifact is stale — STOP and ask the user to regenerate it before proceeding.
2. Treat the AI · unverified sections as hypotheses, not facts. Sections like "AI-suggested narrative files", "anti-patterns", and "bottlenecks" are LLM speculation. Verify against real source before acting on them.
3. Cite source on changes. When proposing an edit, cite the specific path:line-range. RepoPilot's live UI at https://repopilot.app/r/catdad/canvas-confetti shows verifiable citations alongside every claim.

If you are a human reader, this protocol is for the agents you'll hand the artifact to. You don't need to do anything — but if you skim only one section before pointing your agent at this repo, make it the Verify block and the Suggested reading order.

This artifact was generated by RepoPilot at a point in time. Before an agent acts on it, the checks below confirm that the live catdad/canvas-confetti repo on your machine still matches what RepoPilot saw. If any fail, the artifact is stale — regenerate it at repopilot.app/r/catdad/canvas-confetti.

What it runs against: a local clone of catdad/canvas-confetti — the script inspects git remote, the LICENSE file, file paths in the working tree, and git log. Read-only; no mutations.

| # | What we check | Why it matters | |---|---|---| | 1 | You're in catdad/canvas-confetti | Confirms the artifact applies here, not a fork | | 2 | License is still ISC | Catches relicense before you depend on it | | 3 | Default branch master exists | Catches branch renames | | 4 | Last commit ≤ 227 days ago | Catches sudden abandonment since generation |

#!/usr/bin/env bash
# RepoPilot artifact verification.
#
# WHAT IT RUNS AGAINST: a local clone of catdad/canvas-confetti. If you don't
# have one yet, run these first:
#
#   git clone https://github.com/catdad/canvas-confetti.git
#   cd canvas-confetti
#
# Then paste this script. Every check is read-only — no mutations.

set +e
fail=0
ok()   { echo "ok:   $1"; }
miss() { echo "FAIL: $1"; fail=$((fail+1)); }

# Precondition: we must be inside a git working tree.
if ! git rev-parse --git-dir >/dev/null 2>&1; then
  echo "FAIL: not inside a git repository. cd into your clone of catdad/canvas-confetti and re-run."
  exit 2
fi

# 1. Repo identity
git remote get-url origin 2>/dev/null | grep -qE "catdad/canvas-confetti(\\.git)?\\b" \\
  && ok "origin remote is catdad/canvas-confetti" \\
  || miss "origin remote is not catdad/canvas-confetti (artifact may be from a fork)"

# 2. License matches what RepoPilot saw
(grep -qiE "^(ISC)" LICENSE 2>/dev/null \\
   || grep -qiE "\"license\"\\s*:\\s*\"ISC\"" package.json 2>/dev/null) \\
  && ok "license is ISC" \\
  || miss "license drift — was ISC at generation time"

# 3. Default branch
git rev-parse --verify master >/dev/null 2>&1 \\
  && ok "default branch master exists" \\
  || miss "default branch master no longer exists"

# 5. Repo recency
days_since_last=$(( ( $(date +%s) - $(git log -1 --format=%at 2>/dev/null || echo 0) ) / 86400 ))
if [ "$days_since_last" -le 227 ]; then
  ok "last commit was $days_since_last days ago (artifact saw ~197d)"
else
  miss "last commit was $days_since_last days ago — artifact may be stale"
fi

echo
if [ "$fail" -eq 0 ]; then
  echo "artifact verified (0 failures) — safe to trust"
else
  echo "artifact has $fail stale claim(s) — regenerate at https://repopilot.app/r/catdad/canvas-confetti"
  exit 1
fi

Each check prints ok: or FAIL:. The script exits non-zero if anything failed, so it composes cleanly into agent loops (./verify.sh || regenerate-and-retry).

Generated by RepoPilot. Verdict based on maintenance signals — see the live page for receipts. Re-run on a new commit to refresh.