React App Shell and Panel Components

A nav + list + detail master-detail application shell with built-in collapsing, an overlay mode, and a page-by-page responsive state machine, its transitions choreographed as a spring sequence.

A contextual inspector panel docked to the right that expands by pushing, so the main content reflows with it; sections collapse and the width can be dragged.

An anchored settings-page frame — scroll-spy navigation on the left, two-column settings sections on the right, an indicator that glides along with the scroll, and a save bar that springs in when there are unsaved changes.

An onboarding checklist pinned to the side of the app — completed items check off and collapse, the progress ring at the top counts up, and once everything is done it shrinks into an expandable floating badge.

A notification center panel grouped by date or source, with unread/all tabs and collapsible groups; on a bulk clear the items sweep out in sequence and the group height springs closed behind them.

A Finder-style Miller-column hierarchy browser: every level you descend springs a new column in from the right, the whole row pans smoothly once it overflows, and breadcrumbs highlight the current path in step.

A multi-column drag-to-split panel workspace whose dividers have spring feedback; panels collapse to a thin strip in one click and the neighbouring panels reflow elastically.

A focus-mode shell: one click and the sidebar, top bar, and auxiliary panel fade out and slide away in timeline order while the main content eases back to center and scales up; exiting reverses the choreography and restores the whole shell.

A non-modal narrow floating panel that can be dragged and magnetically snapped to either side, and flicked away to collapse into an edge handle — springs tracking the pointer throughout.

A grid of glass control modules; long-press any tile and it springs open in place into a fine-grained control card (slider, segmented toggle) while the background blurs and recedes, springing back on release.

A persistent mini player bar at the bottom; tap it and the artwork scales up as a shared element while the whole layer springs open into a full-screen now-playing page, dismissed by a downward drag whose gesture velocity decides the outcome.

An iOS-style large-title header that shrinks into a centered small title as a shared element on scroll, pulls out a search bar with a rubber-band bounce, and sticks section headings one after another below the header.

A visionOS-style ornament toolbar floating just outside the edge of a content panel: it shrinks to a pill while scrolling and expands to full controls when you stop, with Z-axis lift and a follow-along parallax.

A mail inbox with a list plus a reading pane, a sliding selection highlight, and unread badges.

A file/folder grid with marquee multi-select, a right-click menu, and view switching.

A calendar panel where a month grid and the day's agenda move together, with colored event tags.

A keyboard-shortcut cheatsheet overlay summoned with ?, with grouped lists, kbd keycaps, and search filtering.

Take one primary color and derive a harmonious palette from it, with flip-card swatches, one-click copying, and lock-and-reroll.

Edit gradients by dragging color stops, with an angle dial, one-click CSS copying, and a preset library.

A multi-track editing timeline: drag and trim clips with grid snapping, a draggable playhead with playback, a ruler that re-ticks as you zoom, comment pins and audio waveforms.