);
}
// === Hook: scroll reveal ===
function useScrollReveal(rootSelector) {
useEffect(() => {
const root = rootSelector ? document.querySelector(rootSelector) : document;
if (!root) return;
const els = root.querySelectorAll('.fade-up');
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
},
{ threshold: 0.12, rootMargin: '0px 0px -40px 0px' }
);
els.forEach((el) => io.observe(el));
return () => io.disconnect();
}, [rootSelector]);
}
// === Animated number counter ===
function CountUp({ to, duration = 1400, suffix = '', prefix = '' }) {
const [n, setN] = useState(0);
const ref = useRef(null);
const started = useRef(false);
useEffect(() => {
if (!ref.current) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting && !started.current) {
started.current = true;
const start = performance.now();
const tick = (now) => {
const t = Math.min(1, (now - start) / duration);
const eased = 1 - Math.pow(1 - t, 3);
setN(Math.floor(eased * to));
if (t < 1) requestAnimationFrame(tick);
else setN(to);
};
requestAnimationFrame(tick);
}
});
},
{ threshold: 0.4 }
);
io.observe(ref.current);
return () => io.disconnect();
}, [to, duration]);
return {prefix}{n.toLocaleString()}{suffix};
}
// === Discord-style real-time preview widget ===
function DiscordLivePreview({ accent = '#4DA3FF' }) {
const [online, setOnline] = useState(847);
const [voice, setVoice] = useState(42);
useEffect(() => {
const t = setInterval(() => {
setOnline((n) => Math.max(820, Math.min(890, n + (Math.random() < 0.5 ? -1 : 1) * Math.floor(Math.random() * 4))));
setVoice((n) => Math.max(30, Math.min(60, n + (Math.random() < 0.5 ? -1 : 1) * Math.floor(Math.random() * 3))));
}, 1800);
return () => clearInterval(t);
}, []);
const channels = [
{ type: 'text', name: 'はじめに', unread: false },
{ type: 'text', name: '雑談', unread: true },
{ type: 'text', name: 'カスタム募集', unread: true },
{ type: 'voice', name: 'カスタム部屋 #1', count: 10 },
{ type: 'voice', name: 'まったり通話', count: 5 },
{ type: 'voice', name: '初心者ロビー', count: 8 },
];
return (