Layout Scrub
A list/grid view switch. Dragging the thumb morphs items continuously between list rows and grid cells with constant text block width, proportional 16:10 thumbnail scaling, and smoothstep interpolation.
Dependencies
motionclsxtailwind-merge
Interaction
Continuous geometric layout switcher. Items interpolate linearly between list and grid coordinates driven by a normalized parameter t. Smoothstep drag scrubbing and springless tween settling with zero overshoot.
Props
| Prop | Type | Description |
|---|---|---|
| items | LayoutScrubItem[] | Array of 2 to 24 items with id, thumbnail, title, optional meta, and optional trailing text. |
| heading | string | Optional heading text displayed above the item list. |
| caption | string | Optional secondary caption text displayed below the heading. |
| columns | 2 | 3 | 4 | Number of grid columns in grid view. |
| view | "list" | "grid" | Controlled active view mode. |
| defaultView | "list" | "grid" | Initial view mode when uncontrolled. |
| onViewChange | (view: "list" | "grid") => void | Callback fired when the active view changes. |
| className | string | Optional CSS classes merged with the root container. |
MIT License. Free to use in personal and commercial projects. Built for Peel UI.