A Canvas 2D orb built from a single strand. One parameter is walked from pole to pole while the azimuth is walked a whole number of turns against it, so every dot in the scene is one point on one continuous coil -- there is no cloud and no second object. The winding count breathes on a cosine of the loop phase while the flow along the strand stays linear in it: two laws on one clock, which is why the orb never repeats a pose inside a loop and never settles into a pattern the eye can finish. Depth is the only shading there is. A dot is drawn larger and brighter the nearer it sits, both cues restated about the ball centre so the authored dot size means the same thing whatever the camera is doing, and the whole strand is painted back to front with source-over alpha -- that sort is not a nicety, it is the entire reason the thing reads as a volume rather than as a flat scatter. Every dot toward a pole is tapered by a power of its own colatitude, so the strand thins where it crowds instead of clotting. The framing is solved rather than sampled: a sphere of radius R seen from a camera pv radii away throws a silhouette of R*pv/sqrt(pv^2-1), taken from the tangent point, so the orb fills the box it was given exactly and does not change size when the camera moves. Every length in the scene is a share of something else -- the orb is a percentage of the stage short side, a dot is a percentage of the orb radius, the camera is in orb radii -- which is what makes the dials portable: resize the stage and the picture survives untouched. Sub-pixel discs are widened to a floor and their alpha scaled by the area they would otherwise have lost, because Canvas 2D under-inks a circle thinner than a pixel and the back of the ball is exactly where the depth cue lives. Drag is a rigid rotation with a flick that coasts and decays, and the total pitch is clamped so the ball cannot roll past its own poles and come back upside down. Off-screen, in a hidden tab, or under a reduced-motion preference the loop stops entirely rather than redrawing a frame nobody sees. Dot and accent colour, dot count and size, winding bounds, pole taper, accent spacing, camera distance, depth fade, orientation, view spin, loop length and pointer response are all editable, and the export is one self-contained HTML file that fetches nothing at all.
In collections: Particle Effects & Particle Backgrounds· Animated Orbs: AI, Siri & Voice Orb Animations
UI/UX · HTML / CSS / JS · All tools