Video Walkthrough Live Demo

Summary

• Create 4 images, one for the bg, one for second, minute, hour hands
• Align them all, make sure they're same size.
• Do some pi math to find how much to rotate them to current time.
• Generate the image n times and encode it into a gif.
• Save it and serve it.

/highlight – p5.js / highlight code to generate dynamic artwork
/* – standard remix.run application that renders frames

• Modified from Rolex Explorer
• Background generated with Midjourney

From your terminal:

npm run dev

This starts your app in development mode, rebuilding assets on file changes.

First, build your app for production:

npm run build

Then run the app in production mode:

npm start

Now you'll need to pick a host to deploy it to.

If you're familiar with deploying node applications, the built-in Remix app server is production-ready.

Make sure to deploy the output of remix build

• build/
• public/build/