Animator Frame Scrubber Profile Block for React

Edit SHOTS for the shots (a name and the first and last frame, counting from 1), FRAMES and FPS for the length and speed, and CREDITS for the credits. The stage here is drawn from the frame number by three small functions, bounceAt, walkAt and titleAt: in your app replace Stage with the video's own frame (a poster image or a paused player) and keep the slider, the timecode and the shot buttons. The timecode, the length of each shot and the status line are worked out from the data.

Frame 1 is 00:00:00. The frame's index (the frame number less one) gives whole seconds by dividing by 24, minutes from those, and the frames left over: so frame 61 reads 00:02:12, which is two seconds and twelve frames. It reads minutes, seconds and frames, always two digits each, and it keeps its order in a right-to-left layout.

Drag it, or use the arrow keys for one frame at a time and Home and End for the first and last frame. A screen reader hears the frame, the timecode and the shot ("Frame 53, 00:02:04, Walk cycle"). The slider keeps left-to-right order in a right-to-left layout because it is a time axis. Here the slider is named by its label through aria-labelledby.

Each one moves the slider to the first frame of its shot and says so in the status line ("Jumped to Walk cycle, frame 41."). The button for the shot that holds the current frame is marked with aria-current and a solid tint, and it follows the slider as you scrub. Nothing plays and nothing loops.

The stage is a picture and is hidden from assistive technology; what it shows is said by the timecode, the frame and the shot name beside it, and by the slider's value text. The shots are real buttons with their frames written out. The status line is a polite live region present from the start and it speaks only when you jump, not on every frame. Nothing animates by itself, so reduced motion needs no special case: the stage changes only when you move the slider.

The stage fills the width, the timecode and frame sit above the slider, and the three shots stack as full-width buttons. The credits are one line each. Nothing moves except what the frame number draws.