Wrecking Ball

Micro-interactionTinkerFX signature ✦pendulum physics · spring return

-- fps

prefers-reduced-motion detected — the ball is shown at rest, no swing

X-ray · layers

Ballthe wrecking ball on its chain — drag it, then let it swing

Impactletters take the hit and scatter

Spring backeach letter springs back to where it belongs (off = they just fall)

Parameters

Your word

Gravity0.45

Impact force20

Return stiffness0.060

Swing life0.992

your version · updates as you tinker

How this effect works

Two little physics systems share one canvas. The ball is a pendulum: a weight on a chain from a fixed pivot. Each frame gravity nudges its angle back toward straight-down (omega += -sin(angle) × G), and a friction factor bleeds the motion off a little so the swing decays instead of running forever. Drag the ball to aim it; let go and it keeps the speed you gave it. The letters hang from a beam on their own ropes at rest.

When the ball overlaps a letter, the impact pushes that letter away along the line between their centers, plus a share of the ball's own velocity — so a fast swing scatters them harder than a gentle one. After that each letter is a spring: a force pulls it back toward its home spot, proportional to how far it has strayed (v += (home - pos) × K), with damping so it overshoots, wobbles and settles instead of snapping. Turn spring back off and there's no pull home — gravity just takes the letters off the bottom of the stage, and they respawn. This is a TinkerFX signature: the machine is the effect, and you can toggle every part of it off to see what each one was doing.

Production notes: respects prefers-reduced-motion (ball frozen at rest, no swing) · cost = one canvas, a handful of bodies — cheap · on touch, drag the ball with a finger; the stage traps its own gestures · the copied snippet is self-contained HTML + CSS + JS.