// Landing page — warm bone throughout, amber accent, SF system fonts. function useIsMobile(breakpoint) { var bp = breakpoint || 768; var [isMobile, setIsMobile] = React.useState(window.innerWidth < bp); React.useEffect(() => { var check = () => setIsMobile(window.innerWidth < bp); window.addEventListener('resize', check, { passive: true }); return () => window.removeEventListener('resize', check); }, [bp]); return isMobile; } function ScreenPlaceholder({ label, note, aspect = '9 / 16', kind = 'screenshot' }) { const paper2 = '#EAE4DA'; const rule = 'rgba(11,11,12,0.14)'; const ink = '#15141A'; const inkMute = 'rgba(21,20,26,0.56)'; const inkDim = 'rgba(21,20,26,0.4)'; const font = '-apple-system, "SF Pro Display", system-ui, sans-serif'; return (
Placeholder {kind === 'video' ? 'Screen recording' : 'Screenshot'}
{label}
{note && (
{note}
)}
); } function LandingLight({ accent = '#F59E0B' }) { const isMobile = useIsMobile(); React.useEffect(() => { 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 -8% 0px' }); document.querySelectorAll('.ts-reveal').forEach(el => io.observe(el)); const spy = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { const id = e.target.getAttribute('data-ts-section'); document.querySelectorAll('.ts-nav a[data-nav]').forEach(a => { a.classList.toggle('active', a.getAttribute('data-nav') === id); }); } }); }, { rootMargin: '-40% 0px -55% 0px' }); document.querySelectorAll('[data-ts-section]').forEach(el => spy.observe(el)); const float = document.querySelector('.ts-hero-float'); const onScroll = () => { if (!float) return; const y = Math.min(window.scrollY, 600); float.style.transform = `translateY(${y * -0.06}px)`; }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => { io.disconnect(); spy.disconnect(); window.removeEventListener('scroll', onScroll); }; }, []); const paper = '#F5F1EA'; const paper2 = '#EAE4DA'; const rule = 'rgba(11,11,12,0.12)'; const ink = '#15141A'; const inkMute = 'rgba(21,20,26,0.62)'; const inkDim = 'rgba(21,20,26,0.42)'; const bone = '#FAFAF7'; const font = '-apple-system, "SF Pro Display", "SF Pro Text", system-ui, sans-serif'; const px = isMobile ? '20px' : '56px'; const LightWordmark = ({ size = 22 }) => (
tempo step
); const Eyebrow = ({ label }) => (
{label}
); return (
{/* Nav */} {/* Hero */}
iOS 17+ · iPhone

Play.
Pause.
Progress.

A metronome that listens. TempoStep hears when you stop playing and steps the tempo up on its own.

Download on the App Store
$4.99, one time
intro $2.99, no subscription
{/* Hero video */}
{/* Phone frame container — aspect ratio matches the exported clay frame (619×1280). border-radius uses h/v form so corners are circular, not elliptical (container is ~2× taller than wide, so % maps differently on each axis). Outer phone corner ≈ 73px at 619px wide → 11.8% h / 5.7% v */}
{/* Video positioned to fill the screen opening */}
{/* Stat band */}
{[ ['Auto', 'tempo advance', 'The app hears you stop. The tempo advances on its own.'], ['Target', 'you set', 'Choose a goal BPM. The app steps toward it, pass by pass.'], ['$4.99', 'once, yours', 'No subscription, no account, no ads, ever.'], ].map(([big, mid, small], i) => (
0) ? `1px solid ${rule}` : 'none', borderTop: (isMobile && i > 0) ? `1px solid ${rule}` : 'none', paddingLeft: (!isMobile && i > 0) ? 24 : 0, paddingTop: (isMobile && i > 0) ? 24 : 0, }}>
{big}
{mid}

{small}

))}
{/* How It Works */}

Play. Pause. Detection. Step.{isMobile ? ' ' :
} All four happen without your hands leaving the instrument.

