Layout morph
ProA 24 card gallery that flies between grid, masonry, list, fan, carousel and a 3D helix.
Live block · sample data
One collection, six ways to browse
The Kiln & Loom autumn edit: 14 pieces from 10 makers. Switch the view and every card travels to its new place.
Autumn editHover a card for its details
Pieces14
Makers10
Avg rating4.8
| Name | Type | Maker or craft | Price or pieces | Details |
|---|---|---|---|---|
| Travertine tray | Piece | Jasmine Brooks | $96 | Price: $96, Size: 32 × 18 cm, In stock: 17, Ships in: 3 days |
| Emma Collins | Maker | Ceramicist, Portland | 2 pieces | Pieces here: 2, Orders: 2,140, Rating: 4.9, Since: 2016 |
| Opal table lamp | Piece | Daniel Kim | $248 | Price: $248, Size: 52 cm tall, In stock: 14, Ships in: 2 days |
| Sofia Ramirez | Maker | Weaver, Oaxaca | 2 pieces | Pieces here: 2, Orders: 1,386, Rating: 4.9, Since: 2018 |
| Stoneware mug pair | Piece | Emma Collins | $58 | Price: $58, Size: 350 ml each, In stock: 41, Ships in: 2 days |
| Ava Mitchell | Maker | Glassblower, Leeds | 1 piece | Pieces here: 1, Orders: 964, Rating: 4.8, Since: 2017 |
| Wool floor cushion | Piece | Olivia Bennett | $134 | Price: $134, Size: 60 cm round, In stock: 12, Ships in: 5 days |
| Oat linen throw | Piece | Sofia Ramirez | $186 | Price: $186, Size: 130 × 170 cm, In stock: 22, Ships in: 3 days |
| Marcus Johnson | Maker | Woodworker, Asheville | 2 pieces | Pieces here: 2, Orders: 1,057, Rating: 4.8, Since: 2015 |
| Oak serving board | Piece | Marcus Johnson | $72 | Price: $72, Size: 48 × 22 cm, In stock: 26, Ships in: 2 days |
| Jasmine Brooks | Maker | Stonemason, Glasgow | 1 piece | Pieces here: 1, Orders: 402, Rating: 4.6, Since: 2021 |
| Oak lounge chair | Piece | Ryan Sullivan | $1,240 | Price: $1,240, Size: 78 × 82 × 74 cm, In stock: 3, Ships in: 6 weeks |
| Ryan Sullivan | Maker | Upholsterer, Copenhagen | 1 piece | Pieces here: 1, Orders: 312, Rating: 4.7, Since: 2019 |
| Beeswax taper pair | Piece | Hannah Walsh | $24 | Price: $24, Size: 30 cm, 9 hour burn, In stock: 96, Ships in: 1 day |
| Daniel Kim | Maker | Metalworker, Milan | 2 pieces | Pieces here: 2, Orders: 781, Rating: 4.8, Since: 2014 |
| Linen napkin set | Piece | Sofia Ramirez | $42 | Price: $42, Size: 45 × 45 cm, In stock: 54, Ships in: 3 days |
| Night carafe set | Piece | Ava Mitchell | $64 | Price: $64, Size: 1 L with two tumblers, In stock: 38, Ships in: 2 days |
| Chloe Nguyen | Maker | Photographer, Lisbon | 1 piece | Pieces here: 1, Orders: 528, Rating: 5.0, Since: 2020 |
| Brass bookends | Piece | Daniel Kim | $110 | Price: $110, Size: 14 cm tall, In stock: 9, Ships in: 2 days |
| Hannah Walsh | Maker | Chandler, Lagos | 1 piece | Pieces here: 1, Orders: 2,690, Rating: 4.9, Since: 2019 |
| Walnut stool | Piece | Marcus Johnson | $390 | Price: $390, Size: 45 cm tall, In stock: 6, Ships in: 3 weeks |
| Dusk at Berlenga | Piece | Chloe Nguyen | $120 | Price: $120, Size: 50 × 50 cm, In stock: 25, Ships in: 4 days |
| Olivia Bennett | Maker | Felter, Mexico City | 1 piece | Pieces here: 1, Orders: 645, Rating: 4.8, Since: 2018 |
| Ash glaze vase | Piece | Emma Collins | $84 | Price: $84, Size: 24 cm tall, In stock: 7, Ships in: 2 days |
- 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.
- 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
Pro source and install commands unlock with a Pro plan.
Usage
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.
example.tsx
import { LayoutMorph } from "@/components/arc/blocks/layout-morph/layout-morph"; export default function CataloguePage() { return ( <main> <LayoutMorph /> </main> );}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.
- Arrow keysorHomeorEnd
- On the view switch, picks the next, previous, first or last layout.
- Arrow leftorArrow right
- On a card, switches to the previous or next layout and keeps that card in focus.
- Arrow uporArrow downorHomeorEnd
- Moves focus between cards.
- Enter
- Opens the focused card.
- Escape
- Closes the open card.
- 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.
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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.
The full library index for assistants is at /llms.txt.