A list with one sharp line

Build one interactive web page: Sampleton Bakery, from flour to counter. Five steps in a list, and only the one you are on is sharp: the others are dimmed and blurred by 3 px, moving in 0.2 s. A rule under the active step fills over five seconds and moves the list on by itself; point at a step, focus it or use the arrow keys and it is yours. Beside it a panel draws the step in blocks: a bowl being stirred, dough doubling, a loaf slashed, an oven glowing, steam off a rack. Read them all lifts the blur.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: A process or a method told in a handful of steps, a timeline, a product tour; anywhere one thing at a time is the point. Do not let it fail the way this kind of piece usually does: Text the visitor cannot read because it is blurred. Here every step is real text, hover, focus and the arrow keys all sharpen it, Read them all lifts the blur completely, nothing blurs under reduced motion, and the list never moves on while you are holding a step.

It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.