Detailed Prompt for Recreating the Filter Lab Application

Overview

Create a professional filter lab application for applying real-time visual effects to images and videos. The app uses WebGL2 for high-performance rendering and features a comprehensive set of CRT/retro-style filters with a modern, dark-themed UI.

Application Structure

Layout

• Two-panel layout: Left sidebar (360px wide) for controls, right panel (flex-grow) for media preview
• Responsive: On screens < 1080px, stack vertically with controls panel max-height 260px
• Color scheme: Dark blue gradient background with semi-transparent panels
  • Background: radial-gradient(circle at 12% 18%, #485c88, #25334c 45%, #101828)
  • Controls panel: linear-gradient(170deg, rgba(18, 28, 46, 0.96), rgba(12, 20, 32, 0.94))
  • Preview panel: linear-gradient(140deg, rgba(23, 30, 44, 0.9), rgba(12, 18, 30, 0.95))

Technology Stack

• React 18.3.1 with TypeScript/JavaScript
• WebGL2 for rendering pipeline
• Custom GLSL shaders for all effects
• Context API for state management

Filter Sections & Controls

1. Media Upload Section

Purpose: Upload and manage source media (images or videos) Controls:

• File upload box accepting image/* and video/*
• Displays filename and dimensions when media is loaded
• Shows "Click to upload" message when empty
• For videos: Auto-play, loop, muted by default, with sound controls overlay Default: No media loaded