Calculate light refraction angles instantly with this free Snell's Law calculator. Accurate physics tool for optics, photonics, and classroom experiments.
AI Generation Prompt
Application Specification: Free Snell's Law Refraction Angle Calculator
Overview
A high-performance, single-file browser application designed to solve Snell's Law problems. The tool provides a clean, modern interface for inputting optical parameters and receiving immediate, visualized results.
Core Features
- Live Calculation Engine: Real-time updates as user inputs values for n1, n2, and angle of incidence.
- Material Preset Library: A searchable dropdown allowing users to select common refractive indices (e.g., Air, Water, Glass, Diamond).
- Visual Light Path Representation: A responsive SVG canvas that dynamically redraws the light ray, normal line, and interface boundary based on calculated angles.
- Error Handling: Graceful warnings for Total Internal Reflection (TIR) scenarios.
- Degree/Radian Support: Toggle switch to handle angle inputs in either unit.
UI Layout
- Header: Simple, descriptive title with a brief subtitle explanation.
- Main Interface (Two-Column Layout):
- Left Column (Inputs): Grouped sections for Medium 1 and Medium 2 (refractive index inputs with dropdowns) and the Incident Angle input.
- Right Column (Visualizer & Results): A clean, bordered container housing the SVG light-path visualization and a prominent result display area showing the refracted angle.
- Result Styling: Bold, high-contrast text for the final angle output to ensure readability.
Design System & Aesthetics
- Color Palette: Professional light-mode aesthetic.
- Primary:
#2563eb(Blue - primary action/result highlighting). - Background:
#f8fafc(Light slate gray). - Text:
#1e293b(Dark slate). - Surface:
#ffffff(White, card-based elevation with soft, low-opacity shadows).
- Primary:
- Visual Language: Rounded corners (
12px), generous whitespace, and subtle CSS transitions (all 0.3s ease) on button interactions and inputs.
Technical Constraints & Directives
- Single File: All HTML, CSS, and JS must be inside one
.htmlfile. CSS via<style>tag, JS via<script>tag. - Sandboxed Security:
- DO NOT use
localStorage,sessionStorage, or cookies. - Use only in-memory variables to store state.
- Use custom DOM-based modals (div-based overlays) instead of
alert()orconfirm().
- DO NOT use
- Responsive: The layout must transition from a two-column desktop view to a stacked single-column mobile view at a breakpoint of
768px. - Libraries: Use only CDN links for necessary dependencies (e.g., Tailwind CSS for styling, Lucide icons for UI elements).
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is Snell's Law and how does this calculator work?
Snell's Law (also known as the Law of Refraction) defines the relationship between the angles of incidence and refraction when light passes between two different isotropic media. It is expressed by the formula n1 * sin(θ1) = n2 * sin(θ2), where n1 and n2 represent the refractive indices of the materials, and θ1 and θ2 are the angles relative to the normal line. Our calculator automates this calculation by providing intuitive input fields for these variables. Simply input the refractive indices and the angle of incidence, and the tool instantly computes the angle of refraction using high-precision JavaScript math functions. It is designed to assist students, engineers, and physics enthusiasts in performing quick optical calculations without manual trigonometric work.
What happens when total internal reflection occurs?
Total internal reflection occurs when light attempts to travel from a medium with a higher refractive index to one with a lower refractive index (e.g., glass to air) at an angle of incidence greater than the 'critical angle'. When this happens, the light cannot refract into the second medium and is instead reflected entirely back into the first medium. This calculator includes specific error handling to detect when total internal reflection occurs. If the input parameters result in an impossible mathematical state (where the result of the sine function is greater than 1), the application will display a clear notification explaining that total internal reflection is occurring, rather than returning an error or undefined result.
Which material refractive indices are supported?
The application includes a comprehensive dropdown menu containing common refractive indices for materials such as a vacuum (1.000), air (1.0003), water (1.333), ice (1.31), fused silica (1.458), and diamond (2.417). These presets allow users to quickly select materials without needing to memorize specific index values. Users are also provided with the option to enter a custom refractive index value if the specific material they are calculating for is not in the preset list. This flexibility ensures the tool remains useful for both standard textbook problems and more specialized optical engineering applications.
Can this tool be used for offline education?
Yes, this tool is designed for educational use and is built as a single-file application. Because it relies entirely on client-side logic—meaning all calculations are performed within your browser's memory—it does not require a server-side connection once the initial page has loaded. This makes it an excellent resource for classroom settings where internet connectivity might be limited or restricted. Furthermore, since the app does not utilize cookies, local storage, or external databases, it adheres to strict privacy standards and can be used in sandboxed, controlled environments without compromising user data or system security.
