Build note: making a carousel bend like cloth, and stop when it's still.

The idea was simple: the faster you drag, the more the panels curve. Getting there took three tries.

• Measuring speed. My first version read speed from frame to frame, so a slow laptop and a fast one bent differently. It now uses the pointer samples from the last 100 ms, so the same drag gives the same bend on any screen.

• Settling. The bend runs on a damped spring. It overshoots once or twice and then snaps exactly flat, so the resting frame matches the page before any WebGL loads.

• Stopping. An idle "breeze" looked nice but kept the GPU busy the whole time the page was open. I turned it off by default and checked the published page: while nothing moves, the component draws zero frames. It also stops off screen and in hidden tabs.

One Framer surprise: after I changed a control's default in code, the published page kept the old value that was saved on the instance. Re-saving the instance fixed it. Worth knowing if you ship code components.

The clip is recorded from Aisol Silk Carousel.

Build note: making a carousel bend like cloth, and stop when it's still.

The idea was simple: the faster you drag, the more the panels curve. Getting there took three tries.

• Measuring speed. My first version read speed from frame to frame, so a slow laptop and a fast one bent differently. It now uses the pointer samples from the last 100 ms, so the same drag gives the same bend on any screen.

• Settling. The bend runs on a damped spring. It overshoots once or twice and then snaps exactly flat, so the resting frame matches the page before any WebGL loads.

• Stopping. An idle "breeze" looked nice but kept the GPU busy the whole time the page was open. I turned it off by default and checked the published page: while nothing moves, the component draws zero frames. It also stops off screen and in hidden tabs.

One Framer surprise: after I changed a control's default in code, the published page kept the old value that was saved on the instance. Re-saving the instance fixed it. Worth knowing if you ship code components.

The clip is recorded from Aisol Silk Carousel.