Layout morphPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/layout-morph

• Markdown: https://ui.xzero.co.uk/components/blocks/layout-morph/markdown

• Access: Xzero Pro

• Registry id: layout-morph

• Source file: registry/blocks/layout-morph/layout-morph.tsx

• Keywords: react layout animation, gallery layout switcher, masonry to grid animation, 3d helix gallery, view mode toggle, morphing gallery

Use this for a catalogue, portfolio or team page where people browse the same set in different ways. Replace ITEMS in morph-data.ts with your own; layouts, captions, the open view and the numbers derive from it.

When to use

• Catalogue, portfolio, or team pages where people browse the same set in different layouts.
• Showcase galleries that fly between grid, masonry, list, fan, carousel, and a 3D helix.

When not to use

• Use photo-grid for a simple gallery.
• Use carousel or cover-flow for one horizontal browsing style.
• Use lightbox-gallery when opening a full size image is the main job.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/layout-morph

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { LayoutMorph } from "@/components/xzero/blocks/layout-morph/layout-morph";

export default function CataloguePage() {
  return (
    <main>
      <LayoutMorph />
    </main>
  );
}

API reference

LayoutMorph

A 24 card gallery that flies between grid, masonry, list, fan, carousel and a 3D helix, with an open view for each card. Takes no props; cards are sample data in ITEMS in morph-data.ts, using images from other blocks and public portraits.

No props.

Keyboard interactions

Keys	Action
Arrow keys / Home / End	On the view switch, picks the next, previous, first or last layout.
Arrow left / Arrow right	On a card, switches to the previous or next layout and keeps that card in focus.
Arrow up / Arrow down / Home / End	Moves focus between cards.
Enter	Opens the focused card.
Escape	Closes the open card.

Accessibility

• The view switch is a role="radiogroup" with roving tabindex and labelled icon options.
• The stage is a group with a gallery roledescription whose label explains the keys.
• The open card is a role="dialog"; the gallery behind it is hidden and the closed dialog is inert.

Motion

• Cards fly between layouts on springs, staggered outward from the chosen origin.
• Opening a card morphs it into the detail view.
• Reduced motion is passed to the engine and MotionConfig uses the user setting.

Responsive behavior

• Below a 720px container the layout tabs become icon-only and the stage is 540px tall, shrinking to 500px and 460px below 480px and 360px.
• In scrolling layouts the stage takes touch-action none; wheel only rotates the ring for horizontal or shift scrolls.

Performance

• Cards are DOM elements moved with transforms, and the ring layouts spin one camera transform per frame instead of every card.
• The loop pauses offscreen via IntersectionObserver and in hidden tabs; keep the set near the 24 sample cards.

Notes for AI

• Use for a catalogue, portfolio or team page where people browse the same set in different ways.
• Replace ITEMS in morph-data.ts with your own photos and profiles; layouts, captions and totals derive from it.
• The save action in the open view is local state; connect it to your favourites API if needed.

Related

• Photo grid: Pinch through zoom levels and open any photo straight from its cell.
• Carousel: Browse a row of slides by dragging, flicking, or arrowing through them.
• Cover flow: A depth rail of images you can throw, with soft grounded shadows and a quiet reflection.
• Card stack: Review a deck one card at a time, with a throw and an undo.
• Segmented control: Switch between a small set of related views.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt