Project
Roulette

Flip Art

The objective of the Flip Art app is to address both of these needs by providing a simple way to collect and arrange a set of images into an animated…

IntermediateWeb appCreative8–22hAI-buildable 5/5no setupworth shipping

Many developers have found that adding animation to an application is a useful technique that adds impact to the UI, to make it more appealing to its users, and to explain complex subject matter. But, as a developer how do you create these and how do you know what images make effective animations? The objective of the Flip Art app is to address both of these needs by providing a simple way to collect and arrange a set of images into an animated sequence that can be replayed and adjusted to achieve the desired impact and effect. ### Requirements & Constraints Developers should not rely on…

UI
Logic
Useful

Hosting · Free forever

Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.

Deploy it and share a link.

Core features · 14

  • User can see the following primary components in the app window:
  • Configuration panel containing elements used to tailor the animation
  • Operation buttons
  • Animation display panel animations will be presented in
  • User can see eight thumbnails that will contain individual animation
  • User can see a button under each thumbnail - '+'
  • User can click the '+' button to add a new image to an empty thumbnail
  • User can see a file open dialog when the '+' button is clicked to
  • User can see the '+' button label change to '-' after a thumbnail is
  • User can click the '-' button to remove or replace a thumbnail.
  • User can see an 'Transition Speed' slider control.
  • User can adjust the 'Transition Speed' slider from slow to fast to
  • User can see two buttons - 'Clear Configuration' and 'Start Animation'
  • User can see the 'Start Animation' button disabled until at least one

Once it works

  • User can see the border around the thumbnail in the Configuration Panel
  • User can dynamically add any number of thumbnails rather than being
  • User can hear unique sounds associated with modifying thumbnails in the
  • User can see a transition type dropdown in the Configuration Panel to
  • User can drag and drop thumbnails to reorder them
  • User can save the animation as a .gif file.

Suggested stack

reacttypescripttailwindrechartsdnd-kitframer-motionlocalstorage

Track it