A brass toy gyroscope on a pale paper set is spun up by a pull cord and set free on its tower: in labeled slow motion it dips and bobs in nutation loops, then circles in steady precession as a vermilion trace, force arrows and the precession formula show why it doesn't fall.
Written and rendered by AI CSS Animations Oct 18, 2026
A gyroscope is a fast-spinning wheel whose angular momentum makes it resist changes to the direction of its axle. Rested on a stand by one end, it does not fall: gravity's torque turns the axle sideways, so it circles the stand in a motion called precession, at a rate equal to mgl divided by its spin angular momentum. Released from rest, it first dips and bobs in small loops called nutation, which friction soon damps away. Léon Foucault named the instrument in 1852, and brass toy gyroscopes remain a classic of physics teaching.
Make a 10-second 3D physics explainer: a brass gyroscope is spun up and set free on its stand, then bobs and circles exactly as the equations of a spinning top say. <inputs> If I don't give you something, use the default and don't ask. - Series: Kinematic Notes, No. 07, from Vantrell Scientific (fictional). - Title: "Why it doesn't fall" - Captions, in order: "Spin it fast." · "Gravity pulls down, so the axle swings sideways." · "First it bobs: nutation." · "Then it circles: precession." - Formula box, three lines: "Ω = mgl ÷ (I₃ω₃)" · "= 0.0589 ÷ (6.75 × 10⁻⁵ × 266)" · "= 3.28 rad/s, one turn every 1.92 s" - Length: 10 seconds. </inputs> <direction> - Look: a clean physics-film explainer on a pale paper set: a real-looking brass toy gyroscope, hairline ink labels and one vermilion trace that records its motion. - Palette: seamless paper set #ECE7DE lifting to #F5F1EA behind the stand; brass #C7A15A with highlights #F2DDA6; steel axle and tip #B8BEC6; cotton cord #EDE2CC; ink #1F2328 for forces, labels and type; vermilion #E0452B for motion (the trace and the precession arrow); secondary #6B6A66. - The gyroscope (1 unit = 1 cm), built like the classic toy: a turned brass rotor of radius 3.0 (a thick rim 0.5 wide and 1.0 deep, a thinner web with two concentric turned grooves, a raised hub) on a steel axle 8.0 long; a cage of two brass meridian rings at right angles (radius 3.6, section 0.22) that both pass through the axle's ends, joined by an equatorial ring around the rotor, clear of its rim; at one end of the axle a pointed steel tip 0.4 long, at the other a small knurled knob with a hole for the cord. The tip rests in a shallow cup on top of a turned brass tower 9.0 tall on a round foot 6.0 across, so the pivot sits 4.0 from the rotor's center. A slim brass launch fork rising from the foot holds the knob end level until release, then swings down and away in 0.25 s. The rotor's face carries one engraved index mark that shows its turning while slow and dissolves into the turned grooves above 3 revolutions per second on screen, so the spin never strobes or wagon-wheels. - Materials and light: brass MeshPhysicalMaterial, metalness 1, roughness 0.25, clearcoat 0.3, with fine circular turning marks in a generated roughness map on the rotor's faces; steel metalness 1, roughness 0.3. Build an environment once with PMREMGenerator.fromScene from a small white room with two softboxes and a long strip, so the brass shows long, soft highlights instead of flat yellow. Key DirectionalLight #FFF4E6 at 2.2 from the upper left (elevation 55°) with soft shadows (PCFSoftShadowMap, 2048) and a soft contact shadow under the foot; HemisphereLight #FFFFFF / #CFC6B6 at 0.9. ACESFilmic, exposure 1.0. The set stays bright paper and the gyroscope is fully lit from the first frame. - Physics, exactly: a heavy symmetric top on a fixed pivot. θ is the axle's angle from the upward vertical, φ its azimuth around the tower, ψ the rotor's spin. Constants: m = 0.15 kg, g = 9.81 m/s², l = 0.040 m, I₃ = 6.75 × 10⁻⁵ kg·m², I₁ about the pivot = 2.74 × 10⁻⁴ kg·m², spin ω₃ = 266 rad/s (about 2,540 rpm), the spin vector pointing out from the pivot so it precesses counterclockwise seen from above. Conserved: I₃(ψ̇ + φ̇·cosθ) = I₃ω₃ and p_φ = I₁φ̇·sin²θ + I₃ω₃·cosθ, which gives φ̇ = (p_φ − I₃ω₃·cosθ) ÷ (I₁·sin²θ). Then I₁θ̈ = I₁φ̇²·sinθ·cosθ − I₃ω₃φ̇·sinθ + mgl·sinθ − c·θ̇, with light pivot friction c = 3.8 × 10⁻³ N·m·s so the bobbing halves about every 0.1 s of real time. Release from θ = 90°, θ̇ = 0, φ̇ = 0, at an azimuth chosen so the final freeze has the axle pointing toward the lower right of frame. The free end dips about 5.7° in cusped loops (φ̇ returns to zero at the top of each), then settles into steady precession 2.9° below level at Ω = mgl ÷ (I₃ω₃) = 3.28 rad/s. - Playback: real time until 2.6 s, easing to ×0.2 slow motion by 3.0 s (the release), held to 5.0 s, easing to ×0.5 by 5.8 s, held to 8.0 s, then easing to a freeze by 8.8 s. Physical time is the integral of playback speed, so the physics is only shown slower, never altered. A chip right-aligned at (1800, 96) reads "Playback ×1", "×0.2", "×0.5" and finally "Paused" in IBM Plex Mono 500, 22px. - The trace: from release, the free end draws a 3px vermilion line (Line2 from three/addons/lines/) through all its past positions: a scalloped arc of cusps that smooths into a circle around the tower. - Labels: 3D arrows (thin cylinders with cone heads) with HTML text projected from 3D anchors on 1px ink leaders: "Spin ω₃" along the axle from the pivot outward; "Weight mg" straight down from the rotor's center; "Torque" horizontal at the pivot, perpendicular to the axle; "Precession Ω", a vermilion curved arrow around the tower in the torque's direction, which replaces "Weight mg". Label text in IBM Plex Mono 500, 22px, ink; at most three on screen at once, never crossing the gyroscope. - Camera: fov 28, one continuous move on easeInOutSine: side-on and close at axle height (pitch 5°) with the gyroscope filling the right half; rising through the slow motion to a three-quarter view (pitch 32°) where the trace's circle reads as a wide ellipse centered at (1150, 600); a slow 15° orbit across the rest. - Type: kicker "KINEMATIC NOTES · NO. 07" in IBM Plex Mono 500, 20px, tracked 0.14em, vermilion; title Instrument Serif 400, 88px, ink, top-left at (120, 110); captions IBM Plex Sans 500, 32px, ink, bottom-left with the baseline at y 960, one at a time, crossfading with a 10px rise over 0.4 s; the formula box at right (x 1300–1800, y 780–900) under a 1px ink rule, in IBM Plex Mono 500, 24px. - Premium: a heavy brass instrument with real highlights, motion that comes from the equations, slow motion that says it's slow motion, and a trace that shows nutation turning into precession. Cheap: a spinning disc gliding in a circle at a made-up speed, glowing arrows, a sci-fi backdrop. Banned: motion not derived from the equations, wagon-wheel spokes or strobing spin, motion blur, glow or bloom, dark or space backgrounds, orbiting particles, hands, anything flashing more than 3 times per second. </direction> <structure> - 0.0–1.2s: close and side-on: the gyroscope rests level in its launch fork on the tower, the cord wound on its axle; the kicker and title rise in. - 1.2–2.2s: the cord whips off to the right as it unwinds and the rotor spins up to 266 rad/s, its index mark dissolving into the grooves; caption 1 and the "Spin ω₃" arrow appear at 1.4 s. - 2.2–3.0s: spinning, still held; the "Weight mg" arrow and caption 2 at 2.4 s; playback eases to ×0.2. - 3.0s: the fork swings away: release; the "Torque" arrow appears. - 3.0–5.0s: in slow motion the free end dips and bobs in cusped loops as it starts to swing sideways; the trace draws its scallops; caption 3 at 3.6 s; the camera rises. - 5.0–6.0s: playback eases to ×0.5 as the bobbing dies away and the camera reaches the three-quarter view (the 6.0 s frame: the scalloped trace, three labels and caption 3, nothing mid-fade). - 6.0–8.0s: steady precession, one turn every 3.83 s on screen at ×0.5; the trace closes its circle; at 6.4 s the "Precession Ω" arrow replaces "Weight mg", caption 4 appears and the formula box rises in. - 8.0–8.8s: playback eases to a freeze with the axle pointing toward the lower right; the chip reads "Paused". - 8.8–10.0s: hold on the frozen frame. For other lengths, stretch the steady precession at ×0.5; keep the release, the slow motion 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: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (`three` and `three/addons/`). WebGLRenderer with antialias, preserveDrawingBuffer: true and setPixelRatio(window.devicePixelRatio); render once at the end of every seek. Text is HTML over the canvas. - Integrate the equations once at load with RK4 at a fixed physical step of 1/4000 s into arrays of θ, φ and ψ, and precompute the screen-to-physical time map; seek(t) only looks up and interpolates. </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. Log θ and φ̇ at physical times 0.05, 0.10 and 0.15 s after release to confirm a dip of about 5.7° with cusps (φ̇ near zero at the top of each loop), and confirm steady precession takes 1.92 s of physical time per turn within 3%. Check the brass shows highlights, the spin never strobes, the torque arrow is horizontal and perpendicular to the axle, the precession runs in the torque's direction, the chip matches the playback speed, and labels never overlap. 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.
A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…
A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…
A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…
Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…
More like this on the motion design inspiration board: 3D motion design inspirationExplainer video inspiration