Magnetic Field Lines

About this style

Michael Faraday described the space around magnets in terms of lines of force in the mid-19th century, and he used iron filings to show them. Each filing becomes a tiny magnet and turns to lie along the field, so filings sprinkled on a card over a bar magnet trace loops from the north pole to the south. Opposite poles side by side join their lines, while like poles push them apart and leave a neutral point where the fields cancel. The demonstration remains a classroom staple and a favorite of science explainers.

Make a 10-second physics explainer: iron filings on a white card snap into the field around bar magnets, field lines draw from north to south, and the pattern changes when one magnet turns around.

<inputs>
If I don't give you something, use the default and don't ask.
- Series: "Unseen Forces · 03", from Quillfield Learning (fictional).
- Title: "What a magnet's field looks like"
- Labels: "Field lines run from N to S" · "Opposite poles: the lines join" · "Like poles: the lines push apart" · "Neutral point"
- Length: 10 seconds.
</inputs>

<direction>
- Palette: bench #CBD6DD with a soft vignette; card #F7F5EF with fine paper grain and a soft shadow; filings #2B2C30 with 1px highlights #8C8F96; magnets with north halves #D6342B and south halves #2F5AA6, white letters, a 3px lighter bevel along the top edge and a soft contact shadow; field lines #E8632B; label tags #FFFFFF; text #1F2530, secondary #5C6573.
- Layout: the title sits on the bench at the top; the card fills x 120–1800, y 250–1000. Magnets are 300 × 76px painted steel bars with 8px rounded corners and white N and S letters (Lexend 700, 34px) on their halves. Magnet A rests at (700, 625), south on the left and north on the right; magnet B arrives at (1240, 625).
- Field, in closed form: each pole face is a row of 7 magnetic charges across its 76px width, 10px in from the end, +q at north and −q at south; B(p) = Σ q·(p − pₖ) ÷ |p − pₖ|³. Magnet positions and angles are functions of t, so the field is too.
- Filings: 30,000 seeded positions over the card. Near each pole face they gather within 50px and stand nearly perpendicular to it in bristly beards (iron piles up where the field is strongest). At the first tap after a magnet is placed, about 1,500 nearby filings slide up to 30px toward its pole faces to form those beards. Each filing is a segment 5–12px long and 1.3px wide; filings under a magnet are hidden by it. A filing's angle blends from its own random angle toward the field direction with weight smoothstep(Bweak, Bstrong, |B|), so filings far from the magnets stay loosely random, as on a real card.
- Taps: filings move only when the card is tapped. At each tap (1.6 s, 5.0 s and 7.8 s) the card jolts 2px and back over 0.12 s, and every filing turns from its last angle to its new one over 0.35 s on easeOutCubic. Between taps they stay put, even while a magnet moves. Compute each tap's target angles and positions once at load.
- Field lines: traced every frame with RK4 (2px steps) from 14 seeds spaced around each north face (8px out), stopping within 12px of a south face, at the card's edge or after 1,600 steps; drawn over the filings as smooth 2.5px orange curves, each with one small arrowhead at its midpoint pointing along B, north to south. They draw on from their north ends over 0.8 s, then follow the magnets live.
- Neutral point: with like poles facing, find where |B| is smallest between the magnets (a closed-form search along their shared axis) and mark it with a 14px × in #1F2530.
- Motion: a magnet sets down by scaling from 1.04 to 1 as its shadow tightens (0.3 s); B slides in on cubic-bezier(0.22, 1, 0.36, 1) over 1.0 s; to turn, B lifts (scale 1.03, shadow widening), rotates 180° about its center over 0.9 s on easeInOutCubic and sets down.
- Type: kicker "UNSEEN FORCES · 03" in Lexend 600, 20px, tracked 0.14em, #D6342B, at (120, 100); title in Lexend 600, 52px, #1F2530, baseline at (120, 175); labels in Lexend 500, 26px, #1F2530, on white tags (10px padding, 6px radius, a soft shadow) with 1px #5C6573 leaders ending in 5px dots on what they name, never more than two at once.
- Easing: text rises 12px as it fades in over 0.6 s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: thousands of real filings, bristling at the poles and loose far away, lines that follow the physics, a card you could touch. Cheap: a few glowing curves around a cartoon horseshoe magnet.
Banned: horseshoe magnets, glow or neon, field lines that cross, lines that start or stop in open space near a magnet, filings moving between taps, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.8s: the card with filings scattered at random; the kicker and title rise in.
- 0.8–1.6s: magnet A is set down left of center.
- 1.6–2.2s: tap: the filings swing into loops from pole to pole and bristle at the ends.
- 2.2–3.6s: the field lines draw out of the north pole and arc round to the south; the label "Field lines run from N to S" attaches to one line.
- 3.6–4.6s: the label clears; magnet B slides in from the right, its south facing A's north; the lines bend across the gap while the filings stay put.
- 4.6–5.4s: tap at 5.0 s: the filings swing into a bridge across the gap; the label "Opposite poles: the lines join" attaches.
- 5.4–6.6s: hold on the joined field.
- 6.6–7.6s: the label clears; magnet B lifts, turns 180° and sets down, north facing north; the lines push apart.
- 7.6–8.4s: tap at 7.8 s: the filings swing away from the gap; the × marks the neutral point; the labels "Like poles: the lines push apart" and "Neutral point" attach 0.2 s apart.
- 8.4–10.0s: hold.
For other lengths, stretch the holds; keep each tap just after its move and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter.
- The field, lines and neutral point are closed-form functions of the magnets' poses at t; filing angles for each tap are computed once at load; the card, magnets and filing sprites are pre-rendered at load.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check every field line starts at a north face and ends at a south face or the card's edge, lines never cross, arrows point north to south, filings move only at taps and bristle at the poles, labels point at what they name, the × sits where the field cancels, and the 6 s frame and the final frame are both complete. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Blueprint Technical Drawing

Made by us

A cyanotype-blue engineering sheet that drafts itself: centerlines, compass-swept gears, hatching and dimension lines a…

Art Deco Gold

Made by us

A symmetrical Art Deco reveal in black and metallic gold: a sunburst fans open, stepped pinstripe frames draw from the…

Op Art Illusion

Made by us

A black-and-white Op Art piece: crisp stripes swell into a bulging lens and slow waves, and the title exists only as a…

Japanese Ma Minimal

Made by us

A quiet Japanese minimalist piece on generated washi paper: a single sumi ensō is brushed on with dry-brush texture, sm…