Magic Patterns:

https://www.magicpatterns.com/c/tx7c3fxud3v8sguhkvmffa

Prompt to recreate my design:

. Core Build Prompt (HTML/CSS/JS)

Project: “Universal Mosaic Filter Lab”

Goal: Build a single-page web app (plain HTML/CSS/JS) that lets me upload an image or video, renders it in a viewer, and overlays a dynamic mosaic/grid/pattern/glow system across the entire viewport. Keep it performant and faithful to the details below.

Layout & Visual Style

• Split layout: narrow left settings panel (300–360 px) + right viewer panel filling remaining width. Responsive fallback to stacked panels on small screens.
• Panel uses a compact two-column control grid (equal column widths, switch to one column on narrow widths).
• Apply a deep blue-grey tinted theme with subtle gradients, soft shadows, rounded corners, and muted text.
• Include a “Tips & Shortcuts” note box listing:
• Hold C to show overlay filter; release to hide.
• Grid size and pattern tips for performance.
• Style kbd elements like minimal keyboard keys.

Controls

• Media file chooser (image/video) with “Select” button and filename display.
• Pattern visibility checkbox, upload (PNG/SVG) button, and label showing name + dimensions.
• Mosaic grid size sliders + number inputs (1–100 px, width & height).
• Pattern opacity slider + number input (0–100%).