Studio Gobo Shadow Projection & Sharpness Calculator

Overview

A high-precision utility for photographers, cinematographers, and lighting designers. This tool calculates the penumbra width (shadow blur) of a gobo projection based on the geometry of the light source, the distance to the gobo, and the distance to the projection surface. It eliminates the guesswork of light placement, helping users achieve the desired shadow crispness before mounting gear.

Core Features

• Real-Time Penumbra Calculation: Instantly updates the calculated shadow blur (in mm or inches) as input parameters change.
• Preset Light Source Selector: Quick-select buttons for common light source types (e.g., COB LED, Tungsten Fresnel, Hard Arc) to set typical effective source diameters.
• Metric/Imperial Toggle: Switch between centimeters/millimeters and inches/feet with a single tap.
• Visual Blur Indicator: A dynamic graphical representation showing the "softness" of the shadow edge based on the calculated penumbra.
• Responsive UI: Clean, minimalist design that scales perfectly from mobile screens to desktop monitors.

UI Layout

• Header: A simple, elegant title section using high-contrast typography.
• Main Tool Area (Two-Column Grid on Desktop):
  • Input Panel (Left): Labeled input sliders and number fields for:
    1. Light Source Diameter (mm/in).
    2. Light-to-Gobo Distance.
    3. Gobo-to-Surface Distance.
  • Results/Visual Panel (Right): Large, prominent display of the calculated Penumbra size, accompanied by a CSS-animated visual element that simulates the shadow blur effect (e.g., a circle with varying box-shadow blur radii).
• No-Footer Policy: The design terminates cleanly at the bottom of the visual area.

Color Palette (Light Mode Only)

• Background: #F8FAFC (Slate 50) for a crisp, professional look.
• Surface/Cards: #FFFFFF (White) with subtle drop shadows (shadow-sm and shadow-md).
• Primary Accent: #2563EB (Blue 600) for active buttons and results highlighting.
• Text: #1E293B (Slate 800) for primary text, #64748B (Slate 500) for labels.
• Input Borders: #E2E8F0 (Slate 200).

Animations & Transitions

• Smooth Interactions: All input changes utilize CSS transition properties for smooth updates to calculation results.
• Micro-Interactions: Subtle scale-up animation on hover for control buttons.
• Fade-ins: Results section elements fade in smoothly if the result changes drastically, preventing jarring layout jumps.

Developer Directives

1. Environment: Create a single, self-contained index.html file.
2. No Storage: Strictly prohibit the use of localStorage, sessionStorage, or cookies. Use local JS variables to hold state.
3. Sandboxing: Do not use alert(), prompt(), or confirm(). Use custom <div>-based modals if necessary.
4. Frameworks: Use Vanilla JS for logic. Use Tailwind CSS via CDN for styling to ensure rapid development and responsive layout.
5. Aesthetics: Adhere strictly to a clean, light-themed aesthetic. No dark mode options.