Unhatched : Interactive Spider Egg System

Live and interactive at romanjahandideh.com. Try it.

This is a real-time physics simulation of six glowing orbs, spider eggs contained inside an invisible circular cage anchored to the centre of the spiderweb. Each egg is an independent physics body with its own mass, velocity, and collision radius. Nothing is scripted or looped on a timer. Every position on screen is the result of a live physics solve running every animation frame.
Each egg is subject to a constant downward gravity, pulling the cluster toward the bottom of the cage. A seeded idle wander force nudges each one in a subtly different direction every frame; no two eggs drift identically, so the cluster always feels loosely alive even when your cursor is nowhere near it. Air drag bleeds velocity continuously, so the eggs never coast forever; they settle, shift, and settle again.
The cage boundary is enforced as a circular wall. When an egg drifts too close to the edge, it bounces back not with a hard snap but with a tuned restitution value that makes the wall feel soft and tensioned, like silk stretched over a frame. Eggs also collide with each other using full impulse-based resolution with individual mass ratios, so a heavier egg will shunt a lighter one further than the reverse. Seven separation passes run per frame to prevent overlap from accumulating.
Your cursor is tracked not just for position but for velocity and acceleration computed each frame from the delta between current and previous positions. This data feeds a directional tilt field that pushes all six eggs away from where you are and toward the opposite side of the cage, proportional to how far your cursor is from the centre of the cluster. Move slowly, and the eggs drift gently. Sweep fast, and the whole cluster lurches and bounces off the far wall before settling back.
On mobile, the same tilt field is driven by the device gyroscope instead of the cursor. Physical tilting of the phone shifts the eggs inside the cage the same way gravity would shift eggs inside a real silk sac. The heavier ones lag behind, the lighter ones respond faster.
When you hover directly over one egg, it inflates to more than twice its resting size and freezes in place while the other five shrink and pull back as if acknowledging the one you have chosen. Each egg also breathes independently on a slow sinusoidal pulse offset by a unique seed value, so their glows expand and contracts at slightly different phases at all times.
On entry, the eggs hatch out of a single stacked point, one leading, the rest following in a staggered cascade before separating into their natural resting positions inside the cage. The entrance sequence is timed to feel like something emerging, not something loading.
Stack: Vanilla JavaScript · CSS Transforms · requestAnimationFrame
Physics: Circular cage confinement · Gravity + air drag · Impulse-based collision resolution · Velocity-coupled mouse tilt field · Gyroscope input · Per-body mass · Breathing pulse with seeded phase offset · Staggered entry animation