200 http durum kodu, standart bir başarılı HTTP sunucu yanıtıdır. Bu, istemcinin isteğinin (örneğin, bir tarayıcıdan) başarıyla işlendiği ve sunucunun istenen verileri ilettiği anlamına gelir.
Kullanıcı içeriği hatasız alır ve sayfa veya uygulama düzgün çalışır. Kod 200'e veri eşlik ediyorsa, tarayıcı veya program bunu işler ve kullanıcıya görüntüler.
GET / HTTP/1.1 Host: kt211.com Accept: */* User-Agent: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; [email protected])
<!DOCTYPE html> <html data-wf-domain="www.kt211.com" data-wf-page="5ed515f3ca38aa5c79683b80" data-wf-site="5ea69b4027484b2df2b45806" lang="en" > <head> <meta charset="utf-8" /> <title>KT211 LABS - NEXT GEN HUMAN CARE</title> <link rel="icon" type="image/png" href="favicon.png"> <meta content="width=device-width, initial-scale=1" name="viewport" /> <link rel="stylesheet" href="./css/style.css" /> <script type="text/javascript"> !(function (o, c) { var n = c.documentElement, t = " w-mod-"; (n.className += t + "js"), ("ontouchstart" in o || (o.DocumentTouch && c instanceof DocumentTouch)) && (n.className += t + "touch"); })(window, document); </script> <script type="text/javascript"> (function (i, s, o, g, r, a, m) { i["GoogleAnalyticsObject"] = r; (i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments); }), (i[r].l = 1 * new Date()); (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]); a.async = 1; a.src = g; m.parentNode.insertBefore(a, m); })( window, document, "script", "https://www.google-analytics.com/analytics.js", "ga" ); ga("create", "UA-170294967-1", "auto"); ga("send", "pageview"); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/EaselPlugin.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js" ></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/locomotivemtl/locomotive-scroll/dist/locomotive-scroll.min.css" /> <script src="./javascript/cursor/index.js"></script> <script> window.isMobile = false; if (/Mobi|Android/i.test(navigator.userAgent)) { window.isMobile = true; } window.isSafari = false; var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf("safari") != -1) { if (ua.indexOf("chrome") > -1) { } else { window.isSafari = true; } } class SoundToggler { constructor() { this.bind(); this.container = document.querySelector(".soundtoggler"); this.sTCanvas = document.createElement("canvas"); this.container.appendChild(this.sTCanvas); this.ctx = this.sTCanvas.getContext("2d"); this.sTWidth = this.ctx.canvas.width = this.container.offsetWidth * dpi; this.sTHeight = this.ctx.canvas.height = this.container.offsetHeight * dpi; this.ctx.lineWidth = dpi; this.soundFlag = false; this.amp = { value: 3, }; this.wL = 0.1; this.speed = 0.003; this.container.addEventListener("click", this.click); window.addEventListener("resize", this.onResize); RAF.subscribe("sineUpdate", this.update); this.autoPlay = true; if (window.isSafari) this.autoPlay = false; console.log( this.autoPlay, JSON.parse(window.localStorage.getItem("audioWasPlaying")) ); if ( this.autoPlay && JSON.parse(window.localStorage.getItem("audioWasPlaying")) ) { this.moveFlag = false; window.addEventListener("mousemove", this.mouseMove); } } mouseMove() { if (!this.autoPlay) return; if (this.moveFlag) return; this.moveFlag = true; console.log(window.localStorage.getItem("audioWasPlaying")); this.click(); } update() { this.ctx.clearRect(0, 0, this.sTWidth, this.sTHeight); this.ctx.beginPath(); let inc = 0; while (inc < this.sTWidth) { if (inc == 0) this.ctx.moveTo( inc, this.sTHeight / 2 + this.amp.value * dpi * Math.sin( (inc * (1 / (this.container.offsetWidth * 0.01)) * this.wL) / dpi + Date.now() * this.speed ) ); else this.ctx.lineTo( inc, this.sTHeight / 2 + this.amp.value * dpi * Math.sin( (inc * (1 / (this.container.offsetWidth * 0.01)) * this.wL) / dpi + Date.now() * this.speed ) ); inc += 2; } this.ctx.stroke(); this.ctx.closePath(); } started() { this.soundFlag = this.soundFlag == true ? false : true; let target = this.soundFlag == true ? 30 : 3; TweenLite.to(this.amp, 0.5, { value: target, }); } click() { let volTarget = this.soundFlag == true ? 0 : 1; let target = this.soundFlag == true ? 3 : 30; if (this.soundFlag == false) soundReactor.audio.currentTime = window.localStorage.getItem("audioTime") || 0; if (soundReactor.audio.duration > 0 && !soundReactor.audio.paused) { window.localStorage.setItem("audioWasPlaying", false); } else { soundReactor.audio.volume = 0; soundReactor.audio.play(); window.localStorage.setItem("audioWasPlaying", true); } TweenLite.to(this.amp, 0.5, { value: target, }); TweenLite.to(soundReactor.audio, 0.5, { volume: volTarget, onComplete: function () { if (volTarget == 0) { window.localStorage.setItem( "audioTime", soundReactor.audio.currentTime ); soundReactor.audio.pause(); } }, }); this.soundFlag = this.soundFlag == true ? false : true; } onResize() { this.sTWidth = this.ctx.canvas.width = this.container.offsetWidth * dpi; this.sTHeight = this.ctx.canvas.height = this.container.offsetHeight * dpi; this.ctx.lineWidth = dpi; } bind() { this.started = this.started.bind(this); this.update = this.update.bind(this); this.click = this.click.bind(this); this.onResize = this.onResize.bind(this); this.mouseMove = this.mouseMove.bind(this); } } class SoundReactor { constructor(audioUrl, pageType) { this.pageType = pageType; this.ctx; this.audio; this.audioSource; this.analyser; this.fdata = []; this.url = audioUrl; this.bind(); } init() { var AudioContext = window.AudioContext || // Default window.webkitAudioContext || // Safari and old versions of Chrome false; this.ctx = new AudioContext(); this.audio = new Audio(this.url); this.audio.loop = true; if (this.pageType != "home") return; this.audioSource = this.ctx.createMediaElementSource(this.audio); this.analyser = this.ctx.createAnalyser(); this.analyser.smoothingTimeConstant = 0.4; this.audioSource.connect(this.analyser); this.audioSource.connect(this.ctx.destination); this.fdata = new Uint8Array(this.analyser.frequencyBinCount); } update() { this.analyser.getByteFrequencyData(this.fdata); } bind() { this.update = this.update.bind(this); this.init = this.init.bind(this); } } class RAFClass { constructor() { this.bind(); this.callbacks = []; this.dt = 0.15; this.lastF = Date.now(); this.render(); } subscribe(name, callback) { this.callbacks.push({ name: name, callback: callback, }); } unsubscribe(name) { this.callbacks.forEach((item, i) => { if (item.name == name) this.callbacks.splice(i, i + 1); }); } render() { requestAnimationFrame(this.render); this.callbacks.forEach((item) => { item.callback(); }); this.dt = Date.now() - this.lastF; this.lastF = Date.now(); } bind() { this.subscribe = this.subscribe.bind(this); this.unsubscribe = this.unsubscribe.bind(this); this.render = this.render.bind(this); } } const RAF = new RAFClass(); </script> <style> *, *::after, *::before { box-sizing: border-box; } .nav { z-index: 999; } .nav-trigger { pointer-events: none; } body { -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior: none; } /*Disable Text Selection */ @media (min-width: 991px) { * { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } } input, textarea { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } /*Remove Scrollbar */ ::-webkit-scrollbar { -ms-overflow-style: none; display: none; overflow: -moz-scrollbars-none; scrollbar-width: none; -ms-overflow-style: none; -ms-overflow-style: -ms-autohiding-scrollbar; } .burgercontainer canvas { width: 100%; height: 100%; } .soundtoggler canvas { width: 100%; height: 100%; } .menu { background-color: transparent; } .nav-trigger { pointer-events: none; } .nav-trigger.on { pointer-events: all; } .burgerclickablein, .burgerclickableout { display: none; } .burgerclickablein.on, .burgerclickableout.on { display: block; } .trigger.burgercontainer { pointer-events: none; } .cursorcontainer canvas { width: 100%; height: 100%; } .cursorcontainer { pointer-events: none; display: block !important; } </style> <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script> <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> <script src="https://threejs.org/examples/js/libs/fflate.min.js"></script> <script src="https://rawcdn.githack.com/mrdoob/three.js/350f0a021943d6fa1d039a7c14c303653daa463f/examples/js/loaders/FBXLoader.js"></script> <style> .l-head { -webkit-text-stroke: 0.8px #e5e3dc; -webkit-text-fill-color: transparent; } @media (max-width: 479px) { .l-head { -webkit-text-stroke: 0.4px white; -webkit-text-fill-color: transparent; } } .text-stroke, .text-stroke-2 { -webkit-text-stroke: 0.8px #e5e3dc; -webkit-text-fill-color: transparent; } </style> </head> <body style=" background-image: linear-gradient( to right top, #c33764, #a62a6f, #822675, #572676, #1d2671 ); " class="body" > <div data-w-id="273e3f31-cccf-7d2e-0a05-3a1511298408" style="display: flex; opacity: 1" class="load hometoggler" > <div class="l-grid"> <div class="l-item"> <h2 data-w-id="d6eea212-66b2-3d6a-310a-5c83f651747d" style=" -webkit-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -moz-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -ms-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); " class="l-head" > We are KT211 labs. </h2> </div> <div class="l-item"> <figure href="#" data-w-id="5107b750-8da7-64a0-34db-568d4b281e25" style=" -webkit-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -moz-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -ms-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); " class="l-inner" > <div href="#" class="text-wrap"> <h2 class="text-stroke">KT211.</h2> <h2 data-w-id="b0944d6f-35a7-5546-be9d-2d2725bebcc3" style="width: 0%" class="text-fill" > KT211. </h2> </div> </figure> <h2 data-w-id="b00f289f-5c39-50fd-76c6-c319ed381600" style=" -webkit-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -moz-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -ms-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); " class="l-head" > developing </h2> </div> <div class="l-item"> <h2 data-w-id="d35cc5b7-503c-49c5-9269-0f1d23f9e64f" style=" -webkit-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -moz-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -ms-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); " class="l-head" > scientific </h2> </div> <div class="l-item"> <h2 data-w-id="7ebafc6a-2ec8-7876-a2e1-e77c6f1df47a" style=" -webkit-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -moz-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -ms-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); " class="l-head" > vitality protecting </h2> </div> <div class="l-item"> <figure href="#" data-w-id="68fc1a32-709d-822f-092d-96a1e8b833cd" style=" -webkit-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -moz-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -ms-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); " class="l-inner-2" > <div href="#" class="text-wrap-2"> <h2 class="text-stroke-2">humancare</h2> <h2 data-w-id="68fc1a32-709d-822f-092d-96a1e8b833d1" style="width: 0%" class="text-fill-2" > humancare </h2> </div> </figure> </div> </div> <div data-w-id="97773331-1b50-44d2-f77f-7dc6847bf7bf" style="display: none" class="l-over hometoggler" > <div data-w-id="493e75ba-19fb-2e15-f9be-b7a5ee303bf6" style="opacity: 0" class="l-text-w w-clearfix" > <div class="l-text">Click anywhere</div> <div class="l-arrow w-embed"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 10"> <defs /> <path fill="#e2e2dd" d="M59.2,9.6V6.2h-58v-2c0,0,0,0,0,0h58V0.7L67,5.1L59.2,9.6z" /> </svg> </div> <div class="l-text lt-r">to start</div> <div class="l-text lm">to start</div> </div> </div> </div> <a rel="noopener" aria-label="sound" href="#" class="sound soundtoggler w-inline-block" ></a> <a rel="noopener" aria-label="trigger" href="#" class="trigger burgerclickablein w-inline-block" ></a> <div class="trigger burgerclickableout"></div> <nav class="nav"> <a targetcolor="#0D0D0D" rel="noopener" aria-label="logo" href="/" aria-current="page" class="nav-logo pagelink w-inline-block w--current" > <div class="logo w-embed"> <img src="./logo.png" alt="error" /> </div> </a> <div class="nav-trigger"> <div class="nav-menu burgercontainer"> <div class="menu"> <div class="menu-grid w-clearfix"> <div class="menu-col"> <div class="menu-item m1"> <div data-w-id="7f415ce8-136e-436c-c678-47a776f3bb93" class="menu-bl" > <div class="menu-ci"></div> <div class="menu-no">I</div> </div> <a rel="noopener" draggable="false" targetcolor="#0A0A0A" data-w-id="7f415ce8-136e-436c-c678-47a776f3bb97" href="./index.html" aria-current="page" class="menu-li menulink w-inline-block w--current" > <h2 class="m-head">index</h2> </a> </div> <div class="menu-item m2"> <div data-w-id="7f415ce8-136e-436c-c678-47a776f3bb9b" class="menu-bl" > <div class="menu-ci"></div> <div class="menu-no">II</div> </div> <a rel="noopener" draggable="false" targetcolor="#E5E3DC" data-w-id="7f415ce8-136e-436c-c678-47a776f3bb9f" href="./pages/formulations.html" class="menu-li menulink w-inline-block" > <h2 class="m-head">formulations</h2> </a> </div> <div class="menu-item m3"> <div data-w-id="7f415ce8-136e-436c-c678-47a776f3bba3" class="menu-bl" > <div class="menu-ci"></div> <div class="menu-no">iii</div> </div> <a rel="noopener" draggable="false" targetcolor="#E5E3DC" data-w-id="7f415ce8-136e-436c-c678-47a776f3bba7" href="./pages/about.html" class="menu-li menulink w-inline-block" > <h2 class="m-head">about</h2> </a> </div> </div> <div class="menu-col mc-2"> <div class="menu-asw asw2 w-clearfix"> <div class="menu-as"> <a rel="noopener" draggable="false" targetcolor="#E5E3DC" data-w-id="7f415ce8-136e-436c-c678-47a776f3bbb2" href="./pages/contact.html" class="menu-ti menulink" >Contact</a > </div> <div class="menu-as ma2"> </div> </div> <div class="underline w-embed"> <style> @media (min-width: 991px) { .menu-as::after { content: ""; position: absolute; width: 100%; transform: scaleX(0); height: 1px; top: calc(3.5vw + 0.1vw); bottom: 0; left: 0; background-color: #c33764; transform-origin: bottom right; transition: transform 0.35s ease-out; } .menu-as:hover::after { transform: scaleX(1); transform-origin: bottom left; } } @media (min-width: 1920px) { .menu-as::after { content: ""; position: absolute; width: 100%; transform: scaleX(0); height: 1px; top: calc(6vh + 0.1vh); bottom: 0; left: 0; background-color: #c33764; transform-origin: bottom right; transition: transform 0.35s ease-out; } .menu-as:hover::after { transform: scaleX(1); transform-origin: bottom left; } } </style> </div> </div> </div> </div> </div> </div> </nav> <div class="cursor cursorcontainer"></div> <div class="rotate"> <div class="text-block-9">Rotate your device, please.</div> </div> <div class="hero"> <div class="h-row"> <div class="h-block hb-1"> <div data-w-id="2fa7b419-afae-1137-067d-d93e6ca9f3aa" style=" -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); " class="h-slant hh1 w-embed" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 154 165"> <defs /> <g fill="#0a0a0a"> <path d="M10.7 60.4l.2-1.4 19.2-20h1.7l-2.9 17.9h16.3l-.8 3.5H28.3l-13.2 80.4c-1.4 8.5.4 13.2 5.6 13.2 4.1 0 7-3.1 9.9-7.2l1.4 1.2c-3.3 7.2-8.7 14-17.3 14-9.9 0-12.2-9.1-10.1-21.5l13.2-80H10.7zM46.2 159.8H32.6l.2-1.2 3.7-13.8L56.9 19.2l.8-13.6 12.4-2.3-1.4 8.3L55.1 95.3c6.2-19.8 14.8-40.2 27.8-40.2 8.7 0 12.8 10.3 10.3 25.8l-11.3 63.9.4 13.8-.2 1.2H67.9l.2-1.2 3.1-13.6 11.6-65c2.3-11.5-.6-15.3-4.7-15.3-10.3 0-19.2 25.2-26 48.1l-5.2 32-.6 13.8L46.2 159.8zM135.1 141.5c-5.2 11.1-12.4 20.4-23.3 20.4-10.7 0-18.2-8.9-18.2-30.9 0-40.4 24.3-75.9 42.5-75.9 7.8 0 12.2 5.8 12.2 14.4 0 16.5-16.7 36.1-42.1 39.8-.6 5.2-1 10.9-1 16.5 0 20.4 4.7 26.4 12.2 26.4 6.8 0 12-4.7 16.1-11.6L135.1 141.5zM106.6 106.8c19.8-4.3 31.6-21.4 31.6-38.1 0-7-2.3-9.7-5.6-9.7C123.5 59 110.6 78 106.6 106.8z" /> </g> </svg> </div> </div> <div class="h-wrap w-clearfix"> <div data-w-id="34cae05a-a97d-a721-3d2e-8d2fd4becce7" style=" -webkit-transform: translate3d(0, 0%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -moz-transform: translate3d(0, 0%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -ms-transform: translate3d(0, 0%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transform: translate3d(0, 0%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); " class="h-block hb" > <h2 data-w-id="34cae05a-a97d-a721-3d2e-8d2fd4becce8" style=" -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); " class="h-head" > PURity </h2> </div> <div data-w-id="1092efd4-5d8d-ac97-e50f-57f4f85142b8" style=" -webkit-transform: translate3d(0, 0%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -moz-transform: translate3d(0, 0%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -ms-transform: translate3d(0, 0%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transform: translate3d(0, 0%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); " class="h-block hb-side" > <h2 class="h-head">oddity</h2> </div> </div> </div> <div class="h-row"> <div class="h-block hb-3"> <div data-w-id="820aa623-8263-552b-e2c8-c5f2721ab56a" style=" -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); " class="h-slant w-embed" > <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 92 177" xml:space="preserve" > <defs /> <path d="M51.8,81.1c0,28.6-13.3,59.7-30.3,59.7c-9.3,0-15.9-10.7-15.9-29.7c0-28.4,13.3-59.6,30.2-59.6 C45,51.5,51.8,62.2,51.8,81.1z M16,97.6c-0.8,7.1-1.3,13.5-1.3,19.3c0,15.1,3.7,20.4,7.8,20.4c9.3,0,15.9-20,19-42.7 c0.8-7.1,1.3-13.5,1.3-19.3C42.8,60,39,54.8,35,54.8C25.7,54.8,19.1,74.7,16,97.6z" class="st1" /> <path d="M61.1,55.9h-5.5l0.2-1.1l5.7-1.8h0.2l2.6-15.9c2.6-15.1,8-29.7,19.5-29.7c2.6,0,4.4,0.6,5,1.1l-1.8,9.7h-0.5 c-0.5-1.1-1.5-2.8-2.6-4.7s-2.4-2.9-4.2-2.9c-3.4,0-5.4,4.2-5.5,12.5c-0.2,4.1-0.8,11.2-2.6,22.9l-1.1,7h10.4l-0.8,2.9H69.9 l-14.1,85.7c-2.6,15.1-8,29.9-19.5,29.9c-2.4,0-4.5-0.6-5.2-1.1l1.9-9.7h0.5c0.8,2.4,3.4,7.6,6.8,7.6c3.4,0,5.5-4.2,5.7-12.5 c0.2-4.1,1-12.2,2.4-22.7L61.1,55.9z" class="st1" /> </svg> </div> </div> <div class="h-wrap hw w-clearfix"> <div data-w-id="916dad6d-39eb-c8f9-bf89-5c01469b0e2b" style=" -webkit-transform: translate3d(0, 0%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -moz-transform: translate3d(0, 0%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -ms-transform: translate3d(0, 0%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transform: translate3d(0, 0%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); " class="h-block hb-2" > <h1 data-w-id="916dad6d-39eb-c8f9-bf89-5c01469b0e2c" style=" -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); " class="h-head" > youth </h1> </div> <div data-w-id="45f9e513-229f-1592-77fd-d5ba4b7f1823" style=" -webkit-transform: translate3d(0, 0%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -moz-transform: translate3d(0, 0%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -ms-transform: translate3d(0, 0%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transform: translate3d(0, 0%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); " class="h-block hb-side2" > <h1 class="h-head">sound</h1> </div> </div> </div> <div targetColor="#E2E2DD" draggable="false" rel="noopener" data-w-id="3318629a-9cee-96f2-7e7c-5930d5c45d61" class="h-quote-w w-clearfix" > <div style=" -webkit-transform: translate3d(0, 150%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -moz-transform: translate3d(0, 150%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -ms-transform: translate3d(0, 150%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transform: translate3d(0, 150%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); " class="h-quote" > "welcome to a new era " </div> </div> <div targetColor="#E2E2DD" draggable="false" rel="noopener" data-w-id="9f616e5c-fd93-dce6-429e-a0e1d5ee9f1b" class="h-start-w" > <div class="h-start-i"> <a href="#" class="h-start pagelink">Start / Explore</a> <div class="underline w-embed"> <style> .h-start::after { content: ""; position: absolute; width: 100%; transform: scaleX(0); height: 1px; top: calc(2.2vw + 0.1vw); bottom: 0; left: 0; background-color: #0d0d0d; transform-origin: bottom right; transition: transform 0.35s ease-out; } .h-start:hover::after { transform: scaleX(1); transform-origin: bottom left; } @media (min-width: 1920px) { .h-start::after { content: ""; position: absolute; width: 100%; transform: scaleX(0); height: 1px; top: calc(4.2vh + 0.1vw); bottom: 0; left: 0; background-color: #0d0d0d; transform-origin: bottom right; transition: transform 0.35s ease-out; } .h-start:hover::after { transform: scaleX(1); transform-origin: bottom left; } } </style> </div> </div> <div class="html-embed-8 w-embed"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97 72"> <defs /> <path fill="#191919" d="M57.2,1.4l-1.9,0.3l-0.9,0.2l0,0l-0.9,0.2C56.9,20.8,66.9,29.7,76.2,34H1.3v0.9v1.9v0.9h75.3c-9.7,4.2-20.2,13.2-23.2,31.9l1.9,0.3l1,0.2l0,0l0.9,0.1C61.7,41.5,84.8,38,92.5,37.7c1.7,0.1,2.7,0,2.8,0l-0.1-0.9l0,0v-0.5l0.1-2.4c0,0-0.6,0-1.5,0h-2.5C82.7,33.4,62.2,29.3,57.2,1.4z" /> </svg> </div> </div> <div style="filter: invert(0%)" class="webglholder"></div> </div> <div class="cookie-c"> <div class="cookie-t"> This website use <a href="/cookie" rel="noopener" target="_blank" class="cokkie-li" >cookies</a > . <br /> By continuing to browse <br />you accept their use. </div> <div class="confirm-w"> <a href="#" class="confirm">OK</a> </div> </div> <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5ea69b4027484b2df2b45806" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous" ></script> <script src="https://uploads-ssl.webflow.com/5ea69b4027484b2df2b45806/js/webflow.fcbda2e35.js" type="text/javascript" ></script> <!--[if lte IE 9 ]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script ><![endif]--> <script> let dpi = window.devicePixelRatio || 1; window.onload = function () { !(function () { const e = document.querySelectorAll(".pagelink"), t = document.createElement("canvas"); (t.style = "position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 2000;\n pointer-events: none;"), document.body.appendChild(t); const n = t.getContext("2d"); let o = (n.canvas.width = window.innerWidth), i = (n.canvas.height = window.innerHeight), a = "#FFFF00", l = 1.2, u = !1, c = { value: 1, }, d = { value: 1, }; function v(e) { e.preventDefault(); let t = this.getAttribute("href"); (a = "#E5E3DC"), (c.value = 1), (d.value = 1), (u = !1), setTimeout(function () { document.location.href = t; }, 1e3 * l), null == t && (t = "/"), window.isMobile || TweenLite.to(soundReactor.audio, l, { volume: 0, }), TweenLite.to(d, l, { value: 0, ease: Power4.easeInOut, onComplete: function () { u = !0; }, }), TweenLite.to(c, l, { value: 0, ease: Power4.easeInOut, delay: l, onComplete: function () { window.localStorage.setItem( "audioTime", soundReactor.audio.currentTime ); }, }); } RAF.subscribe("overlayUpdate", function () { n.clearRect(0, 0, o, i), n.beginPath(), (n.fillStyle = a), n.rect(0, 0, o, i), u && n.fill(), n.closePath(), n.beginPath(), n.moveTo(0, i * c.value), n.quadraticCurveTo( o / 2, i * c.value + 300 * Math.sin(c.value * Math.PI), o, i * c.value ), n.lineTo(o, i * d.value), n.quadraticCurveTo( o / 2, i * d.value + -300 * Math.sin(d.value * Math.PI), 0, i * d.value ), n.lineTo(0, 0), n.closePath(), (n.fillStyle = "#FFFFFF"), n.fill(); }), e.forEach((e) => { e.addEventListener("click", v); }); })(); }; </script> <script> if ($(window).width() >= 991) { function initSmoothScroll() { let o, e = document.querySelectorAll(".parazoom"), t = 0, i = []; e.forEach((o) => { i.push({ el: o, width: o.width, height: 0, }); }), setTimeout(function () { window.scrollTo(0, 0); }, 100), console.log(window.scrollY), (window.onbeforeunload = function () { window.scrollTo(0, 0); }), (o = navigator.userAgent.toLowerCase().indexOf("firefox") > -1 ? new LocomotiveScroll({ el: document.querySelector("[data-scroll-container]"), smooth: !0, multiplier: 5, }) : new LocomotiveScroll({ el: document.querySelector("[data-scroll-container]"), smooth: !0, })).on("scroll", function (o) { (t = o.scroll.y), i.forEach((e) => { console.log(e.height); let i = e.el.getAttribute("zoomIntensity") || 0.3; (e.el.style.width = e.width + e.width * (t / o.limit) * i + "px"), (e.el.style.height = e.height + e.height * (t / o.limit) * i + "px"); }); }), o.on("call", function (o) { console.log(o); }), window.addEventListener("resize", function () { e.forEach((o) => { (o.el = o), (o.width = o.offsetWidth), (o.height = o.offsetHeight); }); }); } const o = document.querySelector(".app"); null != o && (o.style.position = "fixed"), document.addEventListener("DOMContentLoaded", function () { setTimeout(function () { initSmoothScroll(), console.log("init"); }, 1e3); }); } </script> <script> const burgerBP = [ { sWidth: 1920, burgerRad: 60 * dpi, burgerMargin: 100 * dpi, burgerBigRad: 90 * dpi, burgerBigMargin: 140 * dpi, }, { sWidth: 991, burgerRad: 48 * dpi, burgerMargin: 90 * dpi, burgerBigRad: 80 * dpi, burgerBigMargin: 120 * dpi, }, { sWidth: 479, burgerRad: 30 * dpi, burgerMargin: 50 * dpi, burgerBigRad: 60 * dpi, burgerBigMargin: 100 * dpi, }, { sWidth: 0, burgerRad: 30 * dpi, burgerMargin: 50 * dpi, burgerBigRad: 60 * dpi, burgerBigMargin: 100 * dpi, }, ]; function burgerInit() { let e = !0; const r = new SimplexNoise(); let i = { burgerRad: 40, burgerMargin: 60, burgerBigRad: 80, burgerBigMargin: 120, burgerPosition: { x: window.innerWidth * dpi, y: 0, }, circleNumber: 2, noiseAmplitude: 5, noiseDetail: 0.5, noiseSpeed: 0.001, buttonAlpha: 1, }, t = !0; burgerBP.forEach((e, r) => { t && window.innerWidth > e.sWidth && ((i.burgerRad = e.burgerRad), (i.burgerMargin = e.burgerMargin), (i.burgerBigRad = e.burgerBigRad), (i.burgerBigMargin = e.burgerBigMargin), (t = !1)); }), (i.burgerPosition.x = window.innerWidth * dpi - i.burgerMargin), (i.burgerPosition.y = i.burgerMargin); let a = JSON.parse(JSON.stringify(i)); const n = document.querySelectorAll(".menulink"); let u = "#FFAAFF", o = !1; const g = document.querySelector(".burgercontainer"), s = document.querySelector(".burgerclickablein"), l = document.querySelector(".burgerclickableout"); s.classList.add("on"); const d = document.createElement("canvas"); g.appendChild(d); const b = d.getContext("2d"); let c = (b.canvas.width = g.offsetWidth * dpi), v = (b.canvas.height = g.offsetHeight * dpi), w = 20 * dpi, h = 5 * dpi, p = [ { value: 10 - w / 2, }, { value: -h / 2, }, { value: w / 2, }, { value: -h / 2, }, ], P = [ { value: -w / 2, }, { value: h / 2, }, { value: w / 2, }, { value: h / 2, }, ], M = JSON.parse(JSON.stringify(p)), R = JSON.parse(JSON.stringify(P)); const f = 1.2; let T = !1, m = { value: 0, }, L = { value: 1, }, y = { value: 0, }; function I() { !T && e ? (s.classList.remove("on"), (e = !1), (T = !0), (i.burgerMargin = i.burgerBigMargin), TweenLite.to(i.burgerPosition, f, { x: c - i.burgerMargin, y: i.burgerMargin, ease: Power4.easeInOut, onComplete: function () { setTimeout(function () { l.classList.add("on"), (e = !0); }, 500); }, }), TweenLite.to(m, f, { value: 255, ease: Power4.easeInOut, }), TweenLite.to(y, f, { value: 1, ease: Power4.easeInOut, }), TweenLite.to(i, f, { burgerRad: i.burgerBigRad, ease: Power4.easeInOut, }), TweenLite.to(p[0], f, { value: -w / 2, ease: Power4.easeInOut, }), TweenLite.to(p[1], f, { value: +w / 2, ease: Power4.easeInOut, }), TweenLite.to(p[2], f, { value: +w / 2, ease: Power4.easeInOut, }), TweenLite.to(p[3], f, { value: -w / 2, ease: Power4.easeInOut, }), TweenLite.to(P[0], f, { value: -w / 2, ease: Power4.easeInOut, }), TweenLite.to(P[1], f, { value: -w / 2, ease: Power4.easeInOut, }), TweenLite.to(P[2], f, { value: +w / 2, ease: Power4.easeInOut, }), TweenLite.to(P[3], f, { value: +w / 2, ease: Power4.easeInOut, }), document.querySelector(".nav-trigger").classList.add("on")) : e && (l.classList.remove("on"), (e = !1), (T = !1), setTimeout(function () { (i.burgerMargin = a.burgerMargin), TweenLite.to(i.burgerPosition, f, { x: c - i.burgerMargin, y: i.burgerMargin, ease: Power4.easeInOut, onComplete: function () { setTimeout(function () { s.classList.add("on"), (e = !0); }, 500); }, }), TweenLite.to(m, f, { value: 0, ease: Power4.easeInOut, }), TweenLite.to(y, f, { value: 0, ease: Power4.easeInOut, }), TweenLite.to(i, f, { burgerRad: a.burgerRad, ease: Power4.easeInOut, }), p.forEach((e, r) => { TweenLite.to(e, f, { value: M[r].value, ease: Power4.easeInOut, }); }), P.forEach((e, r) => { TweenLite.to(e, f, { value: R[r].value, ease: Power4.easeInOut, }); }), document.querySelector(".nav-trigger").classList.remove("on"); }, 500)); } let B = 2e3; function O(e) { e.preventDefault(); let r = this.getAttribute("href"); console.log(r), setTimeout(function () { document.location.href = r; }, 1e3 * f), (u = this.getAttribute("targetcolor")), (o = !0), (T = !1), null == r && (r = "/"), TweenLite.to(i, 0.5, { buttonAlpha: 0, }), TweenLite.to(y, f, { value: 0, ease: Power4.easeInOut, onComplete: function () { null != soundReactor.audio && window.localStorage.setItem( "audioTime", soundReactor.audio.currentTime ); }, }), null != soundReactor.audio && TweenLite.to(soundReactor.audio, f, { volume: 0, }); } s.addEventListener("click", I), l.addEventListener("click", I), window.isMobile || window.addEventListener("mousemove", function (e) { let r = [e.clientX, e.clientY], t = Math.sqrt( Math.pow(i.burgerPosition.x - r[0], 2) + Math.pow(i.burgerPosition.y - r[1], 2) ); t <= i.burgerRad && B > i.burgerRad && ((document.body.style.cursor = "pointer"), (clickFlag = !0), d.classList.add("on"), TweenLite.to(L, 0.2, { value: 0, })), t >= i.burgerRad && B < i.burgerRad && ((document.body.style.cursor = "inherit"), (clickFlag = !1), d.classList.remove("on"), TweenLite.to(L, 0.2, { value: 1, })), (B = t); }), window.addEventListener("resize", function () { (t = !0), burgerBP.forEach((e, r) => { t && window.innerWidth > e.sWidth && ((i.burgerRad = e.burgerRad), (i.burgerMargin = e.burgerMargin), (i.burgerBigRad = e.burgerBigRad), (i.burgerBigMargin = e.burgerBigMargin), (t = !1)); }), (a.burgerMargin = i.burgerMargin), (a.burgerRad = i.burgerRad), T && ((i.burgerMargin = i.burgerBigMargin), (i.burgerRad = i.burgerBigRad)), (i.burgerPosition.x = window.innerWidth - i.burgerMargin), (i.burgerPosition.y = i.burgerMargin), (c = b.canvas.width = g.offsetWidth * dpi), (v = b.canvas.height = g.offsetHeight * dpi), (i.burgerPosition.x = c - i.burgerMargin); }), n.forEach((e) => { e.addEventListener("click", O); }), RAF.subscribe("burgerUpdate", function () { b.clearRect(0, 0, c, v), (b.lineWidth = dpi), b.beginPath(), (b.fillStyle = u), b.rect(0, 0, c, v), o && b.fill(), b.closePath(), (b.fillStyle = "#0A0A0A"), b.beginPath(), b.moveTo(0, v * y.value), T ? b.quadraticCurveTo( c / 2, v * y.value + 300 * Math.sin(y.value * Math.PI), c, v * y.value ) : b.quadraticCurveTo( c / 2, v * y.value - 300 * Math.sin(y.value * Math.PI), c, v * y.value ), b.lineTo(c, 0), b.lineTo(0, 0), b.closePath(), (b.fillStyle = "#0A0A0A"), b.fill(), (function () { for (let t = 0; t < i.circleNumber; t++) { b.beginPath(); for (let a = 0; a < 2 * Math.PI; a += (2 * Math.PI) / 50) { let n = Math.cos(a), u = Math.sin(a); var e = r.noise3D( n * i.noiseDetail, u * i.noiseDetail, Date.now() * i.noiseSpeed + t ); let o = i.burgerRad + e * i.noiseAmplitude * L.value; (n = n * o + i.burgerPosition.x), (u = u * o + i.burgerPosition.y), 0 == a ? b.moveTo(n, u) : b.lineTo(n, u); } let a = 1; 0 == t && (a = 0.6), (b.strokeStyle = `rgba( ${m.value}, ${m.value}, ${ m.value }, ${a * i.buttonAlpha})`), b.closePath(), b.stroke(); } })(), b.beginPath(), b.moveTo( p[0].value + i.burgerPosition.x, p[1].value + i.burgerPosition.y ), b.lineTo( p[2].value + i.burgerPosition.x, p[3].value + i.burgerPosition.y ), b.closePath(), b.stroke(), b.beginPath(), b.moveTo( P[0].value + i.burgerPosition.x, P[1].value + i.burgerPosition.y ), b.lineTo( P[2].value + i.burgerPosition.x, P[3].value + i.burgerPosition.y ), b.closePath(), b.stroke(), (s.style = `\n width: ${ (2 * i.burgerRad) / dpi }px;\n height:${ (2 * i.burgerRad) / dpi }px;\n top: ${ i.burgerMargin / (3 * dpi) }px;\n right: ${i.burgerMargin / (3 * dpi)}px;`), (l.style = `\n width: ${ (2 * i.burgerRad) / dpi }px;\n height:${ (2 * i.burgerRad) / dpi }px;\n top: ${ i.burgerMargin / (3 * dpi) }px;\n right: ${i.burgerMargin / (3 * dpi)}px;`); }); } burgerInit(); </script> <script> let soundToggler = null; if (!window.isMobile) soundToggler = new SoundToggler(); </script> <script> let customCursor; if (!window.isMobile) { customCursor = new CustomCursor(); customCursor.customCursorInit( document.querySelector(".cursorcontainer") ); const links = document.querySelectorAll("a"); links.forEach((a) => { a.addEventListener("mouseenter", customCursor.aIn); a.addEventListener("mouseleave", customCursor.aOut); }); } window.onpageshow = function (event) { if (event.persisted) { window.location.reload(); } }; </script> <script> window.localStorage.setItem("audioWasPlaying", true); const soundReactor = new SoundReactor( "sound.mp3", "home" ); if (!window.isMobile) { console.log(window.isMobile); soundReactor.init(); soundReactor.audio.crossOrigin = "anonymous"; soundToggler.autoPlay = false; } //SOUND MANAGEMENT if (!window.isMobile) { window.addEventListener("load", function () { document .querySelector(".hometoggler") .addEventListener("click", function () { if (soundReactor.ctx.state === "suspended") { soundReactor.ctx.resume(); } soundReactor.audio.play(); RAF.subscribe("fttupdate", soundReactor.update); if (soundToggler != null) { soundToggler.started(); console.log("hello there"); } }); }); } </script> <script src="./javascript/webglball/index.js"></script> <script src="./javascript/webglball/shaders.js"></script> </body> </html>