// Section components for atouchmoment.com — apple-style keynote scroll
const { useState, useEffect, useRef, useMemo } = React;
// Resolve an asset path to a bundled blob URL (window.__resources) when present.
function res(path) {
if (!path) return path;
const map = window.__resources || {};
if (path.indexOf("about-concert") >= 0 && map.aboutImg) return map.aboutImg;
if (path.indexOf("qloze-app") >= 0 && map.qlozeApp) return map.qlozeApp;
if (path.indexOf("garland") >= 0 && map.garlandImg) return map.garlandImg;
if (path.indexOf("letters") >= 0 && map.lettersImg) return map.lettersImg;
if (path.indexOf("hologram") >= 0 && map.hologramImg) return map.hologramImg;
if (path.indexOf("qr2shot") >= 0 && map.qr2shotImg) return map.qr2shotImg;
return path;
}
// ---------- scroll engine ----------
const REDUCED_MOTION = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const clamp01 = (v) => Math.max(0, Math.min(1, v));
// Single rAF-throttled scroll/resize dispatcher (window + inner scrollers via capture)
const ScrubBus = (() => {
const fns = new Set();
let ticking = false;
function run() {
ticking = false;
fns.forEach((f) => f());
}
function request() {
if (!ticking) {
ticking = true;
requestAnimationFrame(run);
}
}
document.addEventListener("scroll", request, { capture: true, passive: true });
window.addEventListener("resize", request, { passive: true });
return {
add(fn) { fns.add(fn); request(); },
remove(fn) { fns.delete(fn); },
request,
};
})();
function useScrub(fn) {
useEffect(() => {
if (REDUCED_MOTION) return;
ScrubBus.add(fn);
return () => ScrubBus.remove(fn);
}, []);
}
// Progress through a pinned (taller-than-viewport) section: 0 at top, 1 fully scrolled
function usePin(ref, varName = "--p") {
useScrub(() => {
const el = ref.current;
if (!el) return;
const r = el.getBoundingClientRect();
const vh = window.innerHeight;
const range = Math.max(1, r.height - vh);
el.style.setProperty(varName, clamp01(-r.top / range).toFixed(4));
});
}
// Travel progress: 0 when element enters bottom of viewport, 1 when it leaves the top
function useTravel(ref, varName = "--t") {
useScrub(() => {
const el = ref.current;
if (!el) return;
const r = el.getBoundingClientRect();
const vh = window.innerHeight;
el.style.setProperty(varName, clamp01((vh - r.top) / (vh + r.height)).toFixed(4));
});
}
// Global page progress → nav hairline (--gp on )
function GlobalProgress() {
useScrub(() => {
const doc = document.documentElement;
const scroller = document.querySelector(".atm-mobile__viewport");
const top = scroller ? scroller.scrollTop : (window.scrollY || doc.scrollTop);
const h = scroller
? scroller.scrollHeight - scroller.clientHeight
: doc.scrollHeight - window.innerHeight;
doc.style.setProperty("--gp", clamp01(top / Math.max(1, h)).toFixed(4));
});
return null;
}
// Thai-aware word segmentation for the manifesto scrub
function segmentWords(text, lang) {
if (typeof Intl !== "undefined" && Intl.Segmenter) {
try {
const seg = new Intl.Segmenter(lang === "th" ? "th" : "en", { granularity: "word" });
const out = [];
for (const s of seg.segment(text)) out.push(s.segment);
// merge whitespace into the previous chunk so spans stay tidy
return out.reduce((acc, cur) => {
if (!cur.trim() && acc.length) acc[acc.length - 1] += cur;
else acc.push(cur);
return acc;
}, []);
} catch (e) { /* fall through */ }
}
return text.split(/(\s+)/).filter(Boolean).reduce((acc, cur) => {
if (!cur.trim() && acc.length) acc[acc.length - 1] += cur;
else acc.push(cur);
return acc;
}, []);
}
const HL_RE = /valuable|asset|สินทรัพย์|มีค่า/i;
// IntersectionObserver-based fade-in wrapper
function Reveal({ children, delay = 0, as: As = "div", className = "", style = {}, ...rest }) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
if (REDUCED_MOTION) { setSeen(true); return; }
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } });
}, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
io.observe(el);
return () => io.disconnect();
}, []);
return (
{children}
);
}
// ---------- HERO (pinned, scrubs out) ----------
function Hero({ t }) {
const ref = useRef(null);
usePin(ref);
return (
);
}
// ---------- MANIFESTO (word-by-word scrub) ----------
function Manifesto({ t, lang }) {
const ref = useRef(null);
usePin(ref);
const words = useMemo(() => segmentWords(t.about.body1, lang), [t, lang]);
return (
{t.about.eyebrow}
{words.map((w, i) => (
{w}
))}
);
}
// ---------- ABOUT (bento) ----------
function About({ t }) {
const visRef = useRef(null);
useTravel(visRef);
return (
{t.about.eyebrow}
{t.about.title.split("\n").map((l, i) => {l})}
{t.about.body2}
{t.about.body3}
{[t.about.stat1, t.about.stat2, t.about.stat3].map((s, i) => (
{s[0]}
{s[1]}
))}
);
}
// ---------- BELIEVE ----------
function Believe({ t }) {
return (
{t.believe.eyebrow}
{t.believe.title}
{t.believe.pillars.map((p, i) => (
{p.n}
{p.t}
{p.b}
))}
{item.hero &&
{item.tag}}
{item.hero ? "01 · Flagship" : item.n}
{item.name}
{item.kicker}
{item.line &&
{item.line}
}
{item.body}
{item.use &&
Use case{item.use}
}
{item.cta && (
{item.cta} {item.href ? "↗" : "→"}
)}
{t.products.eyebrow}
{t.products.title.split("\n").map((l, i) => {l})}
{t.products.intro}
{items.map((it, i) => (
))}
{t.products.also.title}
{t.products.also.services.map(([n, b], i) => (
-
{String(i + 1).padStart(2, "0")}
{n}
{b}
))}
{t.products.also.note}
)}
);
}
// ---------- APPROACH (steps connected by a drawing line) ----------
function Approach({ t }) {
const trackRef = useRef(null);
useScrub(() => {
const el = trackRef.current;
if (!el) return;
const r = el.getBoundingClientRect();
const vh = window.innerHeight;
const raw = (vh - r.top) / (vh * 0.75);
el.style.setProperty("--p", clamp01(raw).toFixed(4));
});
return (
{t.approach.eyebrow}
{t.approach.title.split("\n").map((l, i) => {l})}
{t.approach.cols.map((c, i) => (
{String(i + 1).padStart(2, "0")}
{c.t}
{c.b}
))}
);
}
// ---------- CONTACT ----------
function Contact({ t }) {
return (
);
}
// ---------- FOOTER ----------
function Footer({ t }) {
return (
);
}
Object.assign(window, { Hero, Manifesto, About, Believe, Products, Approach, Contact, Footer, GlobalProgress });
![Artist on stage reaching out to fans, connected through the a touch moment app]({res("assets/about-concert.png")})