All motion recipes

3D & backgrounds / CANVAS

Orbiting system

Three points move on tilted orbits around a central body.

Orbiting system, DKC reference still

DKC reference implementation; not an original creator video. You can play, pause, and inspect time in the reference.

Make it fit your project.

Your brief stays in this browser. Preparing a prompt does not send it to a server.

Build a looping twelve-second orbital scene with Canvas 2D projection. Compute three circular paths in 3D, rotate their planes, project them with a fixed perspective, and sort bodies by depth before drawing. Use a restrained trail and an unchanging central body.

Build and check.

  1. Confirm the supplied content, target environment, and required assets before implementing.
  2. Build a looping twelve-second orbital scene with Canvas 2D projection. Compute three circular paths in 3D, rotate their planes, project them with a fixed perspective, and sort bodies by depth before drawing. Use a restrained trail and an unchanging central body.
  3. Expose seek(t) so frames can be inspected deterministically; add play, pause, replay, and a reduced-motion still.
  4. Inspect the opening, midpoint, and final state at desktop and mobile sizes; report any dependency or output limitation.

Know the limits.

  • This is a stylized orbital illustration, not a physically accurate simulation.
  • The prompt guides a coding agent; output quality depends on its implementation and review.

Want us to build it?

Send an optional project brief. We’ll receive your contact details, project description, and this recipe’s ID.

By sending this brief, you agree to our privacy policy. Prefer a conversation? Book a strategy call.

Catalog 2026-10-22.a82e12098f76 · Source revision sha256:dfbe6519cbc4fc84acc4cbf926d8a01c7f2e248dd46cedd67a9112b0e928c2ba