{# @description Wraps anything and brings it in as it scrolls into view: fading, rising, sliding, growing or coming into focus. Simply there where the browser cannot do it. #}
{# @prop effect:select['up', 'down', 'left', 'right', 'zoom', 'blur', 'fade'] | default:"up" | description:"How it arrives. A direction is the way it travels, so up rises into place from below." #}
{# @prop distance:number | default:"2" | description:"How far it travels, in rem. Used by up, down, left and right." #}
{# @prop over:number | default:"1" | description:"How much scrolling the arrival takes, as a multiple of the element's own height: 1 finishes as its bottom edge comes into view, 2 takes twice as long." #}
{# @prop class:text | description:"Extra classes on the wrapper" #}
{# @slot What arrives — Anything: a heading, a card, a picture, a whole row. #}
{% comment %}
The movement follows the scroll position, so it runs backwards when the page
is scrolled back up (docs/adr/0006-reveals-follow-the-scroll-position.md).
`left` and `right` start outside the box: a parent clips them with `overflow-clip`.
{% endcomment %}
{{ slot }}