Seamless Perlin Noise Loop & GIF Generator

Overview

This single-file web application serves as a procedural design utility for developers and motion artists. It allows users to generate, configure, and export seamless looping animations derived from Perlin noise algorithms. The app prioritizes a clean, "SaaS" aesthetic, providing a professional and distraction-free environment for creative work.

Feature List

• Real-Time Canvas Preview: A high-performance <canvas> area that renders noise parameters instantly.
• Advanced Parameter Control:
  • Noise Complexity: Adjust octaves and persistence.
  • Animation Speed: Control the flow of the noise.
  • Loop Duration: Set exact frame counts for perfect seamlessness.
  • Color Mapping: Custom gradient/color picker for the noise output (e.g., grayscale, monochromatic blue, sunset).
• Export Capabilities:
  • GIF Export: Generate high-quality animated GIFs directly in the browser.
  • Frame Sequence: Option to download individual frames as a ZIP file (using jszip.js) for frame-by-frame editing.
• Responsive Design: Control panel adapts to a sidebar on desktop and an expandable drawer on mobile.

UI/UX Specification

• Layout: A classic split-pane interface.
  • Left Sidebar (25%): Houses all configuration sliders and buttons, styled with modern input components.
  • Main Preview Area (75%): A centered, high-contrast viewport with a subtle drop shadow, mimicking a framed design element.
• Color Palette:
  • Background: #ffffff (Pure White)
  • Panels/Sidebar: #f9fafb (Soft Gray)
  • Primary Action (Buttons): #2563eb (Vibrant Blue)
  • Typography: #111827 (Dark Slate) for headings, #4b5563 (Cool Gray) for body text.
• Animations & Transitions:
  • Smooth hover states on all buttons (subtle scale up + shadow lift).
  • Fluid slide-in animations for the settings drawer on mobile.
  • A "loading" overlay with a clean spinner when rendering the GIF.

Technical Implementation Directives

• Architecture: Must be a single .html file containing embedded CSS and JS.
• No Persistence: Do not use localStorage, sessionStorage, or cookies. The state (noise parameters) must be handled in memory and cleared on reload.
• Dependencies: Include CDN links for:
  • gif.js or canvas-capture for GIF encoding.
  • jszip.js for frame exports.
  • tailwind.css via CDN for styling layout.
• Performance: Use requestAnimationFrame for the rendering loop. Ensure the logic is decoupled from the UI to prevent stuttering during user interactions.
• Safety: Wrap all logic in a IIFE (Immediately Invoked Function Expression) to prevent global scope pollution. Use strictly sandboxed, descriptive DOM element IDs.