# Firework Simulator is a web page that draws fireworks, configured from one file

> Firework Simulator is a static web page that renders a range of fireworks effects in the browser, and it has almost no machinery: an index.html, a css directory, a js directory with an app subdirectory, and folders for images, fonts and audio. The background, the text fireworks content and the default behaviour are all set by editing a handful of specific lines in the JavaScript configuration files.

**NianBroken/Firework_Simulator** — 烟花模拟器，一个可以模拟各种烟花效果的网页，它可以展示各种绚丽多彩的烟花效果，并让人仿佛置身于真实烟花的绚丽世界之中。| 模拟烟花 | 烟花网页 | 烟花绽放 | 烟花效果

- Repository: https://github.com/NianBroken/Firework_Simulator
- Website: https://fireworks.nianbroken.top
- Stars: 887 · Forks: 325
- Language: JavaScript
- License: Apache-2.0
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/nianbroken-firework-simulator

## A static page rather than a component

Firework Simulator is a web page that simulates various fireworks effects. The README describes it as a page that can display a range of colourful fireworks effects and make people feel as if they were in the world of real fireworks, and the project description in Chinese says the same thing in its own terms.

What the repository contains makes the nature of the project clear. There is an index.html at the root, a css/ directory, a js/ directory, and then images/, fonts/ and audio/ directories. That is a static site, not a package. There is no build script in the listing, no package.json, no test directory and no published artifact.

That distinction matters for how you use it. You do not install Firework Simulator, you deploy it. You copy the files to a web host, or you open index.html locally, and you get the effect. The homepage is fireworks.nianbroken.top, and there is also a preview published through GitHub Pages at nianbroken.github.io/Firework_Simulator/, and the README's preview section links to that GitHub Pages URL.

The audience is somebody who wants the visual result, not somebody who wants a dependency. A stream overlay, a landing page, a title sequence, a classroom demonstration. The author also asks for issues and pull requests at the end of the README, which is the standard way of saying that the project is open to contributions even though it is presented as a finished page.

The primary language is JavaScript, the topics are html, css and javascript, and the licence is Apache-2.0.

## The background is a mode, a value and a line number

The configuration section is where this project is more interesting than its size suggests, because the way the background is configured is a small design decision that any adopter has to understand.

The README says to edit lines 10 and 11 of the js\app\config.js file to change the default background, and it defines three modes. When the mode is none, no default background is used. When the mode is image, the value holds an image path or address, with the example given being ./Image_Preview.png. When the mode is style, the value holds a complete CSS background style string, and the example is a linear-gradient with three colour stops.

So the background is one object with a mode and a value, and the two non-none modes hand the same field different kinds of data, a path or a CSS string. That is a small and slightly awkward interface, and it is the kind of thing that matters if you want to configure the page from somewhere else rather than by hand.

The reason the file has a fixed layout is that the configuration is expressed as literal lines in a JavaScript file, and the README points at line numbers rather than at keys. That is a deliberate trade: it makes the file editable by anyone, in any editor, with no tooling, and it means the configuration is not programmatically addressable.

The same file also holds the text fireworks content, on line 7. The text firework is the feature where the shape of the burst is drawn from text rather than being a generic explosion, and the README explains that you edit that line to change what the text fireworks say.

## One flag decides whether the text fireworks open by default

The second configuration knob is in a different file, and it is worth separating from the background one because it is a behaviour setting rather than a content setting.

The README says that to change whether the text fireworks open by default, you edit line 78 of the js\app\store.js file, and that the value can be true or false.

Two things follow from that. The first is that the state lives in a store module, which is the usual place for it, and that the setting is read at start-up rather than being a user facing control in the page. The second is that the flag is a boolean literal on a specific line, which means it is changed by editing source rather than by configuring anything.

Taken with the previous section, the full configuration surface of the project is three things. The background, which is a mode and a value on lines 10 and 11 of the configuration file. The text fireworks content, on line 7 of the same file. And whether the text fireworks are shown when the page opens, on line 78 of the store file.

That is genuinely small, and it is the honest description of what this project is. There is no settings panel, no query string configuration and no documented programmatic API, and the README does not claim one. If you need the effect to respond to a URL parameter or to a user control, you are extending the code, not configuring it.

The fonts/ and audio/ directories are the other two inputs a deployer will want to replace. The effect has sound and typography in it, and both ship as folders of assets rather than being generated, which means the licensing and the taste of the defaults are both the deployer's problem.

## The project stands on two earlier pieces of work

The special thanks section names two sources, and they tell you where the ideas came from.

