Lumo Speed Warp

A gallery that reacts to how fast the visitor scrolls: images skew and shrink in the direction of travel, then settle back as the scroll calms. Lightweight, CSS only.

What you can change

• Images — Up to 24

• Layout — Row or Grid

• Columns — Grid columns (3, Grid only)

• Tile width / Tile height / Gap / Radius — Tile size (320 × 240px; width Row only), spacing (16px), corners (12px)

• Skew — Maximum skew at full speed (12°)

• Shrink — How much a tile shrinks at full speed (0.08)

• Decay — How long the warp takes to die down (350ms)

• Drift — Parallax travel of the row over the viewport (160px)

• Background — Section background

Good to know

• Every option lives in the properties panel; no code needed.

• Respects reduced motion: visitors who ask for less motion get a calm static version.

• Responsive: no horizontal scroll at phone, tablet or desktop widths.

• Installs from one link; its shared Hero Kit helpers come with it.

• Licence: Framer's single-use commercial licence (one project).