CSS Rainbow Animator

This is a small web app that allows you to generate animated rainbow gradients. Simply configure all the parameters you need and then click on download to get a web site that will just display your gradient animation. If you are not in the mood for rainbows, that's also fine, you can adjust colors and speeds as you wish. In any way you can create your own light mood for meditation, listening to music, whatever.

You can find the CSS Rainbow Animator running here.

Developing

This is a web site that uses web technologies like React, TypeScript, Next.js, Prettier and ESLint to assemble some browser-provided components like color inputs, CSS Animations and – of course – color gradients!

To get started run

npm install

Developing works best if you use an IDE with TypeScript and ESLint support built in. Then just start the dev server:

npm run dev

The server will preview your changes at http://localhost:3000/css-rainbow-animator and refresh the components as you do changes.

Before committing, you should run the linters, just in case you missed something:

npm run lint

In the end you can build and export all the required files to the out directory using:

npm run build

That's it!

There are some GitHub actions to lint and build the app, as well as deploy the main branch to GitHub pages at https://bxt.github.io/css-rainbow-animator/.