Five fullscreen photo panels, laid out side-by-side instead of stacked, all driven by one Bootstrap Carousel doing double duty as a horizontal slide deck. The pill nav above jumps straight to a panel, the round arrows below step one at a time, and swiping or the arrow keys do the same on any device.
The photo is the bottom layer — a per-panel background-image on classes like .reel-panel-one and .reel-panel-two, so the class name doubles as the content map. Over it sits .reel-panel::before, a flat dark scrim that keeps this white type legible no matter how bright the photo underneath happens to be.
The text itself is the top layer, .reel-inner, centered by .reel-panel-frame's flexbox. It starts at opacity: 0 and only fades in once Bootstrap marks this slide .carousel-item.active — the same cue the original reel used, just read off Bootstrap's own active-slide class instead of a custom callback.
Every pill above carries data-bs-target and data-bs-slide-to — Bootstrap's own data API, no click handler required. The round arrows are the carousel's stock prev/next controls, just re-skinned; data-bs-wrap="false" stops the reel looping past either end, so this page's script disables whichever arrow is at a boundary instead of pretending there's more to see.
The keyboard handler listens for Home, End, and the arrow keys on the whole document, but checks document.activeElement first — typing in the Say Hello form's Name, Email, or Message field is never mistaken for a slide command. The original reel had exactly that bug: Space in the message box also advanced the panel.
A horizontal reel earns its keep when every screen is a deliberate stop, not a corridor to skim past — five photos, five ideas, a portfolio walkthrough or a slideshow. Each panel gets full attention because, on purpose, there is nothing else on screen to scroll past it.
It's the wrong tool for anything meant to be skimmed, linked to mid-page, or crawled section by section. A reel has no scrollbar and nothing for a search engine to index past the first panel — trade discoverability for focus on purpose, not by accident.