Skip to main content

Media & Interactive Sections

Media and interactive sections turn imagery, video, and product details into scroll-driven or clickable experiences. Ronin includes 8 media and interactive sections, ranging from spotlight video reveals and shoppable hotspot images to 3D lookbooks, horizontal scroll stories, and a social mosaic. Each one shares the universal section settings for width, background, and padding.

Video​

A pinned spotlight reveal. The heading shows first, then a growing circle wipes the background away to uncover a full-bleed cover image with a play button that opens the film in a full-screen lightbox.

section-video.webp

Features:

  • Eyebrow and heading
  • Video source: hosted video or video URL
  • Cover image and video alt text
  • Loop video
  • On mobile and tablet the reveal is replaced by a static titled poster

Hotspot​

A shoppable editorial image. A spotlight wipe uncovers a full-bleed photo on scroll, and pulsing pins over the photo open a product card when clicked.

section-hotspot.webp

Features:

  • Image with alt text and aspect ratio (Auto, 9:16, 3:4, 1:1, 4:3, 16:9, or Custom)
  • Separate mobile image and mobile aspect ratio; falls back to the main image
  • Overline, heading, heading size, and alignment, shown centered over the image while it reveals (desktop only)
  • Up to 8 pins, each linked to a product
  • Pin thumbnail override (falls back to the product's featured image; a background-removed cutout reads best)
  • Card position above or below the pin
  • Horizontal and vertical position in percent, with an option for a different position on mobile
  • On mobile the scroll reveal is dropped and the pins sit on a plain full-width image
  • Blocks: Pin

A scattered lifestyle gallery. Photos fall down the page in an alternating left, right, and center pattern while decorative filament curves thread through them and reveal each photo as they arrive.

section-lookbook-gallery.webp

Features:

  • Overline and heading
  • Filament lines: 1 to 3 decorative curves, colored with the theme primary color
  • Up to 9 photos, each with an image, alt text, and caption
  • All photos and a static curve show when the visitor prefers reduced motion
  • Blocks: Photo

Lookbook depth​

A pinned 3D fly-through lookbook. Photos sit at fixed positions in depth and rush past the viewer as you scroll, then a closing line and button rise at the end.

section-lookbook-depth.webp

Features:

  • Overline, heading, heading size, and alignment, with italic accent and highlight style
  • Up to 10 photos, each with an image and alt text
  • Closing line with a button (label, style, size, URL, and new-tab option)
  • Motion runs on all devices
  • Blocks: Photo
tip

Lookbook depth is tuned for 8 to 10 photos. With fewer photos, the stage empties sooner.

Photo stack (scroll)​

A stack of tilted photo cards in a sticky stage. As you scroll, each card is thrown off to the upper left or right, revealing the next card and swapping its heading and caption.

section-photo-stack-scroll.webp

Features:

  • Overline, heading, intro, heading size, and alignment, with italic accent and highlight style
  • Button with label, style, size, URL, and new-tab option
  • Up to 6 panels, each with an image (a portrait crop works best), alt text, heading, and caption
  • Optional link per panel; leave it blank to hide that panel's button
  • Pagination shows which panel is active
  • Blocks: Panel

Scroll story​

Horizontal-scroll storytelling. The section pins in place and each full-screen panel wipes in from the right as you scroll down.

section-scroll-story.webp

Features:

  • Each panel has a full-bleed image with a content card on top
  • Separate mobile image per panel; falls back to the main image
  • Image alt text
  • Heading and rich text per panel
  • Blocks: Panel

Spec reveal sticky​

Product anatomy told on scroll. Oversized spec values reveal one by one on the left while a flagship product photo stays pinned on the right.

section-spec-reveal-sticky.webp

Features:

  • Overline, heading, intro, heading size, and alignment, with italic accent and highlight style
  • Sticky image (portrait recommended) with ratio and alt text
  • Up to 8 specs, each with a value and label
  • Highlight value shows a spec in the accent color
  • On mobile the photo stacks on top and the specs show without motion
  • Blocks: Spec

Social grid​

A user-generated content mosaic. The heading and a hashtag sit in the center, surrounded by tall, small, and wide photo tiles.

section-social-grid.webp

Features:

  • Overline, heading, heading size, and alignment, with italic accent and highlight style
  • Hashtag shown under the heading
  • Up to 6 tiles; tile shape follows block order: 1 and 2 are tall (around 4:5), 3 and 4 are small (around 4:3), 5 and 6 are wide (around 16:9)
  • Tiles fade in and zoom slightly on hover
  • Blocks: Tile
Choosing the right media section
  • Video: Video for one hero film behind a dramatic reveal.
  • Shoppable images: Hotspot links pins on a photo to products.
  • Lookbooks: Lookbook gallery for a relaxed scroll through captioned photos, Lookbook depth for an immersive fly-through, Photo stack (scroll) for card-by-card storytelling.
  • Chapters: Scroll story for full-screen panels that slide in sideways.
  • Product details: Spec reveal sticky to walk through the numbers behind one product.
  • Community: Social grid to show customer photos with your hashtag.