// ────────────────────────────────────────────────────────────── // ritlum — page sections + assembly // ────────────────────────────────────────────────────────────── // ── small shared pieces ─────────────────────────────────────── const LogoMark = ({ size = 26 }) => { const cols = [T.habit.blue, T.habit.orange, T.habit.green, T.habit.pink]; return ( {cols.map((c, i) => ( ))} ); }; const Wordmark = ({ color = RT.darkInk, size = 21 }) => ( ritlum ); const Eyebrow = ({ children, dark }) => ( {children} ); // App Store–style pill (generic mark, no trademarked art) const AppStoreButton = ({ dark }) => ( e.preventDefault()} style={{ display: "inline-flex", alignItems: "center", gap: 11, textDecoration: "none", background: dark ? RT.darkInk : T.ink, color: dark ? T.ink : "#fff", padding: "13px 20px", borderRadius: 14, cursor: "pointer", }} > {[0, 1, 2, 3].map((i) => ( ))} Download on the App Store ); const NotifyForm = ({ dark, compact }) => { const [email, setEmail] = useState(""); const [sent, setSent] = useState(false); const submit = (e) => { e.preventDefault(); if (!email.trim()) return; try { localStorage.setItem("ritlum_notify", email); } catch (_) {} setSent(true); }; if (sent) return (
You're on the list — we'll email you at launch.
); return (
setEmail(e.target.value)} placeholder="you@email.com" style={{ width: "100%", minWidth: 0, padding: "13px 16px", borderRadius: 14, fontSize: 15, fontFamily: T.font, background: dark ? "rgba(255,255,255,0.06)" : "#fff", color: dark ? RT.darkInk : T.ink, border: `1px solid ${dark ? RT.darkLineStrong : T.borderStrong}`, outline: "none", }} />
); }; // scroll reveal const Reveal = ({ children, delay = 0, style }) => { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { const reduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduced) { setShown(true); return; } const el = ref.current; if (!el) return; // reveal immediately if already in view on mount const inView = () => { const r = el.getBoundingClientRect(); return r.top < (window.innerHeight || 800) * 0.92 && r.bottom > 0; }; if (inView()) { setShown(true); return; } let done = false; const reveal = () => { if (!done) { done = true; setShown(true); } }; const io = new IntersectionObserver( (es) => { es.forEach((e) => { if (e.isIntersecting) { reveal(); io.disconnect(); } }); }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }, ); io.observe(el); // safety net — never leave content invisible const t = setTimeout(reveal, 2200); return () => { io.disconnect(); clearTimeout(t); }; }, []); return (
{children}
); }; const Section = ({ dark, panel, children, id, style }) => (
{children}
); const SectionLabel = ({ children, dark }) => (
{children}
); // ── NAV ─────────────────────────────────────────────────────── const Nav = () => { const [solid, setSolid] = useState(false); useEffect(() => { const on = () => setSolid(window.scrollY > 40); on(); window.addEventListener("scroll", on, { passive: true }); return () => window.removeEventListener("scroll", on); }, []); const link = { color: RT.darkMuted, textDecoration: "none", fontSize: 14.5, fontWeight: 500, letterSpacing: -0.1, }; return ( ); }; // ── HERO ────────────────────────────────────────────────────── // Realistic per-day patterns — same data the app's dot grid shows. const HERO_ROWS = TRACKER_ROWS; const Hero = () => (
{/* ambient glow */}
Now on Kickstarter soon · Ships Q4 2026

Your habits,
brought into the light.

A beautifully simple habit app — and{" "} ritlum, a physical desk tracker that mirrors your progress in glowing light. Tap a token, watch your habit light up.

{/* glowing device */}
); // ── NFC SECTION ─────────────────────────────────────────────── const TokensSection = () => (
Habit tokens · NFC

Tap. Light up. Done.

Map any habit to a little NFC{" "} habit token{" "} in the app. Keep it by the door, the kettle, your gym bag — tap your phone to log a completion in under a second. It lights up on your tracker instantly.

); // ── TRACKER DEEP-DIVE ───────────────────────────────────────── const TrackerFeature = ({ title, body, children }) => (
{children}

{title}

