Technical Specification: CSS Sprite Sheet Generator & Animator

Overview

This is a client-side utility designed for web developers and animators to create CSS-based sprite animations from a single source image. The app allows users to configure grid parameters, preview the animation in real-time, and export the exact CSS/HTML needed to implement the animation.

Core Features

• File Input: Drag-and-drop or file selector for uploading PNG/JPG sprite sheets.
• Dynamic Configuration: Real-time controls for grid columns, rows, frame width, frame height, animation duration, and iteration count.
• Live Preview: An interactive canvas or div showing the sprite animation at the configured settings.
• CSS Generation: Automatic generation of CSS @keyframes and class styles, ready to copy-paste.
• Code Preview: A syntax-highlighted code block that updates instantly as settings change.

UI/UX Design Specification

• Aesthetic: Clean, professional "SaaS" aesthetic. Light background (#f8fafc), white content cards (#ffffff) with soft drop shadows, and professional primary accents (e.g., #2563eb).
• Layout:
  • Header: Sticky top header with the application title and a brief instructional subtitle.
  • Main Area: Two-column grid (switches to single column on mobile).
    • Left Column (Configuration): Upload zone, numeric inputs for grid dimensions, slider for duration, and easing function dropdowns.
    • Right Column (Preview & Code): Live animation preview area, followed by a code output window with a "Copy to Clipboard" button.
• Micro-interactions: Smooth transition effects (fade-in, transform) on inputs. No abrupt UI changes.

Developer Implementation Rules (CRITICAL)

• Architecture: Single file (HTML/CSS/JS). Use Tailwind CSS via CDN for styling.
• State Management: Keep state entirely in JS memory. DO NOT use localStorage, sessionStorage, or IndexedDB.
• Compatibility: Ensure the app functions inside a sandboxed iframe. Do not use alert(), prompt(), or confirm(); build custom CSS modals.
• Performance: Use requestAnimationFrame for the animation preview to ensure smooth 60fps playback without blocking the main thread.
• External Assets: Use standard web APIs (FileReader API for image processing, Clipboard API for copy-to-clipboard).
• Responsiveness: Ensure inputs are large enough for touch targets on mobile devices and that columns stack vertically on screens smaller than 768px.

Color Palette

• Background: #f8fafc (Slate 50)
• Surface: #ffffff (White)
• Primary: #2563eb (Blue 600)
• Text: #1e293b (Slate 800)
• Borders: #e2e8f0 (Slate 200)
• Code Background: #1e293b (Slate 800)