// Rhyme Compass LP — app shell: nav, tweaks, reveal, mount const NAV_LINKS = [ { href: "#problems", label: "課題" }, { href: "#features", label: "機能" }, { href: "#takes", label: "テイク" }, { href: "#roadmap", label: "Roadmap" }, { href: "#pricing", label: "料金" }, ]; function Navbar() { const [scrolled, setScrolled] = React.useState(false); const [open, setOpen] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 60); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); } // ---- accent palettes — defaults map to DS domain gradient tokens ---- const ACCENTS = { "Cyber Blue": { grad: "var(--gradient-apps)", ink: "#a5b4fc", soft: "rgba(99,102,241,.12)", line: "rgba(99,102,241,.32)", glow: "rgba(49,46,129,.28)" }, "Neon Tech": { grad: "linear-gradient(135deg,#22d3ee,#38bdf8,#818cf8)", ink: "#7dd3fc", soft: "rgba(56,189,248,.12)", line: "rgba(56,189,248,.32)", glow: "rgba(8,47,73,.4)" }, "Music": { grad: "var(--gradient-music)", ink: "#fcd34d", soft: "rgba(245,158,11,.12)", line: "rgba(245,158,11,.32)", glow: "rgba(127,29,29,.3)" }, }; const HERO_BGS = { "コンパス": "assets/bg-compass.jpg", "聖堂": "assets/bg-cathedral.jpg", "星雲": "assets/bg-nebula.jpg" }; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "Cyber Blue", "headFont": "Geist", "heroBg": "コンパス", "headline": "「文字数パズル」", "loopDemo": true }/*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); // apply accent + font + hero bg to CSS vars React.useEffect(() => { const a = ACCENTS[t.accent] || ACCENTS["Cyber Blue"]; const r = document.documentElement.style; r.setProperty("--grad-accent", a.grad); r.setProperty("--accent-ink", a.ink); r.setProperty("--accent-soft", a.soft); r.setProperty("--accent-line", a.line); r.setProperty("--accent-glow", a.glow); r.setProperty("--head-font", t.headFont === "Geist Mono" ? "var(--font-mono)" : "var(--font-sans)"); BG.compass = HERO_BGS[t.heroBg] || HERO_BGS["コンパス"]; }, [t.accent, t.headFont, t.heroBg]); // reveal-on-scroll. Content is visible by default; we only arm the hidden // state via when JS runs, then reveal. A hard safety net // guarantees nothing can stay invisible even if IntersectionObserver misbehaves. React.useEffect(() => { const root = document.documentElement; const els = Array.from(document.querySelectorAll(".reveal")); const show = (e) => e.classList.add("in"); if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { els.forEach(show); return; } root.classList.add("anim"); const vh = () => window.innerHeight || 800; els.forEach((e) => { if (e.getBoundingClientRect().top < vh() * 0.95) show(e); }); let io; if ("IntersectionObserver" in window) { io = new IntersectionObserver((ents) => { ents.forEach((e) => { if (e.isIntersecting) { show(e.target); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: "0px 0px -6% 0px" }); els.forEach((e) => { if (!e.classList.contains("in")) io.observe(e); }); } const onScroll = () => els.forEach((e) => { if (!e.classList.contains("in") && e.getBoundingClientRect().top < vh()) show(e); }); window.addEventListener("scroll", onScroll, { passive: true }); const t1 = setTimeout(onScroll, 1200); const t2 = setTimeout(() => els.forEach(show), 3000); // hard safety net return () => { if (io) io.disconnect(); window.removeEventListener("scroll", onScroll); clearTimeout(t1); clearTimeout(t2); }; }, []); // patch hero headline highlight from tweak const phrases = HERO_PHRASES; return ( setTweak("accent", v)} /> setTweak("headFont", v)} /> setTweak("heroBg", v)} /> setTweak("headline", v)} /> ); } // Hero variant that injects the tweakable headline + bg without editing sections.jsx function HeroTweaked({ headline, bg, phrases }) { return (

登録不要・3秒でスタート
メロ先作詞の
{headline}を、
一瞬で解決する。

Rhyme Compassは、MIDIを読み込むだけでフレーズを自動分割し、音数の過不足をリアルタイムに可視化する、作曲家・作詞家のためのスマート歌詞エディタ。

無料で今すぐ使う機能を見る

アカウント登録なし。ブラウザを開けば、すぐ書き始められます。

MIDI インポート音数バリデーション .svp 書き出しテイク管理

); } const _rcRootEl = document.getElementById("rc-app"); if (!_rcRootEl.__rcMounted) { _rcRootEl.__rcMounted = true; ReactDOM.createRoot(_rcRootEl).render(); }

メロ先作詞の{headline}を、一瞬で解決する。

メロ先作詞の
{headline}を、
一瞬で解決する。