Sign in Start free trial

Interactive Warp Reel Needs plugin

The Warp Reel block

A screen-filling photographic wheel that snaps to a complete project after every scroll or drag and loops in both directions. Choose a finite page-scroll sequence instead in the editor. Narrow screens use a compact swipeable photo gallery with optional instructions; without motion, every project remains in a native gallery.

Subscribe The 3 designs

Destination reel·Twenty Twenty-FivePlays best in its own window

Open in its own window Rendered by WordPress in Twenty Twenty-Five.Open this pattern

3 patterns3 designs9 settingspatternpaste/warp-reelRequires 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.

The designs

3 patterns, 3 designs between them. Each is this one block wrapped in core blocks, so everything around it takes its colours, spacing and type from your theme.

All 36 interactive patterns

Destination reel rendered in Twenty Twenty-Five

Shot in Twenty Twenty-FiveGalleryGalleryNeeds plugin

Destination reel

A full-screen-height landscape reel fills the left beside an editorial heading and numbered travel index.

9 blocksOpen preview

Fullscreen portfolio reel rendered in Twenty Twenty-Five

Shot 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

Studio split reel rendered in Twenty Twenty-Five

Shot in Twenty Twenty-FiveHeroHeroNeeds plugin

Studio split reel

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

9 blocksOpen preview

How it moves

A screen-filling photographic wheel that settles on a complete project after every scroll or drag, looping seamlessly in both directions. Choose Wheel / Drag with optional scroll-wheel input, or a finite Page scroll sequence in the editor. Turn off Scroll wheel for drag-only browsing that leaves page scrolling native. The projects and links stay editable core blocks. Narrow screens use a compact swipeable photo gallery. Show instructions optionally hides the browsing guidance in either layout.

What you can set before you copy

Every one of these is an attribute of the block, so it is the same control the editor's inspector offers after you have pasted. The Motion drawer on a pattern's own page writes your values into the markup before you copy it.

Setting	Attribute	Values	Default
Animate this block	`patternpasteMotion`	On or off	On
Interaction	`patternpasteInteraction`	Wheel / Drag or Page scroll	Wheel / Drag
Show instructions	`patternpasteInstructions`	On or off	On
Scroll wheel	`patternpasteWheel`	On or off	On
Loop	`patternpasteLoop`	On or off	On
Warp on movement	`patternpasteStrength`	0 to 1.35, in steps of 0.05	1
Resting curvature	`patternpasteBarrel`	0 to 0.5, in steps of 0.02	0.4
Screen height (%)	`patternpasteHeight`	70 to 100svh, in steps of 5	100svh
Ribbon width	`patternpasteWidth`	45 to 96%, in steps of 1	64%

Back to the interactive patterns

Needs the plugin

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.

The plugin is yours to use forever: after you cancel, it and every section using it keep working. Only updates and support stop.

How to install it

The plugin registers this block and nothing else: it ships no patterns of its own. The designs live here, as copy-paste markup.

Before you 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.

Editing Open the theme tool

measuring

Start from

One of ours, a blank sheet, or a random draw. Looking at one of ours saves nothing until you change something; a draw is kept the moment it lands.

Name

What WordPress shows; the zip and its folder take it.

Theme name

Import theme.jsonUpload a file or paste its contents

Reading a file is the theme tool's job, and the theme you make there is the one this site wears.

Import in the theme tool

Colours

8 named colours. These are the only colour values the system states.

Each result is that colour's verdict across every place it is used. Open one for the measured pairs and fixes.

base The page. Every section sits on this unless it states otherwise.

contrast Body text, and the ink every hairline and rule inherits.

accent-1 The primary action: buttons, links, the one thing to click.

accent-2 A second band colour, for a section that has to change key.

accent-3 A third band colour. Quiet enough to sit under text.

accent-4 A mid neutral: borders, muted labels, disabled states.

accent-5 A tinted paper: cards and panels lifted off the base.

accent-6 An ink surface: the dark band, with base as its text.

Type

Choose the faces first, then tune the scale and style. Each part opens on its own so the control you need stays beside the type specimen rather than inside one long form.

FamiliesHeadings, body and pairings

Headings

Body

Pairings

One click sets a pairing chosen for a purpose.

ScaleBase, ratio and five named sizes

Set the base to preserve the current proportions, use a ratio to regenerate them, or tune one step. Body copy, buttons and hierarchy headings in every pattern sit on these rungs; a stat or a display headline keeps its own size on purpose.

Base size

rem

Ratio

small

rem

medium

rem

large

rem

x-large

rem

xx-large

rem

StyleWeight, leading, tracking and case

Applies to Heading weight

Heading line height

Heading tracking

em

Heading case

Body line height

Body tracking

em

An empty field states nothing, so the face or WordPress default remains in charge.

Spacing

Adjust the overall spacing across your patterns. Smaller values make layouts tighter; larger values give them more room.

Gaps and padding move together

This scales every spacing preset together. It affects gaps and padding that use those presets, including space inside sections and cards. Fixed spacing and custom pattern controls keep their own values.

To change one section or gap independently, use that block’s spacing controls in WordPress.

Overall spacing

rem

Resizes your current proportions. The value is preset 40, the scale’s reference point.

Individual spacingPreset values

Each value changes every gap and padding that uses that preset. Values are in rem; 1rem follows your site’s root font size.

Layout widthsOptional

Defaults are 650px for content and 1200px for wide blocks. Existing themes keep their own widths. These affect blocks using the theme’s layout widths; full-width sections keep filling the page.

Content width

px

Wide width

px

FinishCorners and borders

Corners on buttons and on images, and a hairline round either. A radius is a fixed step; a border colour is one of your roles, so it is measured on every band like any other role.

Button corners

Image corners

Button border

Image border

Sections

The palette derives these reusable bands. Each ships as a section style and appears as a knob on every pattern.

Open one to rename it, change its band, ink or button, check its contrast, or restore the version built from the palette. A section you removed, or one the palette rejected, can be added back below: a reject is re-pointed at a role that passes, never given a colour of its own.

Not in this theme (0)

Contrast

measuring

Every colour pair this design system produces, measured against the value that actually resolves. Unknown never renders as a pass.

Pair	Colours	Ratio	Result

Download

The zip WordPress installs, the theme.json on its own and a child of the theme you run are built in the theme tool. It opens on this same theme.

Download in the theme tool

Every control back to the shipped default. Your other saved themes are untouched.