Widgets

How to Add a Charged Particle in a Magnetic Field to Your Website

LK Forge · 4 min read · Updated September 2026

You can add a full charged-particle-in-a-magnetic-field 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 fire a charge into a uniform field and watch it curve into a cyclotron circle, or switch to a planet’s dipole field and watch it spiral toward the poles like the aurora. This guide covers the fastest way to embed the tool, what it teaches, 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/charged-particle/"
        width="100%" height="940" loading="lazy"
        style="border:0;max-width:560px"
        title="Charged Particle in a Magnetic Field by LK Forge"></iframe>
<p><a href="https://lkforge.com/tools/physics/charged-particle/">Charged Particle in a Magnetic Field</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 fires a charge as soon as it loads, so a visitor sees the bending motion immediately and can then take control:

  • Uniform field and cyclotron circles: a charge loops in a perfect circle whose gyroradius you can read off, turning the other way when you flip the charge sign.
  • Electric field and E×B drift: raise the E slider and the circle shears into a drifting cycloid, the same sideways drift for either sign of charge.
  • Dipole (aurora) mode: switch modes and particles spiral along curved field lines, reflected by the magnetic mirror so they bounce between the poles and light an aurora glow.
  • Field, speed and live readout: sliders set the field strength B and speed, while a panel shows the measured gyroradius and cyclotron period.

Pick the right height

The snippet uses height="940", which fits the canvas, the two rows of buttons, the sliders and the readout 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/charged-particle/ 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 the Lorentz force, cyclotron motion or the aurora needs a charge students can actually steer.

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

Open the Charged Particle in a Magnetic Field

Frequently asked questions

Is embedding the charged-particle 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 "Charged Particle in a Magnetic Field by LK Forge" credit line that comes with the embed code.
What can visitors do with the embedded simulator?
They fire a charge into the field and watch it trace a path, then take control: buttons switch between uniform-field and dipole (aurora) modes and flip the charge sign, while sliders change the magnetic field strength B, the electric field E and the simulation speed. A readout shows the measured gyroradius and cyclotron period so the numbers match the motion.
What physics does it demonstrate?
It advances one force law — the Lorentz force F = q(E + v×B) — with a stable Boris integrator. In uniform-field mode a charge loops in a cyclotron circle whose gyroradius r = m·v/(|q|·B) matches the readout; add an electric field and the loop shears into a cycloid drifting at E/B. Switch to dipole mode and particles bounce between the poles by the magnetic-mirror effect, funnelling in to light an aurora glow.
What iframe height should I use, especially on mobile?
The snippet ships with height="940", which is tall enough that the canvas, the mode and charge buttons, the sliders and the readout all fit without clipping even on a narrow phone where the controls stack into a single column. On a wider page the widget simply centres within its max-width of 560px. You can lower the height if you want it shorter, but 940 is the safe default across screen sizes.