Technical Specification: Free Online GIF Framerate Adjuster & Optimizer

1. Core Concept

A high-performance, browser-based utility that allows users to drop frames from GIF animations to reduce file size and adjust playback speed. The application performs all operations client-side using gifuct-js and gif.js libraries, ensuring privacy and zero server-side processing.

2. Feature List

• Drag-and-Drop Interface: Intuitive file upload zone with visual drop cues.
• Real-Time Frame Preview: A side-by-side display of the original versus the processed GIF.
• Framerate Controller: A slider or numeric input to select the desired frame retention (e.g., keep every 2nd frame, 3rd frame).
• Instant Size Estimation: Live calculation of the estimated output file size based on selected frame reduction.
• Client-Side Processing: Zero-upload architecture. Files are processed in memory using Web Workers to prevent UI freezing.
• Custom UI Modals: Replace standard alerts/prompts with clean, CSS-animated popups for user feedback.
• Download Manager: A secure "Download" button that triggers a blob URL creation for the optimized GIF.

3. UI/UX Specification

• Layout: Clean, centered single-column layout with a card-based design.
• Visual Hierarchy:
  • Header: Simple title and description.
  • Upload Zone: A prominent dashed-border area with an upload icon.
  • Tool Workspace: Appears only after upload. Contains controls (sliders/buttons) and the comparison preview window.
  • Output Section: Final statistics (original size vs new size) and the "Download Optimized GIF" button.
• Aesthetic:
  • Color Palette: Off-white backgrounds (#f8fafc), clean white cards (#ffffff), soft gray borders (#e2e8f0), and vibrant primary blue for actions (#2563eb).
  • Typography: Inter or system-ui sans-serif stack for maximum readability.
  • Transitions: 200ms ease-in-out transitions for all button states and layout expansions.

4. Technical Guidelines

• Single File Architecture: Bundle all CSS in <style> and JavaScript in <script> tags.
• No Persistence: Strictly forbidden to use localStorage, sessionStorage, or cookies. Maintain state solely via global variables or scoped object literals.
• Iframe Sandboxing: Ensure all UI elements work within a null-origin iframe. Avoid prompt() or confirm() functions; implement custom modal components.
• Responsive Behavior: Ensure the canvas and preview containers are wrapped in flexbox/grid containers that scale down to 100% width on mobile viewports.
• Libraries: Include necessary dependencies via CDN: gif.js for encoding and gifuct-js for decoding.
• Performance: Use requestAnimationFrame for UI updates and Web Workers for the heavy lifting of frame processing to avoid blocking the main thread.