useReveal

Entrance choreography: every .lx-reveal / .lx-reveal-blur element inside the container gets .in when 15% enters the viewport (plays once). Animation classes come from effects.css.

Usage

Stagger via inline --lx-i (~90ms per step):

第一张 --lx-i:0

第二张 --lx-i:1

第三张 --lx-i:2

API

useReveal(root?: Ref<HTMLElement | null>): { refresh: () => void }

Item	Description
root	observation scope (defaults to the whole document)
refresh()	call after inserting content dynamically to re-scan

Behavior & boundaries:

• Plays once; scrolling out doesn't reverse
• SSR-safe; without IntersectionObserver or with prefers-reduced-motion: reduce, everything shows immediately (no animation)

Never bind reactive :class on .lx-reveal elements

A runtime :class update wipes the .in added by useReveal and the element vanishes. Express reactive state via data-* attributes or :style instead.