GIS Territory Explorer
Explore a fictional service network with ArcGIS, linked comparisons, spatial filters, and an accessible records view.
ArcGIS · DataTables · browser preferences
Make success feel
impossible to miss.
Celebration.js is a free, dependency-free effects engine for confetti, fireworks, lightning, plasma, portals, elemental magic, advanced particle physics, generated sound cues, and dramatic error states.
- 0dependencies
- 140success visuals
- 70generated sounds
- 20error effects
Engineering field notes / Project Lead: Chason ArthurBuild it. Inspect it.
Build it. Inspect it.
Understand the tradeoffs.
Four working experiments beside Celebration.js, with source-driven tutorials, synthetic data, and visible integration boundaries. Each tutorial explains alternatives, pitfalls, and how to verify the result.
Computer tutorial recording playbook — prepare a result-first script, readable screen capture, captions and a verified learning package. Expanded review progress: this subset includes the four independently reviewed demos; other additions remain outside this deployment.
AI Integration Workbench
Validate and cite a synthetic service workflow, review the result, and inspect Bold Lens framing signals in a Vue reader.
Structured output · human review · fixture mode
Vue Dealer Portal
Follow a synthetic catalog, quote, approval, and order flow. Inspect the separate Laravel backend and its measured test evidence.
Vue · TypeScript · Laravel · MySQL schema
UX Workspace Studio
Change allowlisted design tokens, preview owned UI surfaces, and move validated preferences between browsers with JSON.
Advanced CSS · DataTables · local storage
Read implementation evidence and release limits → Browser settings are local to this browser and device. Synthetic previews do not send real orders, verify real credentials, or prove production scale.
The playground
Click around.
Click around.
Rate the explosions.
Every preset is numbered so you can compare effects quickly. Sound starts only after your first interaction and can be turned off at any time.
Showing 60 new effects, including lightning, plasma, portals, elemental forces, impacts, and kinetic systems.
Start anywhere
Make it come from the action.
Pass a selector, DOM element, or event target. Every success preset can originate behind that element. Random draws from all 140 styles; round-robin plays every style once before repeating.
Celebration.fireFrom('#shipButton', {
animation: 'random',
sound: 'random',
anchorPoint: 'center',
behind: true,
alert: false
});
LIVE TARGET
The burst is masked until it clears the button.
Visual sequence builder
Direct the whole moment.
Stack numbered effects, sounds, origins, delays, physics, and screen treatments. Preview the result, then copy the generated JavaScript.
StagesDelay is measured from the previous stage.
Two-minute install
One script.
One script.
One call.
Download the library or link directly while prototyping. For production, serve your own copy so you control caching and releases.
1 / Add the script
<script src="/js/celebration.js"></script>2 / Fire an effect
Celebration.fire({
animation: 118,
sound: 'explosive',
intensity: 'huge',
alert: false
});Celebration.js v2.0.3Readable source · dependency-free · MIT License
Download source ↓
Read documentation →
Read Zyel field notes →
View license →
Small API, big range
Compose a whole moment.
Choose effects by number or name, rotate automatically, queue precise stages, add physics, and reproduce any result with a seed.
Direct control
playAnimation() and playSound() give you separate control over visual and audio feedback.
Smart rotation
Choose random, non-repeating round-robin, or a specific number/name independently for visuals and sounds.
Timed queues
Build bottom, top, and four-corner finales with per-step animation, sound, origin, and delay settings.
Error states
Render a full-screen visual with a custom icon, title, and real error message—without adding another dependency.
Physics fields
Add attraction, repulsion, edge collisions, directional cones, particle scaling, and automatic device performance limits.
Screen treatments
Combine source outlines with shake, flash, blur, chromatic distortion, mobile haptics, and source-derived colors.
Named combos
Launch reusable directors such as supernovaFinale, portalBreach, or everythingDetonates.
Deterministic motion
Pass a seed to reproduce a random selection and its particle layout exactly, or attach subtle effects to pointer movement.
Queued finale
Bottom. Top. Every corner.
Three stages, two sound cues, one call.
Made by Zyel
Free tools are useful.
Free tools are useful.
Finished products are better.
Zyel is a web consulting and product studio for organizations that need strategy, design, engineering, AI, automation, and operations to work as one system.
Talk about your project