intersect

Source

Scroll down, when part of this trigger moves out of the viewport, the intersection will occur.
<drab-intersect threshold="1" class="flex flex-col items-center gap-10">
    <div data-trigger class="card flex min-h-48 items-center justify-center">
        Scroll down, when part of this trigger moves out of the viewport, the
        intersection will occur.
    </div>
    <div
        data-content
        class="size-48 rounded-full bg-primary transition duration-1000 data-[intersect]:bg-teal-400"
    ></div>
</drab-intersect>