Widgets

How to Add a Prism Light Dispersion Simulator to Your Website

LK Forge · 4 min read · Updated September 2026

You can add a full prism light dispersion simulator to any website, blog, or classroom page with a single line of code — free, with no sign-up, no plugin, and no script to install. Visitors aim a white beam into a prism and watch it split into a spectrum, because the refractive index of glass depends on wavelength — the normal dispersion that makes a rainbow. This guide covers the fastest way to embed the Prism Light Dispersion Simulator, what it shows, and where it works.

The quickest way: paste one embed snippet

An embed is just an <iframe> that loads the simulator from lkforge.com, plus a small credit line. Copy this into your page’s HTML where you want the widget to appear:

<iframe src="https://lkforge.com/embed/prism/"
        width="100%" height="820" loading="lazy"
        style="border:0;max-width:560px"
        title="Prism Light Dispersion Simulator by LK Forge"></iframe>
<p><a href="https://lkforge.com/tools/physics/prism/">Prism Light Dispersion Simulator</a>
   by <a href="https://lkforge.com/">LK Forge</a></p>

The <iframe> is the live simulator; the <p> underneath is a plain credit link. Keep that line — the visible link is what keeps the widget free to embed. You can also copy this exact code straight from the LK Forge widget gallery.

What the widget shows

The simulator opens with white light already fanning through the prism, so a visitor sees the spectrum immediately and can then take control:

  • Apex angle and incidence sliders: reshape the prism and swing the incoming ray to watch the fan widen, narrow, or reach minimum deviation.
  • Glass selector: switch between crown glass, flint glass and water to compare how strongly each material disperses colour.
  • Monochromatic mode: turn off the white beam and set a single wavelength with a slider to trace one colour’s path.
  • Index and deviation readouts: a panel shows the refractive index and the deviation angle, and a preset drops a colour into total internal reflection at the exit face.

Pick the right height

The snippet uses height="820", which fits the ray diagram, the controls and the readouts without clipping even on a narrow phone, where they stack into one column. On a wider page the widget centres within its max-width:560px. That single height works across screen sizes, so there is nothing to tweak for mobile.

Where it works

Because it is a standard iframe, the embed works anywhere you can add HTML:

  • WordPress: add a Custom HTML block and paste the snippet.
  • Squarespace: use a Code / Embed block.
  • Wix: add an Embed HTML / iframe element.
  • Ghost: insert an HTML card.
  • Notion: paste the /embed/prism/ URL and choose "Create embed".
  • Plain HTML, an intranet, or a lesson page: paste the snippet straight into the markup.

That’s the whole job. Copy the embed code from the widget gallery and paste it wherever a lesson or a blog post on optics, dispersion or how rainbows form needs a prism students can actually turn.

Grab the embed code from the LK Forge widget gallery — free, no sign-up.

Open the Prism Light Dispersion Simulator

Frequently asked questions

What can visitors do with the embedded Prism Light Dispersion Simulator?
They can send a white beam into a glass prism and watch it fan out into a spectrum, drag the apex angle and the angle of incidence, and switch the glass between crown, flint and water. One-click presets show minimum deviation, maximum dispersion in flint glass, total internal reflection at the exit face, and a single-colour beam whose wavelength you set with a slider. A panel reads out the refractive index and the deviation angle for each colour.
What does the Prism Light Dispersion Simulator teach?
It shows why a prism makes a rainbow: the refractive index of glass is slightly larger for blue light than for red, so each colour bends by a different amount and the beam spreads. Students can see Snell’s law act at both faces, find the angle of minimum deviation, and watch a colour get trapped by total internal reflection when the exit angle is too steep.
Is embedding the prism dispersion simulator free?
Yes. It is free to embed on any site, with no account, no API key and no usage limits. The whole simulation runs in your visitor’s own browser, so there is no server cost — we only ask that you keep the small "Prism Light Dispersion Simulator by LK Forge" credit line that comes with the embed code.
What iframe height should I use, especially on mobile?
The snippet ships with height="820", which is tall enough that the ray diagram, the sliders and the deviation readouts all fit without clipping even on a narrow phone, where they stack into a single column. On a wider page the widget centres within its max-width of 560px. You can lower the height if you want it shorter, but 820 is the safe default across screen sizes.
Where can I embed it — WordPress, Wix, Squarespace, Notion?
Anywhere you can add HTML, because it is a standard iframe. In WordPress use a Custom HTML block; in Squarespace a Code/Embed block; in Wix an Embed HTML element; in Ghost an HTML card; in Notion paste the /embed/prism/ URL as an embed. On a plain HTML page or an intranet, paste the snippet straight into the markup.
Does the embedded simulator track visitors or set cookies?
No. Everything runs locally in the visitor’s browser — nothing is uploaded. The embed sets no tracking cookies and sends no analytics, so it is safe to place on a privacy-sensitive site, an intranet, or a page for students.