{# @description Wraps a row or a grid and brings its children in one after another as they scroll into view. Simply there where the browser cannot do it. #}
{# @prop effect:select['up', 'down', 'left', 'right', 'zoom', 'blur', 'fade'] | default:"up" | description:"How each child arrives. A direction is the way it travels, so up rises into place from below." #}
{# @prop distance:number | default:"2" | description:"How far each child travels, in rem. Used by up, down, left and right." #}
{# @prop step:number | default:"0.25" | description:"How far each child waits behind the one before it, as a share of its own height" #}
{# @prop per:number | default:"0" | description:"How many children sit in a row, so the count starts again on each row. 0 counts straight through." #}
{# @prop over:number | default:"1" | description:"How much scrolling each arrival takes, as a multiple of the child's own height" #}
{# @prop class:text | description:"Extra classes on the wrapper. The grid or flex layout goes here: grid gap-6 md:grid-cols-3." #}
{# @slot The children — Each direct child arrives by itself. The first twelve are staggered and any after that arrive with the first. #}
{% comment %}
A child knows its number from `nth-child`, and `per` restarts the count because
CSS cannot see a row (docs/adr/0006-reveals-follow-the-scroll-position.md).
{% endcomment %}
{{ slot }}