Skip to content
Get lifetime access
Library

Scroll scene: fan

A stack of pictures that fans out into a row as you scroll, each one settling level with its name beneath it, while the section holds on screen. On a phone the row overlaps like a hand of cards. Needs the EtchPress Runtime; without it it is a row of cards.

ComponentInteractiveShowpiecesNeeds the runtime: plugin or Etch Studio

Live preview

Variant
Scheme
Width
Motion

The crew

Five people, one garden at a time.

  • A woman in navy scrubs, portrait on a dark background

    Mara, design

  • A man in a navy suit and white shirt, portrait on a dark background

    Jonas, stone

  • A woman in navy work coveralls, portrait on a dark background

    Ines, planting

  • A young man in a navy suit and white shirt, portrait on a dark background

    Theo, irrigation

  • A friendly teal robot avatar with the EtchPress mark on its chest

    Ada, the yard

etchpress.com/library/scene-fan
Scroll scene: fan

Before you copy

This is a showpiece. It pastes into Etch like any other item and it is complete without anything else, but its motion comes from the EtchPress runtime: a small script that loads only on the pages that use a showpiece.

Etch for WordPress: download the EtchPress Runtime plugin from Downloads in your account, install it and activate it. Paste your licence key under Settings, EtchPress Runtime, and it updates from the Plugins screen like any other plugin.

Etch Studio: download the EtchPress runtime files from Downloads in your account, unzip them and drop them into your project's Asset Manager, then paste the item. Studio ships the files it needs with your site.

What you can build with it

Introducing a team. A handful of featured projects. Product ranges. The stages of something, shown as pictures.

Props

eyebrow (text, optional); title (text, optional); cards (repeater: image, alt, title)

States shown

Scrolling: the section holds, the stack spreads from the middle and straightens, and the names fade in at the end. Scrolling back gathers it again. The same on touch. Reduced motion and no runtime: a row of cards with their names.

How to change it

Content and options are 3 props in the component's settings panel. Colour, type, spacing and radius follow your Automatic.css settings, so a change to the site's palette or scale changes this too. For anything else, edit the classes in the Style Manager, starting with .scene-fan. Its behaviour is a small script that travels with the component; no plugin and nothing to install.

ACSS tokens used

space-xs, space-s, space-m, space-l, radius, text-s, primary-dark, header-height.

ACSS requirements

ACSS 4 defaults. Needs the EtchPress Runtime, 0.6.0 or later: the EtchPress Runtime plugin on WordPress, or the runtime's files dropped into the project's Asset Manager in Etch Studio. Without it you get the still version.

Version history

Version 1.0.0, October 3, 2026: First release, with the EtchPress Runtime 0.6.0.

Tested with

Etch 1.6.8 and ACSS 4.0.1. Version 1.0.0.

Needs the EtchPress runtime

The plugin on WordPress, or the runtime's files in Etch Studio. Without it you get the still version.

Lifetime members

Members copy this straight into Etch, ready to paste.

Used an earlier version? How to update it

Get lifetime access
Back to the library
Other builders

Want EtchPress for Bricks or the block editor?

Everything here is made for Etch. Pick the builder you use and leave your email: we write once, when EtchPress works there.

This field is required.