One frame, five images, one reel
Layout is now fixed: copy and CTA left, image panel right, identical geometry on every slot. Nothing about the composition changes as the reel turns — only the word and the image inside the frame. That's what makes fast intervals read as one continuous motion instead of five separate heroes.
Image motion — the setting worth deciding.
“Slide with reel” moves the image panel on the same timing curve as the word, so the picture and the word travel together like two wheels on one machine. “Crossfade” dissolves the image while the word travels. Slide is the more literal slot machine; crossfade is calmer at short intervals. Both are in the schema — toggle the select and compare at a 1.5s interval.
Block settings — “Rotating word” (limit 5)
wordText. Renders in Herbik Italic, matching the existing <em> treatment.
imageThe panel image for this slot. One image picker — no layout choices, so slots can't drift out of alignment.
image_focalObject-position, for nudging a subject inside the fixed frame.
cta_urlOptional. Lets the button retarget per slot, or stay fixed for all five.
Section settings — Motion
rotation_interval1.2s – 8s. Dwell time per word.
rotation_speed180 – 1400ms reel travel. Drives both the word and, in slide mode, the image.
rotation_easingSlot bounce / Smooth glide / Snap / Mechanical.
image_motionSlide with reel · Crossfade.
image_fade_durationCrossfade mode only. 0 = hard cut on the landing.
enable_motion_blurBlur on the word reel while travelling.
enable_underlineGradient underline drawing in under each landed word.
enable_image_driftSlow 5% zoom on the visible frame.
pause_on_hoverHalts rotation while the cursor is over the hero.
start_delayHolds slot 1 before rotation begins, keeping the LCP text stable.
Section settings — Layout
panel_inset0 – 80px. 0 makes the image bleed to the section edge.
panel_radius0 – 60px corner radius on the image panel.
panel_widthSplit point, default 48% of the section.
section_heightFixed height, default 740px — matches the current hero.
Asset requirement
- All five images should be delivered at the same dimensions and ratio, framed for the panel (roughly square at the default 48% × 740px). The placeholders here are your existing wide heroes centre-cropped by the CDN, which is why some subjects sit oddly — final art shot to one ratio will look considerably better.
- The section renders every image at a fixed frame size with
object-fit: cover, so a mismatched upload still can't shift the layout — it just crops.
- Images are requested at one CDN size for all slots, which keeps them in the same cache bucket and makes the swap instant after first paint.
Build notes
- Slot 1 loads
fetchpriority="high"; slots 2–5 lazy-load and are warmed after first paint, so LCP stays put no matter how many slots are added.
- Rotation pauses on hover, off-screen (IntersectionObserver), and on hidden tabs. In the theme editor, selecting a slot block freezes the reel on it.
prefers-reduced-motion drops travel, blur and drift and crossfades in place. The headline is real text with all five words in the DOM, so it stays readable to crawlers and screen readers.- Zero rotating-word blocks = the section renders exactly as it does today. Existing homepage instances are unaffected.
- Mobile is out of scope for this mockup — I'll spec it separately once the desktop motion is signed off.