Floating objects

A few of the gravity well’s objects floating free behind the slot: two cubes, two spheres, four motes. Nothing holds them yet. The landing page ends with them around its final call.

Objects floating free around the final call

Light

Start with one command.

$npm create dta

Graphite

Start with one command.

$npm create dta

Story: /stories/floating-objects/default/

Guidelines

• Each object drifts on its own loop (9–14 s, alternating), cubes tumble (38–52 s), and each slides at its own depth (0.12–0.4) against the scroll: translateY(d × depth) where d is the section centre’s distance from the viewport centre.
• No orbit rings, no mesh: the point is the contrast with the hero.
• Same object markup and tokens as the well. All still under prefers-reduced-motion.

Tokens used

Read from the component’s source:

--d--dl--dx--dy--f--f2--f3--radius-full--s--stroke-hairline--t--well-dust--well-highlight--well-object-blue--well-object-blue-dark--well-object-blue-light--well-object-ink--well-object-ink-dark--well-object-ink-light--well-object-orange--well-object-orange-dark--well-object-orange-light--well-throat--x--y