What codes for the confetti in docker/welcome-to-docker?
I was recently impressed by the nuanced, physically realistic motion of the falling confetti in the confetti animation in the docker/welcome-to-docker image
used in the introductory tutorial by docker.
docker run -d -p 8080:80 docker/welcome-to-docker #then open http://localhost:8080
What is the code behind this confetti sim? How do I extract it?
Solution
The full source code for docker/welcome-to-docker can be found at the GitHub repo docker/welcome-to-docker. In particular, the particles are created using the tsParticles library as seen in src/Confetti.js.
- What codes for the confetti in docker/welcome-to-docker?
- Delay between percentages in keyframes css
- make animation return to initial value (background-color)
- CSS animation causes images to flicker
- CSS Animation to go only forward and stop. Currently it goes back and forth
- CSS animate arrow animation to the right out of a circle and back in from the left
- Dynamic border hover effect
- React - animate mount and unmount of a single component
- CSS animations - initialise animation at last frame
- Use $derived based on current state of self
- SVG Animation: Text Moves along a circle
- Animating max-height with CSS transitions
- Change text with a CSS3 animation?
- CSS linear gradient progress animation
- I can't get my CSS animation using steps() of sprite right
- Triple dot CSS animation on a loading screen
- CSS border color switch animation: "from" color not correct
- Christmas Lights Loop Effect
- Keyframes animation not playing on Firefox
- How would I create a rotation animation that switches direction continuously as it goes through each cycle?
- How can I compose multiple CSS animations/properties that all use transform?
- Laggy/Glitchy CSS Animations only on Firefox with Intersection Observer
- How can I transition width of content with width: auto?
- How to add a delay or smooth out scroll-driven animations using the animation-timeline property?
- Shopify custom animation css not working on ios device only but it works on web and android devices
- How to apply transition only on transform: translateX()?
- Ring-shaped process spinner with fading gradient effect around the ring
- CSS animation on multiple elements: resync after hover
- How do I create a scroll which is similar to this?
- CSS Gradient Animation Not Working in Svelte Component