<?php // model $status = state('waiting...'); // UI (place a spacer so you need to scroll to see the example-sentinel) $app = fragment([ el('div', [attrs(['class' => 'container p-3'])], [ el('h1', [], [ text('Effect: visible + set') ]), el('p', [ cls('sticky-top') ], [ text(concat('Status = ', read($status))) ]), el('p', [cls('text-muted')], [ text('Scroll down until the gray box enters the viewport.') ]), // spacer to force scroll el('div', [attrs(['style' => 'height: 1200px; background: repeating-linear-gradient(45deg,#f8f9fa,#f8f9fa 10px,#ffffff 10px,#ffffff 20px);'])], []), // example-sentinel el('div', [attrs(['id' => 'example-sentinel', 'style' => 'height: 120px; background: #e9ecef; display:flex; align-items:center; justify-content:center; border-radius:8px;'])], [ text('👋 I am the example-sentinel — make me visible') ]), el('div', [attrs(['style' => 'height: 600px;'])], []), // extra space after ]), // EFFECT: when #example-sentinel becomes visible, set status onVisible( [ set($status, val('visible!'), true) ], // asAction = true threshold: 0.1, rootMargin: '0px 0px -10% 0%', target: selectorTarget('#example-sentinel') ), // EFFECT: when #example-sentinel goes out of viewport, set status onLeftViewport( [ set($status, val('Invisible!'), true) ], // asAction = true threshold: 0.1, rootMargin: '0px', target: selectorTarget('#example-sentinel') ), ]);