Blogpost 24 block design & features
Blogpost24 is a centered article with an audio player, built with Shadcn UI Avatar, Button, and Slider components. The header stacks the category and date, headline, summary, and a small author byline. A player bar sits between the header and the prose with a round play button, a label, the elapsed and total time, a scrub slider, buttons to skip back or forward fifteen seconds, and a speed button that cycles through one, one and a quarter, one and a half, and two times.
The player is a rounded, bordered bar with a soft shadow and a slightly translucent background. It sticks to the top of the viewport while the article scrolls, so playback controls stay in reach. Play and pause swap icons, the time uses tabular numbers so it does not jitter, and the slider fills as playback moves.
A listen option is a growing pattern on publishing sites, and here it reads as part of the article rather than a separate widget. Complexity is moderate. Playback is simulated with a timer for demonstration, so real use needs a narrated audio file and an audio element wired to the same controls.
On phones the skip buttons hide and the play button, slider, and speed control share one row.