Build an SVG Wave Generator with AI

Build a single-page SVG wave generator as a static HTML/CSS/JS site. Use a dark theme with background #0f0f17, control panel surface #12121a, and accent color #ec4899 (pink). The layout has a control panel on the left (320px sidebar) and a full-width preview area on the right. The preview area takes up the majority of the screen. It shows a live-updating SVG wave rendered at full width. The SVG viewBox should be "0 0 1440 320" (standard section width) and use preserveAspectRatio="none" so it stretches to fill the container width. The wave is generated using SVG path elements with cubic Bezier curves (C commands) to create smooth wave shapes. The path starts at the left edge, follows the wave curve across the width, then drops down to the bottom of the viewBox and back to the start to create a filled shape. The control panel has these sections: Wave Shape Controls: - Amplitude slider (10-150px, default 60) — controls the height of wave peaks and troughs - Frequency slider (1-5, default 2) — controls how many complete wave cycles fit across the width (e.g., frequency 2 = 2 complete waves) - Smoothness slider (0-100%, default 70) — controls how smooth vs jagged the wave curves are by adjusting Bezier control point distances - Randomize seed button — generates new random control points while keeping amplitude/frequency, giving a different wave shape each press - Phase offset slider (0-360 degrees, default 0) — shifts the wave horizontally Layers: - Layer count control (1-4 layers, default 2) with add/remove buttons - Each layer has its own independent color picker and opacity slider (10-100%, default: layer 1 = 100%, layer 2 = 60%, layer 3 = 40%, layer 4 = 30%) - Layers are rendered back to front with increasing amplitude offsets so they create a depth effect - Each layer's wave shape is slightly different (different random seed) to look natural Color Controls: - Per-layer color picker (use native HTML color input) - A gradient toggle per layer: when enabled, shows a second color picker and the layer fills with a linear gradient from color 1 to color 2 (left to right) - Preset color schemes: "Ocean" (#0ea5e9, #06b6d4, #14b8a6), "Sunset" (#f97316, #ef4444, #ec4899), "Forest" (#22c55e, #16a34a, #15803d), "Purple" (#8b5cf6, #a855f7, #c084fc), "Monochrome" (#374151, #4b5563, #6b7280). Clicking a preset applies colors to all layers. Transform Controls: - Flip horizontal button (mirrors the wave) - Flip vertical button (inverts the wave so it hangs from the top) - Both flips can be combined Below the controls, show four export buttons: 1. "Copy SVG" — copies the raw SVG markup as a string 2. "Copy CSS Background" — copies: background-image: url("data:image/svg+xml,..."); background-size: cover; background-repeat: no-repeat; background-position: bottom; (with the SVG URL-encoded) 3. "Download SVG" — triggers a file download of the SVG as wave.svg 4. "Copy React Component" — wraps the SVG in a functional React component Below the main preview, show a "Page Preview" section: a mock webpage section with a colored background div (300px tall) transitioning via the wave SVG into a different colored section below it. This demonstrates how the wave looks as an actual section divider between two content blocks. The user can change both section colors via two small color pickers. Generate the wave path mathematically: divide the SVG width into segments based on frequency, calculate Y positions using sine-based curves with random perturbation (controlled by smoothness), then connect points with smooth cubic Bezier curves where control points are calculated to maintain C1 continuity. Make it responsive: on mobile (under 768px), the sidebar collapses to a bottom drawer that slides up, and the preview takes full width. All sliders should work well on touch devices. Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].