ENGLISH·COURSE API
    Preparing search index...

    Function

    GuidePlaybackRail

    • The row of controls a guide is moved by: back, one per frame, and on.

      Parameters

      • props: GuidePlaybackRailProps

        See GuidePlaybackRailProps

      Returns Element

      The guide's control row

      Every guide answers a horizontal drag, and nothing announces it. On a phone that was a fair trade — the gesture is an extra on top of something that plays itself. It stopped being one on a Mac, where a horizontal drag on a card is not a gesture anyone performs with a mouse: without these controls a learner who missed a step can only wait out the whole loop. The gesture still works and is still unannounced; it is now a shortcut for something visible rather than the only way in.

      The frame controls replace the decorative dots the guides used to draw, so the guide gains controls where it already had marks rather than a new row. They are what lets a learner go straight to the frame they missed instead of stepping back from wherever the loop has reached.

      The frame on screen carries a countdown running exactly one interval, restarted by keying it on the frame. There is no second clock: the animation is declarative, so it cannot drift from the timer that actually advances the guide. It is drawn only while the guide is playing — under a reduced-motion preference the timer does not run, and a frozen bar reads as a countdown that has stalled.

      Frames past stepCount are results. Their controls say so rather than claiming a step number the flow does not have.

      const { frameIndex, isPlaying, showNext, showPrevious, showFrame } = useGuidePlayback(5);

      <GuidePlaybackRail
        frameCount={5}
        stepCount={4}
        frameIndex={frameIndex}
        isPlaying={isPlaying}
        onShowPrevious={showPrevious}
        onShowNext={showNext}
        onShowFrame={showFrame}
      />

      useGuidePlayback

    Settings

    Member Visibility