Lab How the motion works

Every way things fall apart.

This site's motion is one small engine — eight variants of “come apart, go back together” in about 35 KB of plain JavaScript, no libraries. Use this page to try each one, change the speed, and decide which belongs where. It is also the one page where the site is allowed to go completely over the top.

Things fall apart. Then they come back.

Asunder means apart. Limit means a line. The name has always described the method: take the thing to pieces, understand every piece, and put it back together so that it holds — whether the thing is a logo, a network, a website or a sentence like this one.

“They took the whole thing apart, explained every piece, and gave it back working.”
Sample testimonial · where a client's words go: short, specific, signed

A card, for instance

Blocks like this one don't split into letters — they fracture into shards, or tear into bands like a bad signal. Either way, they come back whole.

Partsclip-path · clones · transforms · nothing else

A matte charcoal mug with an orange rim stripe on a plain background
Sample product

Studio mug, charcoal

$24 $28

An operations console concept in the studio's colours — uptime, deployments, pipelines and services on one dark dashboard
A hand checking a website on a phone beside a laptop with code
Pick a target and a variant. The log shows what ran and how long it took.
Target
Speed 1.0× Unit
Variants
Over the top

§ The variants

Eight ways apart.

Text variants split a line into letters or words. Block variants clone the element into pieces and animate the pieces. The mark has its own.

  • scatter — letters fly out from an impact point and fly back in from everywhere. The hero uses this on load.
  • gravity — letters drop, bounce on the line's floor, pile up, then float back into place. Real physics, one frame at a time.
  • sand — the line is rasterised into grains that blow away on a wind and drift back home. Canvas; capped on phones.
  • boot — DOS-style: the line backspaces itself away and types back in with a block cursor. The second hero line uses this.
  • flip — split-flap board: each character cycles through glyphs before landing on the right one.
  • shards — any block fractures into jittered triangles that fly apart and reassemble. Cards use this when they scroll into view.
  • glitch — any block tears into horizontal bands that shift like a bad signal, with orange and purple fringes, then snaps back.
  • split — the mark's two pieces drift apart along the cut, a purple tear-line draws itself in the gap, and they re-seat with no bounce.

§ The rules

Enchanting, not exhausting.

Bold is easy. Bold that a CTO still trusts takes rules, and the engine enforces them rather than hoping.

  • The resting state is the real page. Split text is restored to plain HTML after every run; nothing is ever left broken (except on the 404 page, on purpose).
  • Only transforms, opacity and clip-path move. No layout properties, so the page never reflows or jumps.
  • The hero plays once per session. Coming back from another page, everything is already in place.
  • One reveal per element, one animation at a time. Headings assemble when they first scroll into view and never again on their own.
  • Idle moments are rare and small. Every half-minute or so, if you haven't touched anything, one visible heading comes apart and goes back. That's the “little over the top”.
  • Overshoot is capped at 6%. Pieces click into place; they don't bounce.
  • Fonts first. Nothing is split until the web fonts have loaded (or 1.5 seconds have passed).
  • Off means off. The motion switch in the header (and the operating system's reduce-motion setting) collapse every variant to a crossfade, and the choice is remembered.
  • Fail whole. Every variant is wrapped so that if anything throws, the element is shown in its final state.

§ Under the hood

No framework. No libraries.

Three HTML files, one stylesheet, two scripts. The engine (sunder.js) is plain JavaScript using the Web Animations API, clip-path, a little canvas and one requestAnimationFrame loop for the physics. The site opens from a folder, works without a build step, and is served as static files.

Markup opts in with two attributes: data-sunder="shards" names the variant (or a list, or “random”), and data-sunder-on="view hover click idle" names the triggers. Everything on this page is driven by the same two attributes and a few lines of glue.

PartsWeb Animations API · clip-path polygons · canvas · IntersectionObserver · localStorage · sessionStorage · Intl.DateTimeFormat