1. Make an app that lets me select a local image or video file to show in a container.
  2. The app should be 2 parts: a settings panel and the video/image container.
  3. The app creates a layer on top of the entire browser window that acts as a filter that changes how the browser window looks. This includes both the settings panel and the video/image container. I am able to click and interact with the website. The layer I’ve created should be dynamic and instantly reflects the changes in the website.
  4. Add a checkbox toggle to let me select between color or black or white. When I check the black and white box, the layer will turn the entire browser window black and white. When I uncheck the box, the layer will go back to color.
  5. Add the option to toggle a grid overlay for the browser window. Add sliders for the width and height of the grid in pixels from 1 to 100. Add number fields to both width and height so that I can enter a value from 1 to 100. The slider should be adjustable.
  6. Now add the ability to mosaic blur each grid unit like this: https://codepen.io/webdev-jp-net/pen/poQWPJx. Each grid unit should have only 1 color or hex value that is the average of every pixel within that grid unit. Make sure it covers the entire image even when I resize the window.
  7. Add the option to upload a small PNG or SVG pattern that will be overlaid within each and every grid unit. Include the pixel dimension of the image that is uploaded. If the image is of different dimension than the grid pattern size, then stretch the image to accommodate and over the grid unit.
  8. Add a slider for opacity of the pattern image overlay from 0-100%, include a number value field too so I can type in the value. Also add a checkbox to show/hide the patterns.
  9. Add a blend mode option for the pattern overlay with “soft light”, “hard light”, and “hard mix” from Photoshop’s layer blend modes. Here’s how Photoshop defines each setting: Soft Light: Darkens or lightens the colors, depending on the blend color. The effect is similar to shining a diffused spotlight on the image. If the blend color is lighter than 50% gray, the image is lightened. If the blend color is darker than 50% gray, the image is darkened. Blending with pure black or white produces a distinctly darker or lighter area but does not result in pure black or white. Hard Light: Multiplies or screens the colors, depending on the blend color. The effect is similar to shining a harsh spotlight on the image. If the blend color is lighter than 50% gray, the image is lightened, as if it were screened. If the blend color is darker than 50% gray, the image is darkened, as if it were multiplied. This mode is useful for adding shadows to an image. Hard Mix: Adds the red, green, and blue channel values of the blend color to the RGB values of the base color. If the resulting sum for a channel is 255 or greater, it receives a value of 255; if less than 255, it receives a value of 0. Therefore, all blended pixels have red, green, and blue channel values of either 0 or 255. This changes all pixels to primary additive colors (red, green, or blue), white, or black.
  10. Make the UI small and use the space efficiently. I don’t want anything to span the entire width of the window, instead create 2 or 3 columns so that more controls can fit within the UI.
  11. This is super slow and freezes my browser. Make this much more performant and efficient so that my browser can run this smoothly.

Detailed prompt generated by Cursor