Macro Photography Diffuser Dome Light Spread Angle Calculator

Overview

A precision utility for macro photographers to calculate the light spread angle from a diffuser dome. This tool helps photographers visualize and plan their lighting setup to ensure even subject illumination for macro photography.

Technical Constraints & Requirements

• Single File: The entire application must be contained in a single index.html file using standard HTML, CSS, and Vanilla JavaScript.
• No Storage: No use of localStorage, sessionStorage, or cookies. The tool must be purely stateless. State is managed entirely in JavaScript memory during the user session.
• Iframe Compatibility: The app must be designed to run in a sandboxed iframe. No popups (alert, confirm) are allowed. Custom modal UI must be used instead.
• Light Mode Only: Strictly vibrant, high-contrast light mode. No dark mode toggle.

Feature Set

• Dynamic Inputs:
  • Diffuser Radius (mm): Input field for the radius of the diffuser dome.
  • Distance to Subject (mm): Input field for the distance from the diffuser output to the subject.
  • Calculated Spread Angle: Real-time calculation output.
• Visualizer: A <canvas> or SVG-based real-time visual representation of the light cone emanating from the dome, reacting instantly to input changes.
• Unit Converter: Toggle between metric (mm/cm) and imperial (in) units.
• Reference Guide: A small "Tips" section explaining how to interpret the results.

UI Layout

• Header: Clean, centered title and a concise one-sentence description.
• Main Content (Grid):
  • Left Column (Inputs): Grouped form fields with modern labels and subtle input styling. Use range sliders in addition to number inputs for ease of use.
  • Right Column (Visuals/Results):
    • A prominent, large display area for the "Calculated Angle".
    • A visual SVG diagram showing the relationship between the dome, subject, and spread angle.
• Styling: Use a soft, professional color palette (e.g., slate gray text, white backgrounds, indigo-600 for primary actions, light gray borders for inputs).

Design & Aesthetics

• Typography: Sans-serif font (Inter or system-ui) for high legibility.
• Animations: Subtle transition effects (e.g., transition: all 0.2s ease) on input fields when active and on the SVG visualizer when values change.
• Spacing: Generous white space (padding/margins) to ensure a high-end, uncluttered feel.
• Shadows: Use soft, diffused drop shadows on the main container cards to give depth without looking cluttered.

Explicit Developer Directives

1. Use Tailwind CSS via CDN for rapid, consistent styling.
2. Ensure all inputs have autocomplete="off".
3. Implement a custom modal for "Tips" to avoid native alert() calls.
4. Ensure the visualization component automatically resizes using a ResizeObserver or simple responsive CSS breakpoints.
5. Strictly enforce no internal or external database dependencies; this is a pure calculator.