anthemionanthemion-hyperion
← all of Classical

Classical

Hyperion, the Titan who goes above

A hand opens and rises the length of the page, reaching for the sun at the end of it.

A hand built from bone offsets rather than a model — five chains of three bones, a palm cut under its own knuckle line, sampled once into fourteen thousand marks. It is curled at the top of the page and fully extended at the bottom, so the pose is the scroll rather than an animation laid over it: stop halfway and the hand is halfway open. The fingers unfurl in the order a real hand opens, index first and the thumb last to leave the palm, and the hand is pitched back when it is closed so the folded fingers stand above the knuckle line — square on, a fist is only a wedge, because its whole mass folds away behind the palm. It turns to face the reader as it reaches. Where an <anthemion-sky> is an ancestor it leans toward the hour's actual sun, read through the cascade — one sun on the page, not a second clock.

Integration

<link rel="stylesheet" href="anthemion.css">
<script type="module" src="anthemion.js"></script>

<anthemion-hyperion count="26000" weight="44" spread="55" turn="34" lean="45" cursor="0" tilt="0" spin="0" place="inline" drive="scroll"></anthemion-hyperion>

Slot

The site's ground: one fixed form behind every page, mounted in the shell.

Custom properties

  • --hyperion-layer
  • --cloud-ratio
  • --cloud-ink

Budget

  • One. It is the site's centrepiece and a second one is a competing centre, which is no centre.
  • Never with a krater or an antikythera. It is the page's cloud now, and two clouds on one screen read as a screensaver.
  • It reports scroll but must never be given a `progressbar` role or a label. Ouroboros, chariot and caduceus are the page's real indicators.
  • Mount it `place="fixed"` in the site shell. `inline` exists so a gallery can show it in a tile and is not a way to use it on a page.
  • It paints at `z-index: -1`, so the page background belongs on `html`. An opaque background on `body` hides it completely.
  • Keep `weight` low — under about 40. The density is meant to come from marks overlapping, and the hand sits under body copy that has to stay the thing carrying contrast.
  • It is ground, not the moment. A page whose only strong element is the hand behind it is still a flat page, so give the page a real weight-3 moment as well.
  • Leave `cursor` off unless the form is what a visitor is actually looking at. It is a lean, not a follow, and a page whose background reacts to every mouse movement is a page nobody reads quietly. It binds nothing on a touch device or under reduced motion.
  • Anything opaque laid over it slices it, and a hand cut in half is worse than no hand. Cards on a page carrying the reach need a translucent ground, or the reach needs the column they do not occupy.

Restraint is the aesthetic, and it does not survive being applied generously. These limits are the specification, not advice.

Also in surface