holo-project/dist/holo.min.js

This project has been created using **webpack-cli**, you can now run

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.holo=e():t.holo=e()}(self,(()=>(()=>{"use strict";var t={d:(e,i)=>{for(var s in i)t.o(i,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:i[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{global:()=>l});let i=null;class s{constructor(t,e,s,n,o){var a,r;this.element=t,this.face=e,this.light=s,this.holo=n,this.settings=o,this._dimensions={x:0,y:0},this.background_color=window.getComputedStyle(this.element).backgroundColor,this.lightened_background_color=(a=this.getLighten(this.settings.lighten_amp),r=this.background_color,((t,e,s,n)=>{let o,a,r,h,l,d,c,g=parseInt,m=Math.round,u=!1;return"number"!=typeof t||t<-1||t>1||"string"!=typeof e||"r"!=e[0]&&"#"!=e[0]?null:(i||(i=t=>{let e=t.length,i={};if(e>9){if([o,a,r,u]=t=t.split(","),e=t.length,e<3||e>4)return null;i.r=g("a"==o[3]?o.slice(5):o.slice(4)),i.g=g(a),i.b=g(r),i.a=u?parseFloat(u):-1}else{if(8==e||6==e||e<4)return null;e<6&&(t="#"+t[1]+t[1]+t[2]+t[2]+t[3]+t[3]+(e>4?t[4]+t[4]:"")),t=g(t.slice(1),16),9==e||5==e?(i.r=t>>24&255,i.g=t>>16&255,i.b=t>>8&255,i.a=m((255&t)/.255)/1e3):(i.r=t>>16,i.g=t>>8&255,i.b=255&t,i.a=-1)}return i}),c=e.length>9,c=u?s.length>9||!1:c,l=i(e),h=t<0,d=h?{r:0,g:0,b:0,a:-1}:{r:255,g:255,b:255,a:-1},h=1-(t=h?-1*t:t),l&&d?(o=m(h*l.r+t*d.r),a=m(h*l.g+t*d.g),r=m(h*l.b+t*d.b),u=l.a,d=d.a,l=u>=0||d>=0,u=l?u<0?d:d<0?u:u*h+d*t:0,c?"rgb"+(l?"a(":"(")+o+","+a+","+r+(l?","+m(1e3*u)/1e3:"")+")":"#"+(4294967296+16777216*o+65536*a+256*r+(l?m(255*u):0)).toString(16).slice(1,l?void 0:-2)):null)})(a,r,!1))}getLighten(t){return t}relativeToFace(){return this._dimensions.x+=this.face.dimensions.x*(this.element.offsetWidth/window.innerWidth),this._dimensions.y+=this.face.dimensions.y*(this.element.offsetHeight/window.innerHeight),this}relativeToLight(t){return this._dimensions.x+=t*(this.light.dimensions.x-this.holo.x)*this.face.width*.005,this._dimensions.y+=t*(this.light.dimensions.y-this.holo.y)*this.face.height*.005,this}get dimensions(){return this.relativeToFace().relativeToLight(this.settings.gradient_to_light)._dimensions}}class n{constructor(t,e,i,s,n){this.element=t,this.face=e,this.light=i,this.holo=s,this.settings=n,this._dimensions={x:0,y:0}}relativeToFace(t){return this._dimensions.x+=t*(this.face.dimensions.x*(this.element.offsetWidth/window.innerWidth)-this.element.offsetWidth/2),this._dimensions.x+=t*(this.face.dimensions.y*(this.element.offsetHeight/window.innerHeight)-this.element.offsetHeight/2),this}relativeToLight(t){return this._dimensions.x+=t*(this.light.dimensions.x-this.holo.x)*this.face.width*-2e-4,this._dimensions.y+=t*(this.light.dimensions.y-this.holo.y)*this.face.height*-2e-4,this}get dimensions(){return this.relativeToFace(this.settings.shadow_to_face).relativeToLight(this.settings.shadow_to_light)._dimensions}}class o{constructor(t){this.resizedDetections=t,this._dimensions={x:this.setX(),y:this.setY()},this._width=this.setWidth(),this._height=this.setHeight()}setX(){const t=this.resizedDetections[0].alignedRect.box.x,e=this.resizedDetections[0].alignedRect.box.width;return window.innerWidth-(t+e/2)}setY(){return this.resizedDetections[0].alignedRect.box.y+this.resizedDetections[0].alignedRect.box.height/4}setWidth(){return this.resizedDetections[0].alignedRect.box.width}setHeight(){return this.resizedDetections[0].alignedRect.box.height}get dimensions(){return this._dimensions}get width(){return this._width}get height(){return this._height}}class a{constructor(t,e,i,s){this.element=t,this.rect=this.element.getBoundingClientRect(),this._dimensions={x:this.rect.left+this.element.offsetWidth/2,y:this.rect.top+this.element.offsetHeight/2},this.face=new o(e),this.light=i,this.settings=s}get dimensions(){return this._dimensions}getGradient(){const t=new s(this.element,this.face,this.light,this.dimensions,this.settings);return`radial-gradient(farthest-corner at ${t.dimensions.x}px ${t.dimensions.y}px, ${t.lightened_background_color} 0%, ${t.background_color} 100%)`}getShadow(t,e){const i=new n(this.element,this.face,this.light,this.dimensions,this.settings);return`${i.dimensions.x}px ${i.dimensions.y}px 13px black`}}class r{constructor(t=600,e=300){this._dimensions={x:t,y:e}}get dimensions(){return this._dimensions}}class h{constructor(){this.reset()}reset(){this.gradient_to_light=.2,this.shadow_to_face=.08,this.shadow_to_light=.08,this.light_x=420,this.light_y=0,this.lighten_amp=.45,this.interval_value=50}}const l=new class{constructor(){this.loadModels(),this.video=this.initializeVideo(),this.settings=new h,this.displaySize={width:window.innerWidth,height:window.innerHeight},this.interval_started=!1,this.isMobileDevice()&&(this.settings.interval_value=100),this.interval_value=this.settings.interval_value,this.start()}initializeVideo(){const t=this.createVideoElement();return document.body.prepend(t),this.startVideo(),t}createVideoElement(){const t=document.createElement("video");return t.muted=!0,t.playsinline=!0,t.autoplay=!0,t.height=window.innerHeight,t.width=window.innerWidth,t.style.position="fixed",t.style.width="100%",t.style.visibility="hidden",t}startVideo(){navigator.mediaDevices.getUserMedia({video:!0,audio:!1}).then((t=>{this.video.srcObject=t}),(t=>console.error(t)))}async loadModels(){try{await faceapi.nets.tinyFaceDetector.load("/models/tiny_face_detector"),await faceapi.nets.faceLandmark68Net.load("/models/face_landmark_68"),console.log("models loaded successfully!")}catch(t){console.error("models failed to load")}return!0}isMobileDevice(){let t=!1;var e;return e=navigator.userAgent||navigator.vendor||window.opera,(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(e)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(e.substr(0,4)))&&(t=!0),t}startInterval(){this.interval_started||(setInterval((async()=>{const t=await faceapi.detectAllFaces(this.video,new faceapi.TinyFaceDetectorOptions).withFaceLandmarks(),e=faceapi.resizeResults(t,this.displaySize);if(void 0===e[0])return;const i=new r(this.settings.light_x,this.settings.light_y);document.querySelectorAll(".holo").forEach((t=>{const s=new a(t,e,i,this.settings);t.style.backgroundImage=s.getGradient(),t.style.boxShadow=s.getShadow()}))}),this.interval_value),this.interval_started=!0)}start(){this.video.setAttribute("playsinline",!0),this.video.addEventListener("play",(()=>{this.startInterval()})),document.addEventListener("mousedown",(()=>{this.startInterval()})),document.addEventListener("scroll",(()=>{this.startInterval()}))}};return e})()));