Progress

ProgressEngine reports a 0..1 progress value on every frame, from one of two sources: a media element (video or audio — it drives playback and tracks currentTime) or an arbitrary duration in milliseconds (it owns the clock off the shared frame loop). Either way you get the same controls — play, pause, reset — and the same events. play() continues from the current position, and starts over from the beginning once complete, exactly like a native media element after ended.

High-frequency by design

Progress changes ~60 times a second, so neither adapter routes it through coarse component state. In React the hook exposes a ref plus an onProgress callback you write straight to the DOM from — zero re-renders per frame. In Vue it returns a reactive Ref<number> you can bind in the template: fine-grained reactivity updates just those bindings. Only the coarse status (isRunning, isComplete) is component state, and it updates on play/pause/complete transitions only — exactly what a play/pause button needs.

useProgress(source, options?)

One hook returns everything: the per-frame progress, the coarse status, the controls, and the engine as an escape hatch.

import { useRef } from 'react';
import { useProgress } from '@60fps/ui-react/progress-engine';

function Player() {
	const videoRef = useRef<HTMLVideoElement>(null);
	const barRef = useRef<HTMLDivElement>(null);

	// `source` is either a media ref or a duration in milliseconds.
	const { isRunning, play, pause } = useProgress(videoRef, {
		onProgress: (value) => {
			// 60fps, no re-render: write it straight to the DOM.
			barRef.current!.style.transform = `scaleX(${value})`;
		},
		onComplete: () => console.log('done')
	});

	return (
		<>
			<video ref={videoRef} src="/clip.mp4" muted playsInline />
			<div ref={barRef} style={{ transformOrigin: 'left' }} />
			<button onClick={isRunning ? pause : play}>{isRunning ? 'Pause' : 'Play'}</button>
		</>
	);
}

<script setup lang="ts">
import { ref } from 'vue';
import { useProgress } from '@60fps/ui-vue/progress-engine';

const video = ref<HTMLVideoElement | null>(null);

// `source` is either a media ref or a duration in milliseconds. `progress` is a reactive
// Ref<number> — bind it in the template, fine-grained reactivity handles the per-frame updates.
const { progress, isRunning, play, pause } = useProgress(video, {
	onComplete: () => console.log('done')
});
</script>

<template>
	<video ref="video" src="/clip.mp4" muted playsinline />
	<div class="bar" :style="{ transform: `scaleX(${progress})`, transformOrigin: 'left' }" />
	<button @click="isRunning ? pause() : play()">{{ isRunning ? 'Pause' : 'Play' }}</button>
</template>

Return value

Vanilla engine

The hook is a thin wrapper; you can drive ProgressEngine directly from any framework or none:

import { ProgressEngine } from '@60fps/ui-progress';

const engine = new ProgressEngine({ durationMs: 3000 });
engine.on('progress', (value) => (bar.style.transform = `scaleX(${value})`));
engine.on('complete', () => console.log('done'));
engine.play();