I need to create a realistic firework effect on a white background that looks like this disney fireworks on a website (imagine a full page background with a title at the center of the page, text is fading in and fireworks appear halfway, lastly a magical arch dust will fly across the title at the center and then redirect to a landing page. Here is the rough demo at codepen - assume that the video is being wrapped in a <video/> tag) and I do not know whether it is possible to recreate this level of animations with just HTML, CSS and JS or any kind of frameworks or libraries (any recommend would be great).
One of the solutions that I could think of is to create a video with some video effect software maybe like AfterEffects and put it in the background of the title, the big issue here is the time cost to learn the software in a short period of time and another issue of using video is the layout would be not as responsive and it might not scale properly with the HTML elements. So I suppose that I would need to create the animation and font in the video itself as well, so that they would scale together properly with the fireworks and the arch dust?
There are some sample codes of fireworks effect but they are just not realistic enough or doesnt work well with white background e.g.Firework jsFiddle.
I would like to know how would any of you guys approach this task? I would really appreciate any kind of advice. Note: I haven't implemented it in React yet.
You can use react-lottie there you can create effects with after effects and export as JSON and Lottie can then control that animation.
That will be responsive and you can even control frames start end time a lot of customizations.
But you have to create effects with after effects only or you can search for fireworks JSON files and combine them and create such animation. can you can check react-springs for combining animations.