Components · images

Images, frames, aspect ratios. Then they arrive.

Three orthogonal concerns: .lsd-aspect locks proportion, .lsd-frame is the chrome around the image, .lsd-img is the surface effect. Layer any combination, then chain a .lsd-fx--<entrance> on the wrapper for scroll-triggered arrival.

01 · proportion

.lsd-aspect

A pure CSS utility — sets aspect-ratio: var(--ar) and clips children to object-fit: cover. Same placeholder, ten ratios, immediately visible proportional difference.

16 / 9

cinema

<div class="lsd-aspect lsd-aspect--16-9">…</div>

4 / 3

classic

3 / 2

photo

1 / 1

square

3 / 4

portrait

4 / 5

portrait

9 / 16

vertical

21 / 9

ultra-wide

golden

1.618

silver

1.414

02 · chrome

.lsd-frame

A frame is the chrome around the image — border, shadow, corners, decoration. Pair any frame with any aspect ratio: <div class="lsd-frame lsd-frame--polaroid"><div class="lsd-aspect lsd-aspect--4-3">…</div></div>

bordered

shadowed

polaroid

magazine

ticket

film

ornate

vignette

label-strip

glass-card

F10

03 · surface

.lsd-img

Surface treatments — hover transitions, idle motion, color and pointer effects. Independent of frame and aspect.

zoom-hover

scale(1.08) on hover

ken-burns

slow infinite scale + pan

parallax-bg

translates with --lsd-progress while scrolling

duotone

accent + accent-3 color overlay

mask-reveal

pointer-driven porthole — move over image

grayscale-hover

desaturated, color on hover

blur-hover

blurred at rest, sharp on hover

noise

SVG turbulence film grain

04 · arrival

.lsd-fx--<entrance>

Each card carries .lsd-scroll .lsd-fx--<name>; lsd-scroll-trigger.js adds .lsd-in-view on intersection and the transition plays. Click Replay to re-arm the observer.

fade-in

slide-up

slide-left

scale-in

scale-out

blur-in

mask-up

mask-iris

rotate-in

flip-in

curtain

E10

stagger-children

E12

05 · chain

aspect + frame + img + entrance + hover

Every concern is an independent class. The whole stack chains on one element. Each card below combines all five layers.

polaroid + zoom + scale-in + lift

<div class="lsd-frame lsd-frame--polaroid
            lsd-fx--scale-in lsd-fx--lift lsd-scroll lsd-scroll-once">
  <div class="lsd-aspect lsd-aspect--1-1">
    <div class="lsd-img lsd-img--zoom-hover" …></div>
  </div>
</div>