Slider

Autoplay Hero with Progress

by Vanguardia · motionprompts.dev

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 sea

Type: Web motion
Framework: Vanilla JS
Trigger: click
Duration: 0.7–5.2s

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: raf
Complexity: 1/5
Pinned: no
Reduced motion: handled

time-driven hero: a single requestAnimationFrame loop advances a four-slide opacity crossfade every 5.2s and writes the active progress tick width from the same clock; paused by IntersectionObserver when off-screen and by visibilitychange when the tab is hidden, resuming by rebasing the epoch so it never jumps; manual advance restarts the clock. No GSAP, no ScrollTrigger, no Lenis

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev9,963 charsCustomize

# 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…

The build prompt

More like this

A pixel wizard casting spells

Rainbow Road Pixel Animation

One-File Generative Visual Demo

Pixel-art rabbit archer sprite animation loop

Vibe-Coded Pixel Wizard Game

Realistic 3D Taj Mahal Model

Fresh recipes, every week.