Lab

Interface effects taken apart and rebuilt: what it is made of, the exact numbers, and a prompt that reproduces it. Every sample on this site is live — hover it, replay it, read the source.

• Motion1 effectsThings that move when you touch them. Durations, easing curves and the exact distances — the parts that decide whether an interaction feels alive or merely animated.Magnetic button
• Scroll5 effectsThe scrollbar as a timeline. Scrubbing a transition with the wheel instead of playing it on a timer is what separates a site that responds from a site that merely animates — and it is where most of the cost hides.Section stacking transitionScroll snapScroll-driven 3D carouselScroll-driven scene transition
• Backgrounds1 effectsGradients, grain, drifting light. Everything that sits behind the content and sets the mood without asking for attention.Aurora drift
• Type2 effectsHeadline treatments, reveals, variable-font tricks. Type carries most of the personality of a page, and most of it is done with three or four properties.Shimmer headlineStaggered character reveal
• Surfaces1 effectsGlass, depth, borders that catch the light. How a rectangle stops being a rectangle and starts being an object.Interactive liquid distortion