{[ { n: '01', title: 'Play', time: '0:00', sub: 'Set your starting BPM. The metronome clicks. The mic listens quietly in the background.', placeholder: 'Playing state', img: 'Play.PNG' }, { n: '02', title: 'Pause', time: '0:42', sub: 'Stop to breathe, reflect on the last pass, stretch. TempoStep notices the silence and waits for you.', placeholder: 'Pause / waiting', img: 'Pause.PNG' }, { n: '03', title: 'Step', time: '0:58', sub: 'When you are ready and begin to play again, the BPM has already advanced. No button, no need to glance at the screen.', placeholder: 'Step / BPM advancing', img: 'Step.PNG' }, { n: '04', title: 'Target', time: '2:31', sub: 'Hit the target BPM you set and the number glows amber.', placeholder: 'Target reached', img: 'Target.PNG' }, ].map((s, i) => (
STATE {s.n}
{s.time}
{s.img ? ( {s.placeholder} ) : ( )}

{s.title}

{s.sub}

))}
{!isMobile && LOOP REPEATS AT EACH PAUSE, UNTIL TARGET IS REACHED} {isMobile && LOOP REPEATS AT EACH PAUSE}
{/* The Pause feature callout */}

Take the time you need.

Because TempoStep can tell when you begin to play, the space between passes is yours. Stretch. Think. Reflect on what just happened. A physical break. A mental one. The app will be waiting, with the next tempo already set, the moment you start playing again.

{/* Why It's Different */}

Every metronome clicks.{isMobile ? ' ' :
} Only one of them listens.

Other apps that ramp tempo on their own use a bar count, a timer, or a smooth climb. They follow the clock. TempoStep follows you.

{/* Features grid */}

A small set of features, each one pulling its weight.

{[ ['Auto advance', 'The mic hears when you stop and when you begin again. The BPM steps up on its own.'], ['Target BPM', 'Set the tempo you are working toward. The app steps toward it and lets you know when you arrive.'], ['Microphone calibration', 'A quick baseline sets a threshold for your room. Works in practice rooms, at home, on the road.'], ['Runs in the background','Auto advance keeps working while you use forScore, IMSLP, a tuner, or anything else on your phone.'], ['Tap tempo', 'A few taps and the BPM matches. Match a recording, a teacher, or your own reference point.'], ['Subdivisions', 'Off, 8th, triplet, 16th. Available in the settings menu.'], ['Hold tempo', 'A lock pauses the advance. Groove on the current BPM for as long as you want.'], ['Manual mode', 'Need a plain metronome? Switch off detection. No mic, no calibration, instant start.'], ['One time purchase', '$4.99 once, yours forever. No subscription, no ads, ever.'], ].map(([k, v], i) => { const col = isMobile ? 0 : i % 3; const isLastInGrid = isMobile ? i === 8 : i >= 6; return (
0) ? 24 : 0, }}>
{String(i + 1).padStart(2, '0')}

{k}

{v}

); })}
{/* Founder note */}
" I've spent decades in practice rooms working through passages at gradually climbing tempi. I'd stop every few repetitions to increase the tempo by 5 or 10 BPM, reaching for the metronome, resetting, starting again. It's a small interruption, but it breaks momentum more than it should. TempoStep removes that moment entirely, letting the tempo move forward on its own. "
AM
Alan Molina
Orchestral violinist. Maker of TempoStep.
{/* FAQ */}

The short answers.

{[ ['Does it work in the background?', 'Yes. The metronome keeps clicking and auto advance keeps working when you switch to forScore, IMSLP, a tuner, or any other app.'], ['Will it confuse my playing with other sounds?', 'On launch, TempoStep calibrates against the ambient level in your room and sets a threshold above that peak. Page turns, HVAC, and traffic sit below the line. Your instrument sits above it.'], ['What if I want to hold the tempo longer?', 'Tap the lock. Detection still runs, but the BPM does not advance. Unlock and it resumes from where you were.'], ['Is there a subscription?', 'No. $4.99 once, yours forever. No ads ever.'], ['Android?', 'Not planned for launch. If iOS demand supports it, we will revisit.'], ].map(([q, a], i) => (
{isMobile ? (
Q.{String(i + 1).padStart(2, '0')}
{q}
{a}
) : (
Q.{String(i + 1).padStart(2, '0')}
{q}
{a}
)}
))}
{/* Footer */}
); } function LightCompareCol({ title, kicker, kickerColor, rows, muted, isMobile, paper, ink, inkMute, inkDim, rule }) { return (
{kicker}

{title}

{rows.map(([k, v], i) => (
{k}
{v}
))}
); } function AppleGlyph({ size = 16, color = '#000' }) { return ( ); } Object.assign(window, { LandingLight, ScreenPlaceholder });