Start free trial

Interactive Warp Reel

Catalogue accessNeeds plugin

Studio split reel

A large studio statement holds the left while a screen-height photographic wheel fills the right. Needs the companion plugin, which comes with your access.

Scroll or drag over the reel to browse a snapping loop, or choose finite Page scroll in the block editor. Phones use a compact swipeable photo gallery with native page scrolling. Without motion the projects remain in a native gallery, and without the plugin they become a plain core-block stack. States no colour and no font of its own.

ThemePreview sizeMotion
As authoredColour
Twenty Twenty-Five·1280pxPlays best in its own window

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What you change first

  1. Fill projects from media library .
  2. Replace titles, short descriptions and example project links with your work. Keep the Caption group's foreground and background together.
  3. Edit the left-hand statement and enquiry link.
  4. Choose Interaction, Screen height and Ribbon width in Reel. Check the actual crop at phone and desktop widths.
  5. Tune resting curvature and warp on movement, or switch motion off.
  6. Check heading levels: the opening heading is h1 and project titles are h3. Change them to fit the surrounding page.

The signature moment

A large studio statement holds the left while a screen-height photographic wheel fills the right.

Editorial copy beside a tall right-hand wheel. On phones a native photo gallery follows the introduction.

Theme handoff

What comes from where

From your theme

Ground and ink follow the theme base and contrast chains. Paragraphs follow medium; the typeface and button treatment belong to the theme. The fullscreen field inverts the theme pair rather than stating a palette.

Set by this pattern

A desktop screen-height wheel, curated photographic crops and a lower opaque caption plate. Phones use compact native photos with captions below and a glimpse of the next picture. The project titles are display type, sized against the photograph. The studio statement is display type too; the fullscreen selected-work heading is deliberately small. Photographs are reviewed CC0 WordPress Photo Directory examples, not claims about client work. Their exact sources and photographer credits are recorded in assets/wordpress-images.json and published at /image-credits/. Bright colour, repeated forms and readable central crops are deliberate editorial choices.

Full pattern notes

Why it works, and how it is built

Open a topic for the complete design reasoning, editing guidance and implementation notes.

Design rationaleComposition, intent and nearest alternatives

The signature moment: A large studio statement holds the left while a screen-height photographic wheel fills the right.

Editorial copy beside a tall right-hand wheel. On phones a native photo gallery follows the introduction.

Why this is not the fullscreen portfolio

The statement and enquiry stay in a separate left column. The right column is a full-height photographic destination, not a small card. The columns stack on phones.

Make it yoursVariations and the edits to make first

What you change first

  1. Use Fill projects from media library. A Project holds an unlinked first Image followed by a Group named Caption. Keep captions out of the Image caption field. Cross-origin image hosts must permit anonymous CORS texture access.
  2. Replace titles, short descriptions and example project links with your work. Keep the Caption group's foreground and background together.
  3. Edit the left-hand statement and enquiry link.
  4. Choose Interaction, Screen height and Ribbon width in Reel. Check the actual crop at phone and desktop widths.
  5. Tune resting curvature and warp on movement, or switch motion off.
  6. Check heading levels: the opening heading is h1 and project titles are h3. Change them to fit the surrounding page.

The Reel panel’s Show instructions toggle hides the automatic browsing hint without deleting project text, links or navigation. It works in every pattern that uses this block.

Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

Ground and ink follow the theme base and contrast chains. Paragraphs follow medium; the typeface and button treatment belong to the theme. The fullscreen field inverts the theme pair rather than stating a palette.

What it decides for itself

A desktop screen-height wheel, curated photographic crops and a lower opaque caption plate. Phones use compact native photos with captions below and a glimpse of the next picture. The project titles are display type, sized against the photograph. The studio statement is display type too; the fullscreen selected-work heading is deliberately small. Photographs are reviewed CC0 WordPress Photo Directory examples, not claims about client work. Their exact sources and photographer credits are recorded in assets/wordpress-images.json and published at /image-credits/. Bright colour, repeated forms and readable central crops are deliberate editorial choices.

Technical notesBlock mechanics, responsive behaviour and constraints

What needs the plugin

The same block offers Wheel / Drag or Page scroll, chosen in the editor, not by a visitor-facing toggle. This composition starts in looping Wheel / Drag. Scroll or drag vertically over the right-hand reel to browse; it settles on a complete project after each gesture and wraps in both directions. Page scroll holds the inner viewport on desktop while normal document scrolling progresses through the projects, then releases it. Buttons and arrow keys reach every project and seek the matching scroll position when pinned. Phones use native horizontal swiping to browse and vertical swiping to scroll the page. There is no autoplay. Wheel capture is local to the live reel in Wheel / Drag; the editorial column, outside scrolling and zoom remain native.

Reduced motion, JS-off and unavailable graphics keep the native sideways gallery and its readable plates. With the plugin absent every Project is a plain core Group, with the caption below its image. The editor then shows WordPress's missing-block placeholder. The plate is opaque and theme-coloured, not unprotected text on a photograph.

The markup

14KB of core-block markup, 9 blocks (button, buttons, column, columns, group, heading, image, paragraph, patternpaste/warp-reel), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme.

Start free trial to copyWhat you copy is yours forever. Cancel whenever.

Back to the library

Continue exploring

Next in Interactive

Explore all 36 interactive patterns Also in Hero

Fullscreen portfolio reel rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroHeroNeeds plugin

Fullscreen portfolio reel

A photographic wheel fills the screen from top to bottom, with one project opening between curved neighbours.

7 blocksOpen preview
Cover chapters backdrop rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCoverCoverNeeds plugin

Cover chapters backdrop

A photo essay where the pictures fill the page: six chapters run down the right on white plates over one full-height frame behind them, and as each chapter reaches the reading line the photograph behind the words changes, wiping in along the direction of travel.

7 blocksOpen preview
Editorial chapters case rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveEditorialEditorialNeeds plugin

Editorial chapters case

A long-form case study in seven chapters: the prose runs down the left and one picture frame on the right stays with you as you read, taking each chapter's photograph as that chapter reaches the reading line.

9 blocksOpen preview