Flashing or strobing content can trigger seizures in people with photosensitive epilepsy. This tool intentionally limits the frequency to a maximum of 3 flashes per second and always starts in the stopped state.
Settings
You can adjust the frequency, intensity, colors, alternation mode and launch the effect in simulated full screen directly in the browser.
How the strobe effect tool works and what you can do with it?
The Strobe Effect Simulator is a browser-based tool that reproduces a stroboscopic light effect without any external software or installation.
It runs entirely in the browser using JavaScript and the requestAnimationFrame API for smooth, frame-accurate rendering.
The tool always starts in a stopped state to ensure the user consciously activates the effect before it begins.
Health limitations built into the tool
The frequency is capped at a maximum of 3 flashes per second, in line with established photosensitivity safety guidelines.
Flashing content above 3 Hz is known to trigger seizures in people with photosensitive epilepsy, according to the Web Content Accessibility Guidelines.
A visible health warning is displayed at the top of the interface every time the page loads, before any interaction.
How to control the frequency?
The frequency slider lets you set a value between 0.2 Hz and 3 Hz in increments of 0.1 Hz.
A lower frequency like 0.5 Hz produces a slow, calm alternation between light and dark states on screen.
Increasing the value toward 3 Hz creates a faster, more intense visual rhythm that stays within the safe threshold.
How to adjust the intensity?
The intensity slider controls the opacity of the flash layer, ranging from 10% to 100%.
At 100%, the flash reaches its maximum brightness and creates a sharp contrast between the on and off states.
Reducing the intensity to 30% or 40% softens the visual impact while preserving the rhythmic pattern of the effect.
Choosing a color combination
The tool provides two independent color pickers labeled Color A and Color B, each accepting any hex value.
Color A defines the flash color displayed during the bright phase of the effect in all three modes.
Color B is only used in the A/B alternation mode, where it replaces the black background between flashes.
The three available modes
The tool offers three distinct rendering modes, each producing a different visual result from the same frequency settings.
Hard flash mode switches the flash layer on and off sharply at the selected frequency, creating a binary on/off effect.
The transition between the lit and dark state happens instantly, which produces the most pronounced stroboscopic perception.
This mode is the closest simulation of a physical strobe light used in photography or stage production.
Soft pulse mode uses a sine wave to smoothly fade the flash layer in and out at the selected frequency.
The brightness rises and falls continuously without any abrupt cut, which reduces the visual harshness of the effect.
This mode is suitable for users who want a rhythmic light effect with less visual aggression than a hard flash.
A/B alternation mode keeps the flash layer fully opaque at all times and alternates between Color A and Color B.
The background switches between the two chosen colors at the selected frequency instead of toggling opacity on and off.
This mode is useful for simulating color-based stroboscopic effects used in lighting design or visual art contexts.
How to start, stop, and preview?
The Start button activates the animation loop and immediately begins rendering the effect at the configured settings.
The button label changes to “Running” to confirm that the animation is active and consuming the browser render loop.
Clicking the button again while running stops the effect and resets the screen to a dark, static state.
The Stop button provides a dedicated, immediately accessible way to halt the effect from any state.
It cancels the active animation frame, resets the timer, and clears the flash layer opacity back to zero.
Using a separate stop button reduces the reaction time needed to interrupt the effect in case of discomfort.
The Single flash button triggers one isolated flash of 180 milliseconds without starting the continuous animation loop.
It lets the user verify the current color and intensity settings before committing to a sustained stroboscopic sequence.
This preview function stops any running animation first, then fires the single flash and automatically clears the screen.
Using the full-screen mode
The full-screen button located in the top-right corner of the screen panel expands the display to cover the entire viewport.
Activating full screen removes all interface elements from view and leaves only the strobe effect visible on screen.
The button icon switches between an expand icon and a compress icon to reflect the current display state.
Full-screen mode is particularly effective for photography use cases where a controlled, repeatable light pulse is needed.
A photographer can position the screen as a light source and trigger a timed sequence at a low frequency like 0.5 Hz.
The A/B alternation mode in full screen can also serve as a visual metronome for rhythm-based applications.
Practical use cases
The tool covers several distinct use cases beyond simple visual experimentation in a browser window.
A web developer can embed it in a page to demonstrate stroboscopic rendering techniques using only the Canvas and requestAnimationFrame API.
A designer can use it to preview how color combinations behave under rhythmic light conditions before applying them to a physical installation.
A teacher covering accessibility or WCAG guidelines can use the tool to demonstrate exactly why the 3 Hz threshold exists and matters.
The built-in frequency cap makes the tool safe to demonstrate in a classroom without requiring a risk assessment for photosensitive attendees.
The soft pulse mode in particular provides a concrete, adjustable example of how sine wave animation differs from binary state toggling.
Browser compatibility and technical requirements
The tool requires no installation, no plugins, and no server-side processing — it runs as a static HTML file in any modern browser.
It uses requestAnimationFrame for frame-accurate timing, the Fullscreen API for the full-screen toggle, and CSS custom properties for theming.
The prefers-reduced-motion media query is also implemented, which disables all transitions for users who have enabled that accessibility setting in their operating system.