The first is Firework Simulator v2, a CodePen, and the second is the fireworks-2023 project hosted on Gitee by haodong108. The CodePen is the well known original that the JavaScript community has been copying and remaking for years, and the Gitee project is a more recent take.

That is the honest lineage of a repository like this one, and it is also a practical warning. If the effect you want is the one from the CodePen, you can take the CodePen. What Firework Simulator adds is the packaging into a self contained site with the configuration file, the backgrounds and the text fireworks.

The remaining sections of the README are of a different kind. There is a sponsorship section, which points at a VPN service, a Codex relay and a ChatGPT mirror site, with a line saying these are all good value for money. Those are the author's own service recommendations, and they are not part of the software. An organisation evaluating the project for use in a product should treat that section as what it is, and note that the project bundles a link to a VPN in its README.

The licence section states the terms directly. The project is licensed under Apache-2.0, with the copyright line reading Copyright 2022 NianBroken, and the README summarises it as free use, modification and sharing of the code, provided the original licence and copyright information is retained in derivative works and that all modified code is published under the same licence. The LICENSE file sits at the repository root.

## What it is not, and where the project stands

There are three things to keep in mind when you evaluate a repository like this.

The first is that it is a demonstration, not a library. There is no API to learn, no package to install and no test suite, because there is no code contract at all. What you get is a working page whose source you can read and change. That is the right shape for a visual effect you intend to adapt, and the wrong shape for a component you intend to depend on, since you have no way to receive a fix and no signal when behaviour changes.

The second is the visual reuse question. A fireworks effect is generic, but the individual contributions may not be. The credits name a CodePen and a Gitee project, and the repository itself is Apache-2.0, so its own code is permissively licensed. If you plan to reuse the exact effect, the sensible check is to read the acknowledgement and confirm the upstream terms yourself, since an acknowledgement is not a licence grant.

The third is the maintenance state. The recent releases are v2.0 on 2024-02-03, v1.1 on 2022-02-03 and v1.0 on 2022-01-30, and the last push to the repository was on 2026-06-10. So the tagged releases are old, the work on the default branch has continued more recently, and the repository is not archived.

None of that makes the project less useful for what it is. A self contained page with a handful of clearly documented configuration points is a good thing to fork for a one-off visual, and the live preview and the GitHub Pages deployment mean you can judge the result before touching a line.

## Conclusion

Adopt Firework Simulator if you want a fireworks effect for a page, a stream overlay, a title card or a presentation background, and you are comfortable editing a JavaScript configuration file rather than expecting a component API. Do not adopt it if you need a maintained library with tests and releases, because the project ships assets and configuration rather than a package, and the most recent tagged release is v2.0 from 2024-02-03 with the last push on 2026-06-10. Before you use it, open the live preview to judge the effect, read the background mode options in js/app/config.js, and replace the bundled fonts and audio with your own if the defaults are not what you want.

## FAQ

### What is Firework Simulator?

It is a web page that simulates various fireworks effects, built as a static site with an index.html, css, js, images, fonts and audio directories. The live preview is published through GitHub Pages and the project homepage is fireworks.nianbroken.top.

### How do I change the background of Firework Simulator?

Edit lines 10 and 11 of the js\app\config.js file. The mode can be none for no default background, image with a path or address in the value, or style with a complete CSS background string in the value.

### How do I change the text fireworks content and their default state?

The text of the text fireworks is set on line 7 of the js\app\config.js file, and whether the text fireworks open by default is set on line 78 of the js\app\store.js file, with the value being true or false.

### What licence is Firework Simulator released under?

Apache-2.0, with the copyright line reading Copyright 2022 NianBroken and the LICENSE file at the repository root. The README summarises the terms as free use, modification and sharing provided the original licence and copyright are retained and modified code is published under the same licence.

### Is Firework Simulator still being worked on?

The repository is not archived and the last push was on 2026-06-10, but the most recent tagged release is v2.0 from 2024-02-03, with v1.1 and v1.0 both from 2022. The project is a static page rather than a published package.

## Sources

- [License: Apache-2.0](https://github.com/NianBroken/Firework_Simulator/blob/main/LICENSE)
- [NianBroken/Firework_Simulator on GitHub](https://github.com/NianBroken/Firework_Simulator)
- [Project website](https://fireworks.nianbroken.top)
- [README](https://github.com/NianBroken/Firework_Simulator/blob/main/README.md)
- [Releases](https://github.com/NianBroken/Firework_Simulator/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/nianbroken-firework-simulator