React Glitter Studio

ReactTypeScriptCanvas

Pink orange cursive glitter text

Striped bubbles glitter text

This lighthearted project aims to create a modernised version of the retro glitter graphic GIFs that were popular in the 2000s. While the original glitter graphics were made by tiling pre-existing animated gifs, my Glitter Studio generates the backgrounds and glitter animations at runtime - meaning that you can achieve a much more customised result with the exact colours, patterns, and sparkle types that you prefer. It has a “Random” feature for generating a random configuration, and you can even upload custom sparkle images. Sparkle type: banana, anyone?

Features

  • Preset and random glitters for quick glitter creation
  • Sparkle type: goldfish - enough said
  • Customisable backgrounds and colour schemes
  • Animated backgrounds: scrolling stripes, infinite radials
  • Custom sparkle images
  • Exports glitter graphics as GIFs using the “modern-gif” library
  • Harmonious random colour schemes by using colour theory
  • Dark mode

Technical Details

Made with React and Typescript. Uses localStorage to store custom sparkle images for later use.