Smooothy: A Slider Built to Sit Under Your WebGL Scene

Federico Valla's Smooothy is a tiny TypeScript slider that exists because every other carousel synced badly with WebGL. Drag through Toast and Fish but no Head while current, target, and parallaxValues tick out in real time, ready to feed your shader uniforms.

0:00
/0:32

A horizontal slider scrolling through 3D-rendered objects gliding with smooth inertia next to a live readout of speed, position, and parallax values.

Federico Valla's Smooothy is, technically, a carousel library. The demo page gives this away by making you scroll through Toast, Fish but no Head, Hotdog, Ramen Bowl, and Just a Fungus, all priced at 33.23¥.

Smooothy is built to be the carousel underneath your scene, not over it. The Core class is a few hundred lines of TypeScript that exposes everything a shader actually cares about (current, target, progress, speed, parallaxValues, deltaTime) through an onUpdate callback you wire into your own RAF loop.

Worth the click for the configurable demo alone. Drag it around, hit the source code to see how the parallax values get piped into the actual GLSL.

Launch Demo
ShowcaseWebGLSliderShaders