LIVE PREVIEWBUY FOR $59


Refrakt | Glass and Prism Optics HTML Slider - 1

Each slider impact you’ve seen is a transition. Refrakt is an instrument.

Refrakt renders your slides as mild passing by actual, configurable glass — fluted reeded panels, a prism wedge that tears shade while you drag, frost that clouds over mid-transition and resolves pin-sharp — all computed reside in a single WebGL2 shader. No Three.js. No GSAP. No dependencies. 42 KB gzipped.

Refrakt — WebGL2 optics engine slider. 42 KB gzipped, zero dependencies, 8 presets, CSS fallback

Drag exhausting and the prism band shears the picture with velocity-driven RGB dispersion. Let go and the publicity settles like a digicam discovering its stage. A gesture advances precisely one slide by default — momentum glides, then lands, by no means skips. Each parameter — glass sort, refraction depth, dispersion, frost mode, mild place, publicity, grain — is one JSON possibility away.

Ten demos, eight presets, one engine

  • Optics Lab — edit each possibility reside, copy the end result as a preset file
  • Atelier — reeded-glass lens lookbook for vogue & portfolio
  • Prism Noir — most tear, large RGB-echo typography
  • Boardroom — the conservative one you may ship to a financial institution
  • Frost — frost-dissolve transitions that resolve pin-sharp; a relaxation mode the place the cursor wipes condensation off the glass
  • Darkroom — respiration publicity, analog develop-and-settle really feel
  • Spectra Sort — typography-first with editorial menu navigation
  • Eclipse — your cursor is the sunshine supply
  • Cinema — reside video refracted by glass
  • Vitrine — three sliders, one shared WebGL context

Refrakt presets — eight shipped looks on one optics engine

Operating in three steps

Two recordsdata, plain figures with actual textual content, completed — it auto-initializes from one data-refrakt attribute. Bundler customers get ESM imports and TypeScript definitions as a substitute.

Hostinger

The obtain ships the whole supply somewhat than pre-built recordsdata, as CodeCanyon requires. One npm run construct — a couple of seconds, Node 20+, wanted as soon as — produces the 2 recordsdata above. The step-by-step is the second web page of the documentation, and each demo tells you for those who open it earlier than constructing.

Install in three steps — two files, plain markup, auto-initializes; full JS API when you want it

Constructed 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 also you’re completed; auto-initializes.
  • Actual DOM textual content — captions are selectable, crawlable, styled by your CSS. website positioning retains working.
  • By no means breaks a web page — no WebGL2? Computerized CSS fallback with the similar API and occasions.
  • One slide per gesture — flicks are bounded by default (movement.maxStep); set it to 0 at no cost momentum.
  • 60fps on mid-range telephones — automated high quality governor (decision + shader tier), render-on-demand when idle.
  • Accessible — ARIA carousel sample, full keyboard help, screen-reader bulletins, prefers-reduced-motion honored, WCAG 2.2.2 pause management.
  • Media pipeline — responsive pictures, self-hosted video as a reside refracted texture, YouTube/Vimeo poster sample with lightbox playback, frost-up lazy loading, 96 MB texture reminiscence administration.
  • Lightbox — the glass optically clears because the slide de-refracts to fullscreen.
  • Deeply configurable — 60+ documented choices with protected clamps; unhealthy config produces a distinct look, by no means a damaged web page.

Zero dependencies, CSS fallback, 60 fps governor, one slide per gesture, real DOM text, accessibility, media pipeline, 60+ options

Optics Lab — 42 live controls writing through the real API, exported as preset JSON

What’s within the field

  • The whole unminified supply, plus the construct that turns it into the ESM + UMD + CSS bundles
  • 10 offline demo pages incl. the Optics Lab configurator
  • 8 preset JSON recordsdata — Optics Lab round-trips them
  • Documentation in two layers. Layer one is apparent English with no jargon: swap the images, swap the phrases, add or take away a slide, decide a distinct look — no JSON, no shader code, nothing to study first. Layer two is the complete reference while you need it: each possibility, the JS API and occasions, an Optics Cookbook of 12 recipes, a media information, troubleshooting, and a help web page. Each layers are searchable and work offline.
  • Demo imagery is procedurally generated for this package deal — reuse it freely in your finish merchandise

41.87 KB gzipped under a hard 45 KB budget, 78/78 tests, 0 dependencies, 60 fps — Chrome, Safari, Firefox, Edge, Opera, with automatic CSS fallback

Sincere notes

  • YouTube/Vimeo slides refract their poster body and play within the lightbox — cross-origin iframes can’t be WebGL textures (no one can do that; we doc it as a substitute of faking it).
  • WebGL2 (Chrome/Edge 90+, Firefox 90+, Safari 15.4+). Older browsers get the CSS fallback routinely.
  • Images proven within the preview pictures are for demonstration and aren’t included within the obtain; the package deal ships license-clean generated media.


Source

Namecheap Best Deals