From our sponsor: Leverage AI for dynamic, custom website builds with ease.
This is an experimental interactive slideshow component with math shapes and texts using Canvas. The slideshow consists of pairs of shape and text, both made out of particles that the user can interact with and that transition into the next pair when navigating. With Canvas we can dynamically draw 2D stuff using JavaScript and this experiment shows some of the possibilities.
The particles for the shapes have a predefined set of colors that the particles will be painted with. The text will be built up of white particles:
When navigating to the next (or previous) slide, the text and the shape will morph into the new one, creating an interesting effect:
After the transformation, we can see the shape and the text of the next slide:
The particles of the text and the shape are interactive in a way that we can push them around a bit:
Hope you liked it, and that it gave you some inspiration!
