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”
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 in the browser

Section titled “Run it in the browser”
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”