How to Add Simple Harmonic Motion to Your Website

You can add a full simple harmonic motion 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 release a mass on a spring or a simple pendulum and watch it draw its own sine wave in real time, trading kinetic and potential energy back and forth. 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/simple-harmonic-motion/"
        width="100%" height="1020" loading="lazy"
        style="border:0;max-width:560px"
        title="Simple Harmonic Motion by LK Forge"></iframe>
<p><a href="https://lkforge.com/tools/physics/simple-harmonic-motion/">Simple Harmonic Motion</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 already oscillating, so a visitor sees the motion and its sine curve immediately and can then take control:

• Spring or pendulum: switch between a mass on a spring and a simple pendulum to compare the two classic oscillators.
• Drag to set the amplitude: grab the mass or bob and release it to compare a small oscillation with a large one.
• Mass, stiffness, length, gravity, damping, speed: sliders change the physics live — stiffen the spring or raise gravity and it quickens; add damping and it settles.
• Live sine wave and ideal overlay: the lower panel plots displacement against time, with the ideal x(t) = A·cos(ωt) overlaid so you can see where a wide-swinging pendulum stops being "simple".
• Measured vs ideal period: the readout shows the measured period beside T = 2π√(m/k) for the spring and T = 2π√(L/g) for the pendulum, plus the frequency.

Pick the right height

The snippet uses height="1020", which fits the canvas, the system toggles, the sliders and the displacement-versus-time graph 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/simple-harmonic-motion/ 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 physics lesson or a blog post on oscillation, springs or resonance needs a sine wave students can actually drive.