Skip to content
GJSify

Fireworks (Canvas 2D)

Animated particle fireworks on a <canvas> 2D context, adapted from a popular CodePen by @juliangarnier. Inputs are wired up through @gjsify/event-bridge so clicks fire fireworks in both runtimes.

Live demo

Section titled “Live demo”

What it exercises

Section titled “What it exercises”
PillarSurface used
@gjsify/canvas2dCanvas2DBridge → Gtk.DrawingArea (Cairo + PangoCairo)
@gjsify/dom-elementsHTMLCanvasElement, getBoundingClientRect(), ResizeObserver
@gjsify/event-bridgeGTK4 click + pointer-move → DOM click / pointermove
@gjsify/adwaita-web (browser only)Adwaita-styled control panel for the browser embed

Nothing in the showcase code references @gjsify/* directly — it uses standard <canvas> + ctx.fillRect() + requestAnimationFrame() calls. The framework layer translates each call into GTK4 + Cairo at runtime.

Run it on GJS

Section titled “Run it on GJS”
Terminal
gjsify showcase canvas2d-fireworks

A GTK4 window opens with a Gtk.DrawingArea filling its surface. Click anywhere to fire a firework; the explosion animates at the GTK frame clock’s vsync via the requestAnimationFrame shim.

Run it on Node.js, Bun or Deno

Section titled “Run it on Node.js, Bun or Deno”

This showcase declares all four runtimes (package.json#gjsify.example.runtimes: ["gjs", "node", "bun", "deno"]), so the exact same GTK4 window also runs through the @gjsify/node-gi reverse bridge:

Terminal
gjsify showcase canvas2d-fireworks --runtime node
gjsify showcase canvas2d-fireworks --runtime bun
gjsify showcase canvas2d-fireworks --runtime deno

It is also the reference showcase for devtools over that bridge — GJSIFY_DEVTOOLS=1 gets you the same DumpTree / GetStatus / Screenshot DBus calls on Node, Bun and Deno as on GJS, verified end-to-end on all four runtimes.

Run it in the browser

Section titled “Run it in the browser”
TypeScript
import { mount } from '@gjsify/example-dom-canvas2d-fireworks/browser';
mount(document.getElementById('app')!);

Same code — the <canvas> is a real browser canvas, not a bridge.

Source

Section titled “Source”

showcases/dom/canvas2d-fireworks/ — entry points: src/gjs/gjs.ts (GTK shell), src/browser/browser.ts (mount), src/browser/browser-main.ts (standalone fullscreen browser entry), src/fireworks.ts (the particle simulation, runs unchanged in both targets).

The shared module is the value: it imports nothing platform-specific, only the standard Canvas 2D API surface. That surface is the contract between the browser and @gjsify/canvas2d — every method it uses must hold up identically in both runtimes.

Section titled “Related”