{body}

); const Callout = ({ children, color = T.ink }) => ( {children} ); const TrackerSection = () => (
The device

ritlum — a tracker that lives on your desk.

A warm, frosted panel of soft LEDs. Every row is one habit; every light is real progress. Glanceable from across the room, quiet enough for a nightstand.

{/* showcase */}
Up to 8 habits 16 LEDs per row Frosted diffuser USB-C powered
{/* mirror moment — mark a habit in the app, it lights up on the desk */}

Mirrors your app, instantly.

Complete a habit in the app and the matching row lights up on your desk — no sync button, no waiting.

{/* feature trio */}
{" "} Firmware v1.4 ready OTA
{[ ["Brightness", "80%"], ["Sleep", "10PM – 7AM"], ["Animation", "Breathe"], ].map(([k, v]) => (
{k} {v}
))}
); // ── APP SHOWCASE CAROUSEL ───────────────────────────────────── const APP_SCREENS = [ { key: "today", label: "Today", desc: "A 16-day dot grid, a completion count, and your live streak — today’s habits at a single glance.", }, { key: "history", label: "History", desc: "Filter by habit, scan a 14-day strip, dig into any day, and spot your best runs and comebacks.", }, { key: "stats-habits", label: "Stats · Habits", desc: "Rank your habits by streak or completion rate, see who’s at risk, and spot your strongest routines.", }, { key: "detail-once", label: "Detail · Once", desc: "Log a once-daily habit like Meditate — see a 12-week heatmap, streaks, and recent completions.", }, { key: "detail-count", label: "Detail · Count", desc: "Track a count habit like Hydrate with a stepper, progress pips, bar chart history, and daily logs.", }, { key: "detail-timer", label: "Detail · Timer", desc: "Run a timer habit like Read — set a duration, see ring progress, session history, and monthly minutes.", }, ]; const renderAppScreen = (key) => { if (key === "today") return ; if (key === "history") return ; if (key === "stats-habits") return ; if (key === "detail-once") return ; if (key === "detail-count") return ; return ; }; const CarouselArrow = ({ dir, onClick }) => ( ); const AppCarousel = () => { const [index, setIndex] = useState(0); const [paused, setPaused] = useState(false); const [reduced, setReduced] = useState(false); const [vw, setVw] = useState(1200); const touchStartX = useRef(null); const n = APP_SCREENS.length; useEffect(() => { setReduced( window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches, ); setVw(window.innerWidth); const onResize = () => setVw(window.innerWidth); window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); useEffect(() => { if (paused || reduced) return; const t = setInterval(() => setIndex((i) => (i + 1) % n), 5000); return () => clearInterval(t); }, [paused, reduced, n]); useEffect(() => { const onKey = (e) => { const el = document.getElementById("app"); if (!el) return; const r = el.getBoundingClientRect(); if (r.top > window.innerHeight || r.bottom < 0) return; if (e.key === "ArrowLeft") { setPaused(true); setIndex((i) => (i - 1 + n) % n); } if (e.key === "ArrowRight") { setPaused(true); setIndex((i) => (i + 1) % n); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [n]); const go = (dir) => { setPaused(true); setIndex((i) => (i + dir + n) % n); }; const wrapOffset = (i) => { let d = i - index; if (d > n / 2) d -= n; if (d < -n / 2) d += n; return d; }; const SCALE = vw < 420 ? 0.54 : vw < 640 ? 0.62 : 0.7; const NATIVE = 400; const phoneW = NATIVE * SCALE; const phoneH = NATIVE * 2.165 * SCALE; const stageW = phoneW + 130; const slideDist = 70; const onTouchStart = (e) => { touchStartX.current = e.touches[0].clientX; }; const onTouchEnd = (e) => { if (touchStartX.current === null) return; const dx = e.changedTouches[0].clientX - touchStartX.current; if (Math.abs(dx) > 40) go(dx < 0 ? 1 : -1); touchStartX.current = null; }; return (
setPaused(true)} onMouseLeave={() => setPaused(false)} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 30, }} > {/* stage */}
{/* ambient glow */}
{/* phone with transitioning screens */}
{APP_SCREENS.map((s, i) => { const offset = wrapOffset(i); const isActive = i === index; if (Math.abs(offset) > 1) return null; return (
{renderAppScreen(s.key)}
); })}
{/* arrows */} go(-1)} /> go(1)} />
{/* caption */}
{APP_SCREENS[index].label}
{APP_SCREENS[index].desc}
{/* dots */}
{APP_SCREENS.map((s, i) => (
); }; const AppSection = () => (
The app

Beautiful enough to open every day.

A calm, considered iOS app where your habits feel good to keep. It works perfectly on its own — and the tracker is the cherry on top.

); // ── FEATURES GRID ───────────────────────────────────────────── const GoalChip = ({ label, color, children }) => (
{label}
{children}
); const FeatureCard = ({ title, body, span, dark, children }) => (
{children}

{title}

{body}

); const FeaturesSection = () => (
Everything else

Thoughtful where it counts.

3 / 8
12:00
{[40, 65, 52, 80, 68, 92, 74].map((h, i) => (
))}
{" "} Synced · works offline
{[ ["Meditate", "7:00 AM", T.habit.blue], ["Hydrate", "Every 2h", T.habit.pink], ].map(([n, t2, c]) => (
{n} {t2}
))}
{Array.from({ length: 12 }).map((_, i) => ( ))}
); // ── TIMELINE ────────────────────────────────────────────────── const TimelineSection = () => { const nodes = [ { tag: "Q3 2026", title: "App launches", body: "The iOS companion app ships first — free to start tracking today.", color: T.habit.blue, active: false, }, { tag: "Summer 2026", title: "Kickstarter goes live", body: "Back ritlum and lock in early-bird pricing on the tracker + tokens.", color: T.green, active: true, }, { tag: "Q4 2026", title: "ritlum ships", body: "The desk tracker arrives — pair it, and your habits light up.", color: T.habit.orange, active: false, }, ]; return (
The plan

App first. Tracker next.

{nodes.map((n, i) => (
{n.tag}
{n.title}

{n.body}

{n.active && (
{" "} Sign up for early access
)}
))}
); }; // ── CLOSING CTA ─────────────────────────────────────────────── const CtaSection = () => (

Start the app today.
Light up your desk this winter.

Download the app to begin, and get notified the moment the ritlum Kickstarter goes live.

No spam. One email at launch.
); // ── FOOTER ──────────────────────────────────────────────────── const Footer = () => (
“ritlum” is a working name and may change before launch.
{["Tracker", "App", "Tokens", "Timeline"].map((l) => ( {l} ))}
© 2026 ritlum
); // ── PAGE ────────────────────────────────────────────────────── const RitlumPage = () => (
); window.RitlumPage = RitlumPage;