Before and after

Where it earns its place

Case studies and redesign pitches, where showing the old and new at the same scale says more than two screenshots side by side.

What we changed

• The two sides are composed site frames for Vellum Labs (a legacy template and the rebuild), drawn at one design size and scaled as a unit, so no screenshots or stock images are needed.
• Kept the single spring-smoothed position driving the clip and the handle; tuned it critically damped so a click far away glides over and stops without overshooting.
• The original tracked mouse and touch events only while a button was held on the frame; this uses pointer capture, so a drag that leaves the frame keeps working.
• Added a real slider handle with arrow, Shift, Page, Home and End keys and a value text, which the original did not have; reduced motion moves the divider without the spring.
• Before and after labels fade out as the divider covers their side, so a label never floats over the wrong design.