Refrakt | Glass and Prism Optics HTML Slider

Refrakt renders your slides as light passing through real, configurable glass — fluted reeded panels, a prism wedge that tears color when you drag, frost that clouds over mid-transition and resolves pin-sharp — all computed live in a single WebGL2 shader. No Three.js. No GSAP. No dependencies. 42 KB gzipped.

Drag hard and the prism band shears the image with velocity-driven RGB dispersion. Let go and the exposure settles like a camera finding its level. A gesture advances exactly one slide by default — momentum glides, then lands, never skips. Every parameter — glass type, refraction depth, dispersion, frost mode, light position, exposure, grain — is one JSON option away.

Ten demos, eight presets, one engine

• Optics Lab — edit every option live, copy the result as a preset file
• Atelier — reeded-glass lens lookbook for fashion & portfolio
• Prism Noir — maximum tear, giant RGB-echo typography
• Boardroom — the conservative one you can ship to a bank
• Frost — frost-dissolve transitions that resolve pin-sharp; a rest mode where the cursor wipes condensation off the glass
• Darkroom — breathing exposure, analog develop-and-settle feel
• Spectra Type — typography-first with editorial menu navigation
• Eclipse — your cursor is the light source
• Cinema — live video refracted through glass
• Vitrine — three sliders, one shared WebGL context