loading code fetching the highlighted snippet
FIG-001/ HOOK
observing viewport.
useInView(getter, options) returns a reactive boolean reflecting whether the observed element is intersecting its root. Scroll the panel — the top card toggles on every entry, the bottom card latches once.
- The hook takes a getter for the element so it can resolve the
binding after mount. Internally it wires up an
IntersectionObserveron the resolved root and re-uses it across bindings. -
once: truelatches: once the observer reports the element as visible, the store is pinned attrueforever (well, until unmount). The bottom card uses this — useful for one-shot reveal animations. - Without
once, the store flips back tofalsewhen the element scrolls out. Combine withwhileInViewon motion elements when you want the animation tied directly to viewport — this hook is for non-motion logic.
Scroll the panel below.
top: hidden
↓ scroll ↓
bottom (once): pending
category · hook
sheet · sheet 01 / 01
⟳ to re-run