{"id":136558,"date":"2026-07-24T21:03:08","date_gmt":"2026-07-24T21:03:08","guid":{"rendered":"https:\/\/mailinvest.blog\/index.php\/2026\/07\/24\/refrakt-glass-and-prism-optics-html-slider\/"},"modified":"2026-07-24T21:04:07","modified_gmt":"2026-07-24T21:04:07","slug":"refrakt-glass-and-prism-optics-html-slider","status":"publish","type":"post","link":"https:\/\/mailinvest.blog\/index.php\/2026\/07\/24\/refrakt-glass-and-prism-optics-html-slider\/","title":{"rendered":"Refrakt | Glass and Prism Optics HTML Slider"},"content":{"rendered":"<\/a>\n<\/p>\n

LIVE PREVIEW<\/a>BUY FOR $59<\/a><\/p>\n

<\/p>\n


\n\"Refrakt
\n<\/a><\/p>\n

Each slider impact you’ve seen is a transition. Refrakt is an instrument.<\/h2>\n

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

\"Refrakt<\/p>\n

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 \u2014 momentum glides, then lands, by no means skips. Each parameter \u2014 glass sort, refraction depth, dispersion, frost mode, mild place, publicity, grain \u2014 is one JSON possibility away.<\/p>\n

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

    \"Refrakt<\/p>\n

    Operating in three steps<\/h3>\n

    Two recordsdata, plain figures with actual textual content, completed \u2014 it auto-initializes from one data-refrakt<\/code> attribute. Bundler customers get ESM imports and TypeScript definitions as a substitute.<\/p>\n

    The obtain ships the whole supply somewhat than pre-built recordsdata, as CodeCanyon requires. One npm run construct<\/code> \u2014 a couple of seconds, Node 20+, wanted as soon as \u2014 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.<\/em><\/p>\n

    \"Install<\/p>\n

    Constructed like a product, not a demo<\/h3>\n
      \n
    • Zero dependencies<\/strong> \u2014 one script tag, or ESM for bundlers. TypeScript definitions included.<\/li>\n
    • Drop-in<\/strong> \u2014 <div data-refrakt=\"atelier\"><\/code> and also you’re completed; auto-initializes.<\/li>\n
    • Actual DOM textual content<\/strong> \u2014 captions are selectable, crawlable, styled by your CSS. website positioning retains working.<\/li>\n
    • By no means breaks a web page<\/strong> \u2014 no WebGL2? Computerized CSS fallback with the similar API and occasions.<\/li>\n
    • One slide per gesture<\/strong> \u2014 flicks are bounded by default (movement.maxStep<\/code>); set it to 0 at no cost momentum.<\/li>\n
    • 60fps on mid-range telephones<\/strong> \u2014 automated high quality governor (decision + shader tier), render-on-demand when idle.<\/li>\n
    • Accessible<\/strong> \u2014 ARIA carousel sample, full keyboard help, screen-reader bulletins, prefers-reduced-motion<\/code> honored, WCAG 2.2.2 pause management.<\/li>\n
    • Media pipeline<\/strong> \u2014 responsive pictures, self-hosted video as a reside refracted texture, YouTube\/Vimeo poster sample with lightbox playback, frost-up lazy loading, 96\u00a0MB texture reminiscence administration.<\/li>\n
    • Lightbox<\/strong> \u2014 the glass optically clears because the slide de-refracts to fullscreen.<\/li>\n
    • Deeply configurable<\/strong> \u2014 60+ documented choices with protected clamps; unhealthy config produces a distinct look, by no means a damaged web page.<\/li>\n<\/ul>\n

      \"Zero<\/p>\n

      \"Optics<\/p>\n

      What’s within the field<\/h3>\n
        \n
      • The whole unminified supply, plus the construct that turns it into the ESM + UMD + CSS bundles<\/li>\n
      • 10 offline demo pages incl. the Optics Lab configurator<\/li>\n
      • 8 preset JSON recordsdata \u2014 Optics Lab round-trips them<\/li>\n
      • Documentation in two layers.<\/strong> Layer one is apparent English with no jargon: swap the images, swap the phrases, add or take away a slide, decide a distinct look \u2014 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.<\/li>\n
      • Demo imagery is procedurally generated for this package deal \u2014 reuse it freely in your finish merchandise<\/li>\n<\/ul>\n

        \"41.87<\/p>\n

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

          \n