Fullscreen portfolio reel, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-warp-reel-portfolio.html Interactive (https://patternpaste.com/interactive/) Warp Reel (https://patternpaste.com/interactive/warp-reel/) Catalogue access Needs plugin (https://patternpaste.com/docs/install-pattern-paste/) # Fullscreen portfolio reel A photographic wheel fills the screen from top to bottom, with one project opening between curved neighbours. 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. Start here ## What you change first - Fill projects from media library . - Replace titles, short descriptions and example project links with your work. Keep the Caption group's foreground and background together. - Edit the small selected-work heading. - Choose Interaction, Screen height and Ribbon width in Reel. Check the actual crop at phone and desktop widths. - Tune resting curvature and warp on movement, or switch motion off. - Check heading levels: the opening heading is h1 and project titles are h3. Change them to fit the surrounding page. The signature moment ## A photographic wheel fills the screen from top to bottom, with one project opening between curved neighbours. A full-screen vertical wheel on the theme contrast ground, with a compact caption near the bottom. Phones use a compact swipeable photo gallery with project details below. 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 photographic wheel fills the screen from top to bottom, with one project opening between curved neighbours. A full-screen vertical wheel on the theme contrast ground, with a compact caption near the bottom. Phones use a compact swipeable photo gallery with project details below. ### Why this is not the split studio The wheel is the whole opening screen. A small selected-work heading leaves the photographs in charge; there is no editorial column or padded masthead above the frame. Make it yoursVariations and the edits to make first ### What you change first - 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. - Replace titles, short descriptions and example project links with your work. Keep the Caption group's foreground and background together. - Edit the small selected-work heading. - Choose Interaction, Screen height and Ribbon width in Reel. Check the actual crop at phone and desktop widths. - Tune resting curvature and warp on movement, or switch motion off. - 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 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; 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. 14KB of core-block markup, 7 blocks (button, buttons, 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 copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Use it for - Creative studio homepages - Photography portfolios - Art direction and design portfolios #### Pair with Features Feature alternating Four feature rows, each a 4:3 frame set against its copy, with the seam flipping side to side down the page. The hairline that closes each row runs only under the text half, so the rule changes sides with the picture and the section never squares up on one edge. Example images are included and can be replaced in the editor. States no colour and no font of its own. (https://patternpaste.com/pattern/feature-alternating.html)Stats Stat callout A high-impact framed spotlight plaque: a central marquee figure and bold executive statement sit above a ruled three-part corroboration shelf enclosed within the same 1px currentColor architectural frame. States no colour and no font of its own. (https://patternpaste.com/pattern/stat-callout.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.html) #### Before you paste Install the Pattern Paste plugin first, then paste. This section embeds one of its blocks: the plugin comes with your access, downloads from your account, and takes a minute. Paste without it and the section arrives as a plain stack of your headings, text and images, with none of the motion. How to install it (https://patternpaste.com/docs/install-pattern-paste/). Requires a block theme on WordPress 6.7 to 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). #### What's inside Blocks button, buttons, group, heading, image, paragraph, patternpaste/warp-reel Core only NO Chains 42, deepest 2 rungs currentColor no color base, black, contrast, white spacing 20, 40 font-size medium Continue exploring ## Next in Interactive Explore all 36 interactive patterns (https://patternpaste.com/interactive/)Also in Hero (https://patternpaste.com/patterns/hero/) Shot in Twenty Twenty-Five Gallery Gallery Needs plugin ### Destination reel A full-screen-height landscape reel fills the left beside an editorial heading and numbered travel index. 9 blocks Open preview (https://patternpaste.com/pattern/gallery-warp-reel-destinations.html) Shot in Twenty Twenty-Five Hero Hero Needs plugin ### Studio split reel A large studio statement holds the left while a screen-height photographic wheel fills the right. 9 blocks Open preview (https://patternpaste.com/pattern/hero-warp-reel-studio.html) Shot in Twenty Twenty-Five Cover Cover Needs 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 blocks Open preview (https://patternpaste.com/pattern/cover-chapters-backdrop.html)