Small update to Lyceum Academy after a tip on Reddit. The Apply buttons used to hand the course to the form through sessionStorage, so it got lost on a refresh, in a new tab or in a shared link. Now they open /apply?course=<slug> and the course dropdown picks it up on load.

The nav's Apply button does the same when you're on a course page. New remixes get the change.

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: a world map with no tile server.

Most map components load tiles from Google, OpenStreetMap or Carto, so every visit sends a request to a third party and many need an API key. For our last two components I tried the opposite and baked the world into the code: Natural Earth coastlines (public domain), projected to Equal Earth and simplified into a single 25 KB SVG path. The land dots are an SVG pattern whose spacing is recalculated on zoom, so they keep the same size on screen.

Three things that took more than one try:

Scrolling. A plain wheel now scrolls the page and only Ctrl or ⌘ zooms the map. On phones one finger scrolls the page and two fingers move the map. We measured both on the published site.

The first view. Measuring the frame in JavaScript to fit all pins would make the server and browser draw different frames, so the fit is done with CSS container units. On a 390 px phone the first version cut off Japan and Australia; this fixed it.

Text sizes. The panel started with eleven unrelated font sizes. It now uses one scale (14 px base, ratio 1.125) tied to a single Text Size control.

The two are Aisol Office Map and Aisol Dot Globe; the clip is recorded from them.

Two three.js components, recorded frame by frame from the real thing.

Paper Flipbook: drop in page images, drag the corner or use the arrow keys. One thing I learned shipping it: on my published site, React's onKeyDown never fired inside the code component, even though it worked on the canvas. It now listens on its own root element. If your component's keyboard works in the editor but not live, that's worth checking.

Logo Extrude 3D: paste an SVG and it rebuilds as you type. The clip runs a bolt through chrome, glass, clay, gold and holographic, then pushes the depth.

Wanted a footer that reacts when you wave the cursor at it. The first pass pushed letters sideways into each other and it just looked broken, so they move up and down now.

Made a scripted "AI is working" card because faking it with a GIF never matched the page. The fiddly part was keeping the card from growing while the answer streams in.

Wanted a device mockup where the laptop and the phone in front of it always show the same screen. The tablet-plus-phone layout fought me longest: the phone kept sitting beside the tablet instead of overlapping it.