Widgets

How to Add a Fluid Simulation to Your Website

LK Forge · 4 min read · Updated September 2026

You can add a full real-time fluid simulation 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 drag their mouse across the canvas and watch dye and velocity swirl into vortices, all computed in their own browser. This guide covers the fastest way to embed the tool, 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/fluid-sim/"
        width="100%" height="720" loading="lazy"
        style="border:0;max-width:560px"
        title="Fluid Simulation by LK Forge"></iframe>
<p><a href="https://lkforge.com/tools/physics/fluid-sim/">Fluid Simulation</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 canvas invites interaction straight away, so a visitor can start stirring the fluid the moment it loads:

  • Drag to stir: click and drag anywhere to inject dye and velocity at the cursor and watch the solver carry it into swirling vortices.
  • Splats, clear and rainbow: drop in random splats for instant motion, clear the field to start fresh, or switch on rainbow colour for multi-hue dye.
  • Viscosity and dye fade: the viscosity slider makes the flow syrupy or thin, while the fade slider controls how quickly the dye trails vanish.
  • Live readout: a small panel shows the current frames-per-second and the 128×128 grid the equations run on.

Pick the right height

The snippet uses height="720", which fits the canvas, the toolbar and the sliders 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/fluid-sim/ 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 fluid dynamics, viscosity or the Navier–Stokes equations needs a fluid visitors can actually stir.

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

Open the Fluid Simulation

Frequently asked questions

Is embedding the fluid simulation free?
Yes. It is free to embed on any site, with no account, no API key and no usage limits. The whole solver runs in your visitor’s own browser, so there is no server cost — we only ask that you keep the small "Fluid Simulation by LK Forge" credit line that comes with the embed code.
What can visitors do with the embedded fluid simulation?
They click and drag on the canvas to inject dye and velocity, then watch it swirl across a 128×128 grid. Buttons drop in random splats, clear the field, and switch on rainbow colour, while sliders tune the viscosity and the dye fade. A readout shows the live frames-per-second and the grid size.
Is this real fluid physics?
Yes — every frame solves a stable form of the Navier–Stokes equations using Jos Stam’s 1999 "Stable Fluids" method: advection carries the dye along the flow, diffusion smooths it by viscosity, and a projection step keeps the fluid incompressible so it rolls into vortices. It trades accuracy for speed on a coarse grid, so it is a visual teaching model rather than an engineering-grade solver.
What iframe height should I use, especially on mobile?
The snippet ships with height="720", which is tall enough that the canvas, the toolbar buttons and the sliders 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 720 is the safe default across screen sizes.