shadcn.io is not affiliated with official shadcn/ui
Fitness Workouts Carousel Block for Vue
A home-workout player with six exercises on drawn stick figures, a segmented bar whose widths follow each exercise's own duration, a Start workout button that runs through them with Pause and Skip, and a derived total of about four minutes.
Installation
Overview
Turn a list of exercises into a player that keeps its own time, with this fitness workouts carousel for Vue with Ark UI. Cadencefit, a home-workout app, shows one of six exercises at a time: a drawn stick figure in a pose, the name, "3 sets of 12", the muscles worked and the time. Under the stage a segmented bar is as wide as each exercise is long (30 to 45 seconds), and numbered segments jump to an exercise. "Start workout", the block's one Shine Button, runs through the exercises by itself, each for its own time, the current segment being the timer; Pause and Skip are real Buttons, hovering or focusing the stage holds the timer, and it stops on "Workout done in this demo, nothing was recorded" instead of looping. Under reduced motion nothing runs by itself and the primary reads "Step through". The total ("About 4 minutes") is derived from the durations. The ruled bands come from Guides. It is built from Carousel, Shine Button, Button and Guides, with CSS transitions only. The figures are drawn and the product is made up.
FAQ
How do I use my own exercises?
Edit EXERCISES. Each has an id, a name, sets, muscles, a seconds duration and a pose path for the drawing (limbs in a 100 by 60 box). The bar's widths, each timer's length and the total are derived from seconds.
How does each exercise keep its own time?
Each segment's timer bar has a CSS animation as long as that exercise, set from its duration through one CSS variable. When it ends the player moves to the next exercise, and after the last one it stops. Pause sets the animation to paused so it resumes where it stopped. Ark's Carousel is controlled by the block's page.
What happens with reduced motion?
Nothing runs by itself. The primary reads "Step through", then "Next exercise", and each press moves on; the Pause button is hidden and Skip still works.
How does it work with a keyboard?
Tab reaches the exercise segments, then Start, Pause and Skip. With focus inside the stage the arrow keys move an exercise (mirrored in a right-to-left page). Exercises out of view are hidden from the tab order and from screen readers.