Free Vertical Video Safe Area Grid Overlay Generator

Vertical Video Safe Area Grid Overlay Generator

A professional-grade, browser-based utility designed to help video editors and content creators visualize safe zones for vertical (9:16) video content. The tool allows users to generate and download custom grid overlays to ensure text and UI elements remain visible across all mobile platforms.

---

Detailed Feature List

• Canvas Configuration: Preset 9:16 aspect ratio canvas with custom resolution support.
• Dynamic Overlays: Toggle between different UI layouts (e.g., standard social media UI, text-only safety zones, caption-safe zones).
• Real-Time Customization: Change grid line color, opacity, and thickness using a clean, modern color picker.
• Reference Image Upload: Upload a screenshot from your video to overlay the grid directly on your content.
• Export Utility: Download the created guide as a high-resolution, transparent PNG to import directly into video editing software (Adobe Premiere, DaVinci Resolve, CapCut, etc.).
• Zero-Storage Architecture: Runs entirely in memory. No server uploads, no cookies, no local storage.

---

UI Layout Specification

• Header: A clean, minimalist navigation bar featuring the tool title and a 'Reset' button.
• Main Content Area:
  • Left Sidebar (Control Panel): Stacked vertical control groups using subtle cards. Includes sliders for Opacity, dropdowns for Grid Presets, and buttons for Image Upload/Download.
  • Center Stage (Canvas): A centered, shadow-dropped canvas container that scales to fit the viewport. The canvas maintains the 9:16 ratio perfectly.
• No-Footer Policy: The design focuses on verticality and content; no footer is permitted to keep the interface uncluttered.

---

Design & Aesthetics

• Palette: A vibrant, professional light-mode aesthetic.
  • Primary: Electric Blue (#3B82F6) for active buttons.
  • Background: Soft off-white (#F9FAFB) for the page background.
  • Surface: Clean white (#FFFFFF) for control cards.
  • Text: Dark charcoal (#111827) for readability.
  • Accents: Light grey (#E5E7EB) for borders and dividers.
• Animations:
  • Smooth transition-all on hover states for buttons.
  • fade-in micro-interactions when switching grid overlays.
  • Subtle, soft shadows (shadow-sm to shadow-md) on interactable cards.

---

Technical Constraints for Developer

• Architecture: One single .html file containing HTML5, CSS3, and Vanilla JavaScript.
• Dependencies: Tailwind CSS via CDN, FontAwesome for icons. No frameworks (React/Vue/Angular).
• Sandbox Compatibility:
  • STRICT: No localStorage or sessionStorage. Do not use document.cookie.
  • STRICT: Replace any native alert(), confirm(), or prompt() with custom HTML5 <div> modals.
• Performance: Use requestAnimationFrame for any canvas rendering to ensure smooth interaction without lag.