Recipes
20 complete demos, each running the library from this repo.
DevTools dock side with data-⚓️-sideA DevTools panel docked before/below/after the page it inspects.
Drag to dock: chat-head snapping with data-⚓️-sideDrag a picture-in-picture camera bubble and release: it snaps to the nearest side of the call and swings there.
RTL mirror: logical anchor sidesA chat UI whose tooltips, timestamps, reaction badge, presence dot, hint and menu are all placed with logical data-⚓️-* sides (before/after/align-trailing).
Chat sidesChat bubbles placed with data-⚓️-side="before|after" around dots on a centre spine.
Compass menuA radial/compass action menu: four items placed above/after/below/before a hub with data-⚓️-side, opening out of the hub with data-⚓️-morph-from.
The tooltip that arguesClick to cycle the requested side, or drag the button into a corner: data-⚓️-try="flip-all" lets the browser overrule the request, and @container anchored(fallback) queries report asked vs. got.
Coach-mark tour that walks around each targetA product tour whose one coach mark hops between targets and sides (below, after, above, before) with data-⚓️-to + data-⚓️-side + data-⚓️-tween, and a data-⚓️-fill spotlight that follows along.
Corner toasts that pick a sideToasts that stack below top-corner anchors and above bottom-corner anchors.
Filter, sort & drag grid that glidesFilter chips hide cells, sort buttons and drag/Alt+arrow reorder only change CSS order; every swatch is anchored to its grid cell with data-⚓️-fill + data-⚓️-transition="glide" + data-⚓️-scope-name, so it glides to it…
Masonry that glidesA CSS multi-column masonry board whose cards glide to their new column when the column width changes or the board is resized.
Card ↔ list view toggleSwitch a music library between cards and a list: only the invisible grid changes, and three anchored layers per item (background, cover, text) morph to their new slots with data-⚓️-fill + data-⚓️-transition="morph".
Resizable heat-map that re-flowsA GitHub-style contribution calendar: drag the handle and the weeks wrap into bands while 371 day squares glide to their new spots (data-⚓️-fill + data-⚓️-transition="glide", one scoped --day name per cell).
iOS app shell: nav bar, tab bar, push, sheet and split viewA UITabBarController + UINavigationController shell built from constraints.
iOS profile with proportional constraintsA UIKit-style profile screen built from Auto Layout constraints written as data-⚓️-* attributes, with proportional widths from sync-width and --⚓️-mult-x.
iOS sign-up form + keyboardLayoutGuideA UIKit-style sign-up form built as a constraint chain, with the primary button anchored data-⚓️-side="above" a simulated keyboardLayoutGuide so it rides the keyboard up.
iOS adaptive dashboard: size classes, readable guide & prioritiesA Health-style summary built like a UIKit screen, with widget cards that go from one column to two by swapping one data-⚓️-side value and their width multipliers.
Magnetic table columns: values glide to new anchorsRecreates the 'tables that split, stretch and snap into place' interaction (Operate, Alvish Baldha).
Barrel roll number counter: digits glide between anchored slotsA live count up/count down number where every digit is a ten-numeral barrel.
Archive an email: the row's height glides shut and the rest slide upAn email list where each message is an invisible slot with a visible card data-⚓️-fill on it and data-⚓️-transition=glide.
Animated grid reflow (after Bramus)Bramus's animated CSS grid technique rebuilt with the data-⚓️-* attribute library: anchor-scope + data-⚓️-fill, zero JS.