Uniform grid
4 → 3 → 2 → 1 columns as container narrows. Tiles cascade in with stagger.
.gallery-grid.lsd-frame--shadowed.lsd-aspect--1-1.lsd-img--zoom-hover.lsd-fx--scale-in.lsd-fx--stagger-children01
02
03
04
05
06
07
08
Blocks · Galleries
Gallery sections
Six image-forward patterns — uniform grid, masonry, lightbox, snap-carousel, before/after slider, and infinite feed.
Masonry
Variable aspect ratios flow in CSS columns. 4 → 3 → 2 → 1 columns by container width.
.gallery-masonrycolumn-count.lsd-aspect--*3 × 4
1 × 1
16 × 9
4 × 3
9 × 16
1 × 1
3 × 4
16 × 9
Lightbox trigger
Thumbnail grid; click opens overlay. Prev/next arrows + close button. Pure CSS open/close via data-lightbox-open.
.gallery-lightbox.lsd-frame--magazine.lsd-aspect--16-9.lsd-fx--scale-inSnap carousel
Horizontal scroll with snap points. Arrows scroll by one item.
.gallery-carouselscroll-snap-type.lsd-frame--polaroid.lsd-aspect--4-3.lsd-btn--iconSunday brunch
Lakeside
Studio
Roadtrip
Festival
Coastline
Before / after
Drag the handle to reveal. Updates --lsd-slider CSS var (0 → 1). Uses clip-path: inset().
.gallery-ba.lsd-aspect--16-9.lsd-frame--shadowed--lsd-sliderBefore · raw
After · graded
Infinite feed
Image-left, text-right cards. "Load more" appends 4 with staggered slide-up. Stacks under 560px.
.gallery-feed.lsd-aspect--1-1.lsd-frame--shadowed.lsd-chip.lsd-fx--slide-up.lsd-fx--stagger-childrenPost 01
Authoring motion
How Aurora replaces tween-juggling with a track-based timeline.
Post 02
Surface-aware components
Components read role from context; colour comes from surface.
Post 03
Container queries first
Why we ditched @media for layout.
Post 04
Behaviours panel
Visual wiring for trigger → action → target.
Post 05
Token snap drag
Resizing snaps to the next token, not the next pixel.
Post 06
The .lsd file
One package, three audiences — humans, AI, framework-agnostic.
