Refrakt | Glass and Prism Optics HTML Slider

Every slider effect you’ve seen is a transition. Refrakt is an instrument.

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

Running in three steps

Two files, plain figures with real text, done — it auto-initializes from one data-refrakt attribute. Bundler users get ESM imports and TypeScript definitions instead.

The download ships the complete source rather than pre-built files, as CodeCanyon requires. One npm run build — a few seconds, Node 20+, needed once — produces the two files above. The step-by-step is the second page of the documentation, and every demo tells you if you open it before building.

Built like a product, not a demo

• Zero dependencies — one script tag, or ESM for bundlers. TypeScript definitions included.
• Drop-in — <div data-refrakt="atelier"> and you’re done; auto-initializes.
• Real DOM text — captions are selectable, crawlable, styled by your CSS. SEO keeps working.
• Never breaks a page — no WebGL2? Automatic CSS fallback with the identical API and events.
• One slide per gesture — flicks are bounded by default (motion.maxStep); set it to 0 for free momentum.
• 60fps on mid-range phones — automatic quality governor (resolution + shader tier), render-on-demand when idle.
• Accessible — ARIA carousel pattern, full keyboard support, screen-reader announcements, prefers-reduced-motion honored, WCAG 2.2.2 pause control.
• Media pipeline — responsive images, self-hosted video as a live refracted texture, YouTube/Vimeo poster pattern with lightbox playback, frost-up lazy loading, 96 MB texture memory management.
• Lightbox — the glass optically clears as the slide de-refracts to fullscreen.
• Deeply configurable — 60+ documented options with safe clamps; bad config produces a different look, never a broken page.

What’s in the box

• The complete unminified source, plus the build that turns it into the ESM + UMD + CSS bundles
• 10 offline demo pages incl. the Optics Lab configurator
• 8 preset JSON files — Optics Lab round-trips them
• Documentation in two layers. Layer one is plain English with no jargon: swap the pictures, swap the words, add or remove a slide, pick a different look — no JSON, no shader code, nothing to learn first. Layer two is the full reference when you want it: every option, the JS API and events, an Optics Cookbook of 12 recipes, a media guide, troubleshooting, and a support page. Both layers are searchable and work offline.
• Demo imagery is procedurally generated for this package — reuse it freely in your end products

Honest notes

• YouTube/Vimeo slides refract their poster frame and play in the lightbox — cross-origin iframes cannot be WebGL textures (nobody can do this; we document it instead of faking it).
• WebGL2 (Chrome/Edge 90+, Firefox 90+, Safari 15.4+). Older browsers get the CSS fallback automatically.
• Photos shown in the preview images are for demonstration and are not included in the download; the package ships license-clean generated media.