paused.current=true} onMouseLeave={()=>paused.current=false}>
{HERO_SHOTS.map((s,i)=>{
let rel=i-active; if(rel>1)rel-=3; if(rel<-1)rel+=3;
return(
);
}
/* ---------- interactive prototype ---------- */
const PATTERN0 = [{s:'D',q:.5},{s:'T',q:.5},{s:'R',q:.5},{s:'T',q:.5},{s:'D',q:.5},{s:'R',q:.5},{s:'T',q:.5},{s:'R',q:.5}];
function TapPrototype({t}){
const [events,setEvents] = useState(PATTERN0);
const [playing,setPlaying] = useState(false);
const [cur,setCur] = useState(-1);
const [loop,setLoop] = useState(true);
const [bpm,setBpm] = useState(96);
const bpmRef = useRef(bpm); bpmRef.current = bpm;
const loopRef = useRef(loop); loopRef.current = loop;
const evRef = useRef(events); evRef.current = events;
const stepsRef = useRef(PATTERN0.map((e,i)=>({...e,_i:i})));
const MeasureSVG = window.MeasureSVG;
const cycle = (s)=> s==='R'?'D': s==='D'?'T':'R';
const tapNote = (i)=>{
setEvents(prev=>{
const ns = cycle(prev[i].s);
const next=prev.map((e,j)=> j===i?{...e,s:ns}:e);
if(stepsRef.current[i]) stepsRef.current[i].s = ns;
if(ns!=='R' && window.RithmicAudio) window.RithmicAudio.tapPreview(ns);
return next;
});
};
const stop = useCallback(()=>{ if(window.RithmicAudio) window.RithmicAudio.stop(); setPlaying(false); setCur(-1); },[]);
const start = ()=>{
if(!window.RithmicAudio) return;
stepsRef.current = evRef.current.map((e,i)=>({...e, _i:i}));
window.RithmicAudio.play(stepsRef.current, bpmRef.current, {
loop: loopRef.current,
onStep: (st)=> setCur(st._i),
onEnd: ()=>{ setPlaying(false); setCur(-1); },
});
setPlaying(true);
};
const toggle = ()=> playing? stop() : start();
useEffect(()=>()=>{ if(window.RithmicAudio) window.RithmicAudio.stop(); },[]);
// Stop playback when the demo scrolls (mostly) out of view — a looping beat
// the visitor can no longer see is just noise.
const rootRef = useRef(null);
useEffect(()=>{
if(!playing || !rootRef.current || typeof IntersectionObserver==='undefined') return;
const io = new IntersectionObserver(
(entries)=>{ if(entries[0].intersectionRatio < 0.1) stop(); },
{threshold:[0.1]}
);
io.observe(rootRef.current);
return ()=> io.disconnect();
},[playing,stop]);
return(
setActive(i)} aria-hidden={rel!==0}>
{s.file ?
);
})}
{t.liveDemo}
4/4 · Maqsum
{t.ppHint[0]}Düm{t.ppHint[1]}Tek{t.ppHint[2]}
{MeasureSVG ?
setBpm(+e.target.value)} aria-label="Tempo"/>
{bpm}bpm
{t.savedOnDevice}
Aksak · 9/8
Düyek study
{[["Maqsum","4/4"],["Aksak","9/8"],["Çiftetelli","8/8"],["Maqam Saidi","4/4"],["Düyek","8/8"],["Baladi","4/4"]].map(([n,s],i)=>(
{n}{s}
))}
);
}
function PlaybackVisual(){
return({[10,22,40,28,52,34,60,42,30,50,24,44,18,36,12].map((h,i)=>())}
96
{t.pdfOut}
{t.pdfIn}
);
}
/* ---------- page ---------- */
function App(){
usePageFx();
// Language is shared with the rest of the site via localStorage['ritmik_lang'].
const [lang,setLangState] = useState(()=>{
// The path states the language outright — /de/mobile.html is German — and
// that beats a stored preference, which otherwise repainted this page in
// whatever language the reader last chose elsewhere.
const L = (typeof window !== 'undefined' && window.RITMIK_LANGS) || [];
for (let i = 0; i < L.length; i++) {
const q = L[i].prefix;
if (q && (location.pathname === q || location.pathname.indexOf(q + '/') === 0) && I18N[L[i].code]) return L[i].code;
}
try{ const s = localStorage.getItem('ritmik_lang'); if(I18N[s]) return s; }catch(e){}
return 'en';
});
const setLang = useCallback((l)=>{
try{ localStorage.setItem('ritmik_lang', l); }catch(e){}
// Each language has its own url; switching navigates there so the page and
// its canonical agree.
const L = (typeof window !== 'undefined' && window.RITMIK_LANGS) || [];
let prefix = null;
for (let i = 0; i < L.length; i++) if (L[i].code === l) prefix = L[i].prefix;
if (prefix != null && /^https?:$/.test(location.protocol)) {
location.href = prefix + '/mobile.html';
return;
}
setLangState(l);
},[]);
useEffect(()=>{ document.documentElement.lang = lang; },[lang]);
const t = I18N[lang] || I18N.en; // an unknown code must not blank the page
return(
{/* Same main navigation as the home page; the download button scrolls to
this page's App Store section. Links are language-aware, root-absolute. */}
{t.navDownload}
{t.navOpen}
{t.heroTitle[0]}
{t.heroTitle[1]}
{t.heroSub}
{t.featTitle}
{t.tryTitle[0]}
{t.tryTitle[1]}
{t.trySub}
-
{t.tryLi.map((li,i)=>(
- {li} ))}
ritmik.net
