Autoplay Hero with Progress
What it does
A full-bleed hero carousel driven by a CLOCK rather than by the scroll, with one progress tick per slide filling over exactly that slide's duration. Deliberately built with no GSAP, no ScrollTrigger and no Lenis: wiring a time-driven hero to a scroll library would be pretending. A single rAF loop drives both the advance and the bar fill — a CSS transition on the bar plus a `setInterval` for the slide drift apart the first time the tab is backgrounded or the user pauses, and then the bar lies about when the next slide lands. The loop stops when the hero leaves the viewport (IntersectionObserver) and when the tab is hidden (`visibilitychange`), resuming without a jump because the epoch is rebased rather than the elapsed time preserved. Manual advance restarts the clock. Crossfade is opacity-only: with full-bleed photography a translate reads as a jolt because the eye tracks the image edge. Reduced motion stops the autoplay but keeps the controls working. Dressed as a repertory cinema season: Unbounded + Rethink Sans, near-black, cream and red.
How it's built
| Category | slider |
|---|---|
| Tech | vanilla JS |
| Complexity | section |
| Performance cost | light |
| Mobile-safe | yes |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Autoplay Hero with Progress — a hero on a clock, and the clock made visible
## Goal
Build a full-bleed hero carousel that advances **on a timer**, with one progress tick per slide
filling over exactly that slide's duration, and controls that actually work.
Use it when the front page has to show three or four things and none outranks the others: a
season's programme, a line-up, a schedule.
## Tech
**No GSAP, no ScrollTrigger, no Lenis — deliberately.** This hero is driven by a clock, not by the
scroll, and wiring a time-driven component to a scroll library is pretending. Plain ES modules and
one `requestAnimationFrame` loop.
> How the effect was identified in the first place: on the reference site the progress bar read
> **40% scrolling down and 86% scrolling back up at the same scroll position**. That is only
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.