How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Stage: a 1440px frame with 48px side padding; the stage keeps aspect-ratio: 1344 / 548 and clips its slides. Section padding-bottom 203px.
- Slide layers (positions are percentages of the stage): - Photo: left 0, full height, 51.19% wide, cropped to cover. - Close-up: left 41.67%, top 9.85%, 18.97% wide, 56.02% tall (so it overlaps the photo's right edge). - Copy: left 68.23%, top 12.77%, 31.77% wide. Title (Marcellus 24px uppercase), description 25px below (Hanken Grotesk Light 16px), and the button 72px below that.
- Changing slide: the track moves one full width per step: translate3d(index × -100%, 0, 0) over 900ms cubic-bezier(0.65, 0, 0.35, 1). Every slide also gets --rel = slideIndex - activeIndex, and each layer moves by that on the same 900ms curve: photo translateX(rel × 7%), close-up rel × -17%, copy rel × -4%. The photo lags, the close-up rushes ahead and the copy barely moves, so the layers pull apart while travelling and lock together on arrival.
- Arrows: bottom right of the stage, two 56 × 32 long arrows 20px apart (the left one mirrored), fading to 60% on hover. They loop past the ends.
- Close-up drift: --cp goes 0 to 1 as the section's top travels from 95% of the viewport to 35% ((0.95 × vh - top) / (0.6 × vh)); the close-up's inner image sits at translateY((1 - cp) × 64px). The drift lives on an inner element so it never fights the horizontal slide.
- View details button: a 38px outlined square with a 45° arrow and an uppercase label. A fill sweeps across it from the left on hover (500ms) and the label and arrow flip to the ground color.
- Accessibility: the section is aria-roledescription="carousel", inactive slides are aria-hidden and their button is taken out of the tab order.
- Under 1200px: the layers stack (photo at aspect-ratio: 688 / 548, close-up hidden, copy below with a 32px gap), and slides get a 48px gap so neighbours never touch. Arrows sit under the slide on the right. Phones: 20px gaps.
- Fallbacks: reduced motion: slides change instantly and nothing drifts. Without JavaScript the first slide shows in its final state.