feat: implement ScrollObserver island for scroll-reveal animations

Add IntersectionObserver-based island that watches all .reveal,
.reveal-left, .reveal-right, and .reveal-scale elements and adds
.visible class when they enter the viewport (10% threshold).

This was the missing piece — the ScrollReveal component set opacity:0
on elements but the observer to add .visible was noted as "TODO Chunk 6"
and never implemented, making all landing page content invisible.

Author: Sephyi

src/app.rs

@@ -9,7 +9,7 @@ use leptos_router::{
     path,
 };
 
-use crate::components::{footer::Footer, nav::Nav};
+use crate::components::{footer::Footer, nav::Nav, scroll_observer::ScrollObserver};
 use crate::pages::{docs::DocsPage, landing::Landing, not_found::NotFound};
 
 #[component]
@@ -24,6 +24,7 @@ pub fn App() -> impl IntoView {
                 <Route path=path!("/docs/:slug") view=DocsPage/>
             </Routes>
             <Footer/>
+            <ScrollObserver/>
         </Router>
     }
 }

src/components/mod.rs

@@ -9,5 +9,6 @@ pub mod doc_toc;
 pub mod footer;
 pub mod nav;
 pub mod pipeline_demo;
+pub mod scroll_observer;
 pub mod scroll_reveal;
 pub mod theme_toggle;

src/components/scroll_observer.rs

@@ -0,0 +1,50 @@
+// SPDX-FileCopyrightText: 2026 Sephyi <me@sephy.io>
+//
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+
+use leptos::prelude::*;
+use wasm_bindgen::prelude::*;
+
+/// Single island that observes all `.reveal` / `.reveal-left` / `.reveal-right` /
+/// `.reveal-scale` elements and adds `.visible` when they enter the viewport.
+/// Place once in the app shell — it covers the entire page.
+#[island]
+pub fn ScrollObserver() -> impl IntoView {
+    Effect::new(move || {
+        let window = web_sys::window().unwrap();
+        let document = window.document().unwrap();
+
+        let callback = Closure::<dyn Fn(js_sys::Array, web_sys::IntersectionObserver)>::new(
+            move |entries: js_sys::Array, _observer: web_sys::IntersectionObserver| {
+                for entry in entries.iter() {
+                    let entry: web_sys::IntersectionObserverEntry = entry.unchecked_into();
+                    if entry.is_intersecting() {
+                        let target = entry.target();
+                        let _ = target.class_list().add_1("visible");
+                    }
+                }
+            },
+        );
+
+        let options = web_sys::IntersectionObserverInit::new();
+        options.set_threshold(&JsValue::from_f64(0.1));
+
+        let observer = web_sys::IntersectionObserver::new_with_options(
+            callback.as_ref().unchecked_ref(),
+            &options,
+        )
+        .unwrap();
+
+        let selectors = ".reveal, .reveal-left, .reveal-right, .reveal-scale";
+        let elements = document.query_selector_all(selectors).unwrap();
+        for i in 0..elements.length() {
+            if let Some(el) = elements.get(i) {
+                observer.observe(el.unchecked_ref());
+            }
+        }
+
+        callback.forget();
+    });
+
+    view! {}
+}