<!DOCTYPE html><html lang="en-us" data-base-url="https://cdn.modelviewer.lol" data-zh-cn-version="false" data-build="1780202384720" class="scroll-smooth antialiased scrollbar-gutter-stable"> <head><script async src="https://www.googletagmanager.com/gtag/js?id=G-148TXRJTZ2"></script>
			<script>
  				window.dataLayer = window.dataLayer || [];
  				function gtag(){dataLayer.push(arguments);}
  				gtag('js', new Date());
  				gtag('config', 'G-148TXRJTZ2');
			</script>
			<script id="counterscale-script" data-site-id="modelviewer.lol" src="https://statikk.modelviewer.lol/tracker.js" defer></script><script>
			if (
				localStorage.theme === "dark" ||
				(!("theme" in localStorage) &&
					window.matchMedia("(prefers-color-scheme: dark)").matches)
			) {
				document.documentElement.dataset.theme = "dark";
			} else {
				document.documentElement.dataset.theme = "light";
			}

			document.addEventListener("fullscreenchange", () => {
				if (document.fullscreenElement) {
					document.documentElement.style.setProperty("scrollbar-gutter", "auto", "important");
				} else {
					document.documentElement.style.removeProperty("scrollbar-gutter");
				}
			});
		</script><title>Khada - Model Viewer for League of Legends</title><meta charset="UTF-8"><link rel="canonical" href="https://modelviewer.lol/"><meta name="description" content="Explore League of Legends with our Interactive 3D Model Viewer - Discover the latest Champions and Skins with Chromas and Alternative Forms in Detail!"><meta name="robots" content="index, follow"><meta property="og:title" content="Khada - Model Viewer for League of Legends"><meta property="og:type" content="website"><meta property="og:image" content="https://modelviewer.lol/og.webp"><meta property="og:url" content="https://modelviewer.lol/"><meta property="og:description" content="Explore League of Legends with our Interactive 3D Model Viewer - Discover the latest Champions and Skins with Chromas and Alternative Forms in Detail!"><meta name="twitter:site" content="@khada3d"><meta name="twitter:title" content="Khada - Model Viewer for League of Legends"><meta name="twitter:description" content="Explore League of Legends with our Interactive 3D Model Viewer - Discover the latest Champions and Skins with Chromas and Alternative Forms in Detail!"><meta name="twitter:creator" content="@khada3d"><link rel="alternate" hreflang="en" href="https://modelviewer.lol/"><link rel="alternate" hreflang="ko" href="https://modelviewer.lol/?lang=ko-KR"><link rel="alternate" hreflang="pt" href="https://modelviewer.lol/?lang=pt-BR"><link rel="alternate" hreflang="cs" href="https://modelviewer.lol/?lang=cs-CZ"><link rel="alternate" hreflang="de" href="https://modelviewer.lol/?lang=de-DE"><link rel="alternate" hreflang="el" href="https://modelviewer.lol/?lang=el-GR"><link rel="alternate" hreflang="es" href="https://modelviewer.lol/?lang=es-ES"><link rel="alternate" hreflang="es-MX" href="https://modelviewer.lol/?lang=es-MX"><link rel="alternate" hreflang="fr" href="https://modelviewer.lol/?lang=fr-FR"><link rel="alternate" hreflang="hu" href="https://modelviewer.lol/?lang=hu-HU"><link rel="alternate" hreflang="it" href="https://modelviewer.lol/?lang=it-IT"><link rel="alternate" hreflang="ja" href="https://modelviewer.lol/?lang=ja-JP"><link rel="alternate" hreflang="pl" href="https://modelviewer.lol/?lang=pl-PL"><link rel="alternate" hreflang="ro" href="https://modelviewer.lol/?lang=ro-RO"><link rel="alternate" hreflang="ru" href="https://modelviewer.lol/?lang=ru-RU"><link rel="alternate" hreflang="th" href="https://modelviewer.lol/?lang=th-TH"><link rel="alternate" hreflang="tr" href="https://modelviewer.lol/?lang=tr-TR"><link rel="alternate" hreflang="vi" href="https://modelviewer.lol/?lang=vi-VN"><link rel="alternate" hreflang="zh" href="https://modelviewer.lol/?lang=zh-CN"><link rel="alternate" hreflang="zh-MY" href="https://modelviewer.lol/?lang=zh-MY"><link rel="alternate" hreflang="zh-TW" href="https://modelviewer.lol/?lang=zh-TW"><meta name="darkreader-lock"><link rel="sitemap" href="/sitemap.xml"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/favicon.ico"><meta name="generator" content="Astro v6.1.5"><style is:global>
			.statikk-container:has(ins[data-ad-status="unfilled"]) {
    			display: none !important;
			}
			</style><script async src="https://hb.vntsm.com/v4/live/vms/sites/modelviewer.lol/index.js"></script><script>
		self.__VM = self.__VM || [];
        self.__VM.push(function (admanager, scope) {
            // MPU ads
            scope.Config.get('mpu', 'desktop-mpu').display('mpu');
            scope.Config.get('mobile_mpu', 'mobile-mpu').displayMany(['mobile-mpu', 'mobile-mpu-1', 'mobile-mpu-2', 'mobile-mpu-3', 'mobile-mpu-4', 'mobile-mpu-5', 'mobile-mpu-6', 'mobile-mpu-7', 'mobile-mpu-8']);

            // Leaderboard ads
            scope.Config.get('leaderboard').displayMany(["leaderboard", "leaderboard-1", "leaderboard-2", "leaderboard-3", "leaderboard-4", "leaderboard-5", "leaderboard-6", "leaderboard-7", "leaderboard-8"]);

            // Sidebar ads - skyscraper (160x600)
            scope.Config.get('skyscraper', 'sidebar-left').display('skyscraper-l');
            scope.Config.get('skyscraper', 'sidebar-right').display('skyscraper-r');

            // Video ads
            scope.Config.get('video').displayMany(['video', 'mobile-video']);

            // Mobile ads
            scope.Config.get('mobile_takeover').display('mobile-takeover');
            scope.Config.get('mobile_banner').displayMany(['mobile-banner', 'mobile-banner-1', 'mobile-banner-2']);
        });
    </script><!-- <style>
			@view-transition {
					navigation: auto; /* enabled! */
			}
		</style> --><link rel="stylesheet" href="/_astro/jsx-runtime._WG4rck-.css"><script type="module" src="/_astro/page.lJmaw9Un.js"></script></head> <body class="relative w-full">  <div class="khada-background bg-neutral-100 dark:bg-neutral-950 bg-cover bg-fixed min-h-screen"> <div id="venatus-header"></div> <div class="khada-background-blur flex gap-4 justify-center" style="backdrop-filter: blur(max(2vw, 60px)) saturate(1.5) contrast(1.1); -webkit-backdrop-filter: blur(max(2vw, 60px)) saturate(1.3) contrast(1.1)">   <div class="w-full 2xl:max-w-[1400px] 3xl:max-w-[1700px] border-red-500"> <nav class="relative top-0 z-10 m-auto py-4"> <div class="flex h-20 rounded-2xl bg-white px-4 dark:bg-neutral-900"> <a href="/" class="flex h-full items-center px-3"> <img src="/logo.svg" alt aria-hidden="true" loading="eager" decoding="async" width="48" height="80" class="h-full min-w-12 py-6 pr-3 pl-1"> <div class="hidden lg:block"> <h1 class="text-foreground text-sm font-semibold">Khada</h1> <h2 class="text-foreground hidden text-sm font-light opacity-70 3xl:block">Model Viewer for League of Legends</h2> </div> </a> <span class="ml-auto hidden items-center md:flex"> <div class="mx-5 flex items-center space-x-1"> <a class="group relative flex flex-col items-center rounded-lg px-4 py-2 transition-all duration-200 hover:bg-gray-100 dark:hover:bg-neutral-800 text-secondary dark:text-secondary bg-blue-50 dark:bg-blue-900/20" href="/" data-astro-prefetch> <div class="flex items-center space-x-2"> <svg width="21" height="21" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z"></path></svg>    <span class="text-sm font-medium">Home</span> </div> <div class="bg-secondary dark:bg-secondary absolute bottom-0 left-1/2 h-0.5 w-6 -translate-x-1/2 transform rounded-full"></div> </a><a class="group relative flex flex-col items-center rounded-lg px-4 py-2 transition-all duration-200 hover:bg-gray-100 dark:hover:bg-neutral-800 text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white" href="/champions" data-astro-prefetch> <div class="flex items-center space-x-2">  <svg viewBox="0 0 512 512" width="21" height="21"><style></style><path fill="currentColor" d="m402.4 172.4c0-104.5-146.3-125.4-146.3-125.4 0 0-146.2 20.9-146.2 125.4 0 104.4 4.2 121.1-20.9 146.2 0 0 18.8 104.5 104.5 104.5 0 0-41.8-41.8 0-146.3 0 0-62.7 0-41.8-83.5 16.3-0.9 32.6 2.5 47.3 9.8 14.7 7.3 27.1 18.3 36.3 31.9v104.5l20.8 20.9 20.9-20.9v-104.5c8.9-13.9 21.3-25.1 36-32.5 14.7-7.3 31.2-10.5 47.6-9.2 20.9 83.5-41.8 83.5-41.8 83.5 41.8 106.6 0 146.3 0 146.3 85.7 0 104.5-104.5 104.5-104.5-25.1-25.1-20.9-41.8-20.9-146.2z" /></svg>   <span class="text-sm font-medium">Champions</span> </div>  </a><a class="group relative flex flex-col items-center rounded-lg px-4 py-2 transition-all duration-200 hover:bg-gray-100 dark:hover:bg-neutral-800 text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white" href="/tacticians" data-astro-prefetch> <div class="flex items-center space-x-2">   <svg viewBox="0 0 512 512" width="21" height="21"><style></style><path fill="currentColor" fill-rule="evenodd" d="m425.1 213.9l21.2 63.6c-33.9 59.3-97.4 127.1-190.6 127.1-93.3 0-165.3-76.3-190.7-127.1l21.2-63.6-21.2-105.9 105.9 21.2c53-28.2 116.5-28.2 169.5 0l105.9-21.2zm-286 31.8c23.4-17.6 56.6-12.8 74.2 10.6v-21.2c0 0-17-42.4-42.4-42.4-25.4 0-42.4 42.4-42.4 42.4v21.2c3.1-4.1 6.6-7.7 10.6-10.6zm180 31.8c-37.6 28.2-89.5 28.2-127.1 0v21.1c7 16.8 20.3 30.2 37.1 37.2 35.2 14.5 75.4-2.1 90.1-37.2-0.1 0-0.1-21.1-0.1-21.1zm63.7-42.4c0 0-12.8-42.4-42.4-42.4-29.7 0-42.4 42.4-42.4 42.4v21.2c4-6.3 9.3-11.6 15.5-15.5 23.4-14.9 54.4-7.9 69.3 15.5z" /></svg>  <span class="text-sm font-medium">Tacticians</span> </div>  </a><a class="group relative flex flex-col items-center rounded-lg px-4 py-2 transition-all duration-200 hover:bg-gray-100 dark:hover:bg-neutral-800 text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white" href="/extras" data-astro-prefetch> <div class="flex items-center space-x-2">    <svg viewBox="0 0 512 512" width="21" height="21"><path fill="currentColor" fill-rule="evenodd" d="m419.5 281.6c-51.4 77-128.5 154.1-154.2 154.1-25.7 0-102.7-77.1-154.1-154.1 102.7-102.8 102.7-205.6 154.1-205.6 51.4 0 51.4 102.8 154.2 205.6zm-77.1-25.7c7.7-12.9-12.8-33.4-25.7-25.7l-51.4 25.7-51.4-25.7c-12.8-7.7-33.4 12.8-25.7 25.7l77.1 128.4z" /></svg> <span class="text-sm font-medium">Extras</span> </div>  </a> </div> <div class="flex items-center space-x-3 border-l border-gray-200 pl-4 dark:border-neutral-700"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>Number.POSITIVE_INFINITY*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="28tc1P" prefix="r7" component-url="/_astro/SearchButton.B1FRj7Or.js" component-export="default" renderer-url="/_astro/client.f6qZC7GJ.js" props="{&quot;lang&quot;:[0,&quot;en-US&quot;]}" ssr client="load" opts="{&quot;name&quot;:&quot;SearchButton&quot;,&quot;value&quot;:true}" await-children><button title="You can search by champion, skin, tactician and more."><astro-slot> <svg width="20" height="20" class="focused:text-secondary hover:text-secondary transition-colors" viewBox="0 0 32 32" width="1.2em" height="1.2em"><path fill="currentColor" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9"></path></svg> </astro-slot></button><div data-slot="dialog-header" class="flex flex-col gap-2 text-center sm:text-left sr-only"><h2 id="radix-_r7R_2H1_" data-slot="dialog-title" class="text-lg leading-none font-semibold">Command Palette</h2><p id="radix-_r7R_2H2_" data-slot="dialog-description" class="text-muted-foreground text-sm">Search for a command to run...</p></div><!--astro:end--></astro-island> <astro-island uid="dEea1" prefix="r8" component-url="/_astro/PickerLanguage.DLD6pOLo.js" component-export="default" renderer-url="/_astro/client.f6qZC7GJ.js" props="{&quot;lang&quot;:[0,&quot;en-US&quot;],&quot;languages&quot;:[1,[[0,{&quot;value&quot;:[0,&quot;default&quot;],&quot;hrefLang&quot;:[0,&quot;en&quot;],&quot;label&quot;:[0,&quot;🇺🇸 English&quot;],&quot;href&quot;:[0,&quot;/&quot;],&quot;selected&quot;:[0,true]}],[0,{&quot;value&quot;:[0,&quot;ko-KR&quot;],&quot;hrefLang&quot;:[0,&quot;ko&quot;],&quot;label&quot;:[0,&quot;🇰🇷 한국어&quot;],&quot;href&quot;:[0,&quot;/?lang=ko-KR&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;pt-BR&quot;],&quot;hrefLang&quot;:[0,&quot;pt&quot;],&quot;label&quot;:[0,&quot;🇧🇷 Português&quot;],&quot;href&quot;:[0,&quot;/?lang=pt-BR&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;cs-CZ&quot;],&quot;hrefLang&quot;:[0,&quot;cs&quot;],&quot;label&quot;:[0,&quot;🇨🇿 Čeština&quot;],&quot;href&quot;:[0,&quot;/?lang=cs-CZ&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;de-DE&quot;],&quot;hrefLang&quot;:[0,&quot;de&quot;],&quot;label&quot;:[0,&quot;🇩🇪 Deutsch&quot;],&quot;href&quot;:[0,&quot;/?lang=de-DE&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;el-GR&quot;],&quot;hrefLang&quot;:[0,&quot;el&quot;],&quot;label&quot;:[0,&quot;🇬🇷 Ελληνικά&quot;],&quot;href&quot;:[0,&quot;/?lang=el-GR&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;es-ES&quot;],&quot;hrefLang&quot;:[0,&quot;es&quot;],&quot;label&quot;:[0,&quot;🇪🇸 Espanõl&quot;],&quot;href&quot;:[0,&quot;/?lang=es-ES&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;es-MX&quot;],&quot;hrefLang&quot;:[0,&quot;es-MX&quot;],&quot;label&quot;:[0,&quot;🇲🇽 Español&quot;],&quot;href&quot;:[0,&quot;/?lang=es-MX&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;fr-FR&quot;],&quot;hrefLang&quot;:[0,&quot;fr&quot;],&quot;label&quot;:[0,&quot;🇫🇷 Français&quot;],&quot;href&quot;:[0,&quot;/?lang=fr-FR&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;hu-HU&quot;],&quot;hrefLang&quot;:[0,&quot;hu&quot;],&quot;label&quot;:[0,&quot;🇭🇺 Magyar&quot;],&quot;href&quot;:[0,&quot;/?lang=hu-HU&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;it-IT&quot;],&quot;hrefLang&quot;:[0,&quot;it&quot;],&quot;label&quot;:[0,&quot;🇮🇹 Italiano&quot;],&quot;href&quot;:[0,&quot;/?lang=it-IT&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;ja-JP&quot;],&quot;hrefLang&quot;:[0,&quot;ja&quot;],&quot;label&quot;:[0,&quot;🇯🇵 日本語&quot;],&quot;href&quot;:[0,&quot;/?lang=ja-JP&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;pl-PL&quot;],&quot;hrefLang&quot;:[0,&quot;pl&quot;],&quot;label&quot;:[0,&quot;🇵🇱 Polski&quot;],&quot;href&quot;:[0,&quot;/?lang=pl-PL&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;ro-RO&quot;],&quot;hrefLang&quot;:[0,&quot;ro&quot;],&quot;label&quot;:[0,&quot;🇷🇴 Română&quot;],&quot;href&quot;:[0,&quot;/?lang=ro-RO&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;ru-RU&quot;],&quot;hrefLang&quot;:[0,&quot;ru&quot;],&quot;label&quot;:[0,&quot;🇷🇺 Русский&quot;],&quot;href&quot;:[0,&quot;/?lang=ru-RU&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;th-TH&quot;],&quot;hrefLang&quot;:[0,&quot;th&quot;],&quot;label&quot;:[0,&quot;🇹🇭 ไทย&quot;],&quot;href&quot;:[0,&quot;/?lang=th-TH&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;tr-TR&quot;],&quot;hrefLang&quot;:[0,&quot;tr&quot;],&quot;label&quot;:[0,&quot;🇹🇷 Türkçe&quot;],&quot;href&quot;:[0,&quot;/?lang=tr-TR&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;vi-VN&quot;],&quot;hrefLang&quot;:[0,&quot;vi&quot;],&quot;label&quot;:[0,&quot;🇻🇳 Tiếng Việt&quot;],&quot;href&quot;:[0,&quot;/?lang=vi-VN&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;zh-CN&quot;],&quot;hrefLang&quot;:[0,&quot;zh&quot;],&quot;label&quot;:[0,&quot;🇨🇳 中文&quot;],&quot;href&quot;:[0,&quot;/?lang=zh-CN&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;zh-MY&quot;],&quot;hrefLang&quot;:[0,&quot;zh-MY&quot;],&quot;label&quot;:[0,&quot;🇲🇾 中文&quot;],&quot;href&quot;:[0,&quot;/?lang=zh-MY&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;zh-TW&quot;],&quot;hrefLang&quot;:[0,&quot;zh-TW&quot;],&quot;label&quot;:[0,&quot;🇹🇼 ‪中文(台灣)‬&quot;],&quot;href&quot;:[0,&quot;/?lang=zh-TW&quot;],&quot;selected&quot;:[0,false]}]]]}" ssr client="load" opts="{&quot;name&quot;:&quot;PickerLanguage&quot;,&quot;value&quot;:true}" await-children><button type="button" id="radix-_r8R_0_" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="focused:text-secondary mx-4 hover:text-secondary" title="Change Language"><astro-slot> <svg class="focused:text-secondary hover:text-secondary transition-colors" width="20" height="20" viewBox="0 0 32 32" width="1.2em" height="1.2em"><path fill="currentColor" d="M18 19h6v2h-6zm0-4h12v2H18zm0-4h12v2H18zm-4 10v-2H9v-2H7v2H2v2h8.215a8.6 8.6 0 0 1-2.216 3.977A9.3 9.3 0 0 1 6.552 23H4.333a10.9 10.9 0 0 0 2.145 3.297A14.7 14.7 0 0 1 3 28.127L3.702 30a16.4 16.4 0 0 0 4.29-2.336A16.5 16.5 0 0 0 12.299 30L13 28.127A14.7 14.7 0 0 1 9.523 26.3a10.3 10.3 0 0 0 2.729-5.3zm-2.833-8h2.166L8.75 2H6.583L2 13h2.166L5 11h5.334zM5.833 9l1.834-4.4L9.5 9z"></path></svg> </astro-slot></button><!--astro:end--></astro-island> <button id="theme-switcher" class="hover:text-secondary" title="Theme"> <svg id="light-theme" class="hidden dark:block" aria-label="Light Theme" width="20" height="20" viewBox="0 0 32 32" width="1.2em" height="1.2em"><path fill="currentColor" d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6M5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z"></path></svg> <svg id="dark-theme" class="dark:hidden" aria-label="Dark Theme" width="20" height="20" viewBox="0 0 32 32" width="1.2em" height="1.2em"><path fill="currentColor" d="M13.503 5.414a15.076 15.076 0 0 0 11.593 18.194a11.1 11.1 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1 1 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.07 13.07 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3"></path></svg> </button> <script type="module">globalThis.process??={};globalThis.process.env??={};document.getElementById("theme-switcher")?.addEventListener("click",()=>{const e=(localStorage.theme||document.documentElement.dataset.theme)==="dark"?"light":"dark";localStorage.theme=e,document.documentElement.dataset.theme=e,document.querySelectorAll("iframe").forEach(t=>{t.contentWindow.postMessage({theme:e},"*")})});</script> </div> <div class="flex min-w-[160px] justify-center"> <astro-island uid="Z1xwX30" prefix="r9" component-url="/_astro/SupportUs.Czf5388h.js" component-export="default" renderer-url="/_astro/client.f6qZC7GJ.js" props="{&quot;lang&quot;:[0,&quot;en-US&quot;]}" ssr client="load" opts="{&quot;name&quot;:&quot;SupportUs&quot;,&quot;value&quot;:true}" await-children><button type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-_r9R_0_" data-state="closed" class="ml-4 h-9 rounded-lg bg-[#9131ff] px-3"><astro-slot> <div class="flex items-center gap-2 text-white"> <svg height="20" viewBox="0 0 256 256" width="1.2em" height="1.2em"><g fill="currentColor"><path d="M232 102c0 66-104 122-104 122S24 168 24 102a54 54 0 0 1 54-54c22.59 0 41.94 12.31 50 32c8.06-19.69 27.41-32 50-32a54 54 0 0 1 54 54" opacity=".2"></path><path d="M178 40c-20.65 0-38.73 8.88-50 23.89C116.73 48.88 98.65 40 78 40a62.07 62.07 0 0 0-62 62c0 70 103.79 126.66 108.21 129a8 8 0 0 0 7.58 0C136.21 228.66 240 172 240 102a62.07 62.07 0 0 0-62-62m-50 174.8c-18.26-10.64-96-59.11-96-112.8a46.06 46.06 0 0 1 46-46c19.45 0 35.78 10.36 42.6 27a8 8 0 0 0 14.8 0c6.82-16.67 23.15-27 42.6-27a46.06 46.06 0 0 1 46 46c0 53.61-77.76 102.15-96 112.8"></path></g></svg> Support us </div>   </astro-slot></button><template data-astro-template="kofi-icon"><div> <svg height="20" viewBox="0 0 32 32" width="1.2em" height="1.2em"><path fill="currentColor" d="M31.844 11.932c-1.032-5.448-6.48-6.125-6.48-6.125H.964C.156 5.807.057 6.87.057 6.87S-.052 16.637.03 22.637c.22 3.228 3.448 3.561 3.448 3.561s11.021-.031 15.953-.067c3.251-.568 3.579-3.423 3.541-4.98c5.808.323 9.896-3.776 8.871-9.219zm-14.751 4.683c-1.661 1.932-5.348 5.297-5.348 5.297s-.161.161-.417.031c-.099-.073-.14-.12-.14-.12c-.595-.588-4.491-4.063-5.381-5.271c-.943-1.287-1.385-3.599-.119-4.948c1.265-1.344 4.005-1.448 5.817.541c0 0 2.083-2.375 4.625-1.281c2.536 1.095 2.443 4.016.963 5.751m8.23.636c-1.24.156-2.244.036-2.244.036V9.714h2.359s2.631.735 2.631 3.516c0 2.552-1.313 3.557-2.745 4.021z"></path></svg> </div></template><template data-astro-template="patreon-icon"><div> <svg height="20" viewBox="0 0 32 32" width="1.2em" height="1.2em"><path fill="currentColor" d="M20.516.697c-6.355 0-11.521 5.167-11.521 11.521c0 6.333 5.167 11.484 11.521 11.484C26.849 23.702 32 18.551 32 12.218C32 5.863 26.849.697 20.516.697M.005 31.38H5.63V.697H.005z"></path></svg> </div></template><!--astro:end--></astro-island> </div> </span> <span class="ml-auto flex md:hidden"> <script>(()=>{var a=(s,i,o)=>{let r=async()=>{await(await s())()},t=typeof i.value=="object"?i.value:void 0,c={rootMargin:t==null?void 0:t.rootMargin},n=new IntersectionObserver(e=>{for(let l of e)if(l.isIntersecting){n.disconnect(),r();break}},c);for(let e of o.children)n.observe(e)};(self.Astro||(self.Astro={})).visible=a;window.dispatchEvent(new Event("astro:visible"));})();</script><astro-island uid="Z1tpwme" prefix="r5" component-url="/_astro/SideMenu.zp7uCQcD.js" component-export="default" renderer-url="/_astro/client.f6qZC7GJ.js" props="{&quot;availablePaths&quot;:[1,[[0,{&quot;path&quot;:[0,&quot;/&quot;],&quot;name&quot;:[0,&quot;Home&quot;],&quot;icon&quot;:[0,&quot;home&quot;]}],[0,{&quot;path&quot;:[0,&quot;/champions&quot;],&quot;name&quot;:[0,&quot;Champions&quot;],&quot;icon&quot;:[0,&quot;champions&quot;]}],[0,{&quot;path&quot;:[0,&quot;/tacticians&quot;],&quot;name&quot;:[0,&quot;Tacticians&quot;],&quot;icon&quot;:[0,&quot;tft&quot;]}],[0,{&quot;path&quot;:[0,&quot;/extras&quot;],&quot;name&quot;:[0,&quot;Extras&quot;],&quot;icon&quot;:[0,&quot;extras&quot;]}]]],&quot;languages&quot;:[1,[[0,{&quot;value&quot;:[0,&quot;default&quot;],&quot;hrefLang&quot;:[0,&quot;en&quot;],&quot;label&quot;:[0,&quot;🇺🇸 English&quot;],&quot;href&quot;:[0,&quot;/&quot;],&quot;selected&quot;:[0,true]}],[0,{&quot;value&quot;:[0,&quot;ko-KR&quot;],&quot;hrefLang&quot;:[0,&quot;ko&quot;],&quot;label&quot;:[0,&quot;🇰🇷 한국어&quot;],&quot;href&quot;:[0,&quot;/?lang=ko-KR&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;pt-BR&quot;],&quot;hrefLang&quot;:[0,&quot;pt&quot;],&quot;label&quot;:[0,&quot;🇧🇷 Português&quot;],&quot;href&quot;:[0,&quot;/?lang=pt-BR&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;cs-CZ&quot;],&quot;hrefLang&quot;:[0,&quot;cs&quot;],&quot;label&quot;:[0,&quot;🇨🇿 Čeština&quot;],&quot;href&quot;:[0,&quot;/?lang=cs-CZ&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;de-DE&quot;],&quot;hrefLang&quot;:[0,&quot;de&quot;],&quot;label&quot;:[0,&quot;🇩🇪 Deutsch&quot;],&quot;href&quot;:[0,&quot;/?lang=de-DE&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;el-GR&quot;],&quot;hrefLang&quot;:[0,&quot;el&quot;],&quot;label&quot;:[0,&quot;🇬🇷 Ελληνικά&quot;],&quot;href&quot;:[0,&quot;/?lang=el-GR&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;es-ES&quot;],&quot;hrefLang&quot;:[0,&quot;es&quot;],&quot;label&quot;:[0,&quot;🇪🇸 Espanõl&quot;],&quot;href&quot;:[0,&quot;/?lang=es-ES&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;es-MX&quot;],&quot;hrefLang&quot;:[0,&quot;es-MX&quot;],&quot;label&quot;:[0,&quot;🇲🇽 Español&quot;],&quot;href&quot;:[0,&quot;/?lang=es-MX&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;fr-FR&quot;],&quot;hrefLang&quot;:[0,&quot;fr&quot;],&quot;label&quot;:[0,&quot;🇫🇷 Français&quot;],&quot;href&quot;:[0,&quot;/?lang=fr-FR&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;hu-HU&quot;],&quot;hrefLang&quot;:[0,&quot;hu&quot;],&quot;label&quot;:[0,&quot;🇭🇺 Magyar&quot;],&quot;href&quot;:[0,&quot;/?lang=hu-HU&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;it-IT&quot;],&quot;hrefLang&quot;:[0,&quot;it&quot;],&quot;label&quot;:[0,&quot;🇮🇹 Italiano&quot;],&quot;href&quot;:[0,&quot;/?lang=it-IT&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;ja-JP&quot;],&quot;hrefLang&quot;:[0,&quot;ja&quot;],&quot;label&quot;:[0,&quot;🇯🇵 日本語&quot;],&quot;href&quot;:[0,&quot;/?lang=ja-JP&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;pl-PL&quot;],&quot;hrefLang&quot;:[0,&quot;pl&quot;],&quot;label&quot;:[0,&quot;🇵🇱 Polski&quot;],&quot;href&quot;:[0,&quot;/?lang=pl-PL&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;ro-RO&quot;],&quot;hrefLang&quot;:[0,&quot;ro&quot;],&quot;label&quot;:[0,&quot;🇷🇴 Română&quot;],&quot;href&quot;:[0,&quot;/?lang=ro-RO&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;ru-RU&quot;],&quot;hrefLang&quot;:[0,&quot;ru&quot;],&quot;label&quot;:[0,&quot;🇷🇺 Русский&quot;],&quot;href&quot;:[0,&quot;/?lang=ru-RU&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;th-TH&quot;],&quot;hrefLang&quot;:[0,&quot;th&quot;],&quot;label&quot;:[0,&quot;🇹🇭 ไทย&quot;],&quot;href&quot;:[0,&quot;/?lang=th-TH&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;tr-TR&quot;],&quot;hrefLang&quot;:[0,&quot;tr&quot;],&quot;label&quot;:[0,&quot;🇹🇷 Türkçe&quot;],&quot;href&quot;:[0,&quot;/?lang=tr-TR&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;vi-VN&quot;],&quot;hrefLang&quot;:[0,&quot;vi&quot;],&quot;label&quot;:[0,&quot;🇻🇳 Tiếng Việt&quot;],&quot;href&quot;:[0,&quot;/?lang=vi-VN&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;zh-CN&quot;],&quot;hrefLang&quot;:[0,&quot;zh&quot;],&quot;label&quot;:[0,&quot;🇨🇳 中文&quot;],&quot;href&quot;:[0,&quot;/?lang=zh-CN&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;zh-MY&quot;],&quot;hrefLang&quot;:[0,&quot;zh-MY&quot;],&quot;label&quot;:[0,&quot;🇲🇾 中文&quot;],&quot;href&quot;:[0,&quot;/?lang=zh-MY&quot;],&quot;selected&quot;:[0,false]}],[0,{&quot;value&quot;:[0,&quot;zh-TW&quot;],&quot;hrefLang&quot;:[0,&quot;zh-TW&quot;],&quot;label&quot;:[0,&quot;🇹🇼 ‪中文(台灣)‬&quot;],&quot;href&quot;:[0,&quot;/?lang=zh-TW&quot;],&quot;selected&quot;:[0,false]}]]],&quot;prefix&quot;:[0,&quot;&quot;],&quot;lang&quot;:[0,&quot;en-US&quot;]}" ssr client="visible" opts="{&quot;name&quot;:&quot;SideMenu&quot;,&quot;value&quot;:true}" await-children><button type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-_r5R_0_" data-state="closed" title="More"><span></span></button><!--astro:end--></astro-island> </span> </div> </nav> <span>  <main> <div class="3xl:px-40 -mt-24 h-full w-full px-4"> <div class="block lg:flex"> <div class="w-full pt-24 md:pl-8 lg:py-44"> <div class="grid place-content-center lg:flex lg:place-content-start"> <div class="text-center text-6xl font-bold text-white">Khada</div> <div class="ml-4 flex max-w-80 justify-center gap-x-3 pt-6"> <a class="flex h-6 w-28 items-center justify-center rounded-full text-xs text-white hover:outline-2 hover:outline-white hover:text-white bg-black" target="_blank" href="https://apps.apple.com/us/app/khada-model-viewer-for-lol/id1490688355"> <svg slot="icon" width="20" height="20" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="M17.05 20.28c-.98.95-2.05.8-3.08.35c-1.09-.46-2.09-.48-3.24 0c-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8c1.18-.24 2.31-.93 3.57-.84c1.51.12 2.65.72 3.4 1.8c-3.12 1.87-2.38 5.98.48 7.13c-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25c.29 2.58-2.34 4.5-3.74 4.25"></path></svg> <span class="pl-1">iOS</span> </a> <a class="flex h-6 w-28 items-center justify-center rounded-full text-xs text-white hover:outline-2 hover:outline-white hover:text-white bg-green-700" target="_blank" href="https://play.google.com/store/apps/details?id=com.Khada.Online3DLOL"> <svg slot="icon" width="20" height="20" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="M1 18q.225-2.675 1.638-4.925T6.4 9.5L4.55 6.3q-.15-.225-.075-.475T4.8 5.45q.2-.125.45-.05t.4.3L7.5 8.9Q9.65 8 12 8t4.5.9l1.85-3.2q.15-.225.4-.3t.45.05q.25.125.325.375t-.075.475L17.6 9.5q2.35 1.325 3.762 3.575T23 18zm6-2.75q.525 0 .888-.363T8.25 14t-.363-.888T7 12.75t-.888.363T5.75 14t.363.888t.887.362m10 0q.525 0 .888-.363T18.25 14t-.363-.888T17 12.75t-.888.363t-.362.887t.363.888t.887.362"></path></svg> <span class="pl-1">Android</span> </a> <a class="flex h-6 w-28 items-center justify-center rounded-full text-xs text-white hover:outline-2 hover:outline-white hover:text-white bg-red-600" target="_blank" id="homepage-web-button" href="#"> <svg slot="icon" width="20" height="20" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2zM14 3v2h3.59l-9.83 9.83l1.41 1.41L19 6.41V10h2V3z"></path></svg> <span class="pl-1">Web</span> </a> </div> </div> <p class="mt-3 text-center text-sm font-light text-white drop-shadow-2xl sm:mx-4 md:text-xl lg:mx-0 lg:text-start">Fan-made 3D model viewer for every champion and skin from League of Legends with chromas and alternative forms!</p> <div> <div class="mt-5 grid grid-cols-1 justify-items-center gap-4 lg:grid-cols-3 lg:justify-items-start"> <div class="w-full rounded-lg border-2 bg-neutral-100/95 p-4 dark:bg-black/60"> <h2 class="text-sm flex font-semibold"> <svg slot="icon" width="25" height="25" viewBox="0 0 32 32" width="1.2em" height="1.2em"><path fill="currentColor" d="M23.5 22H23v-2h.5a4.5 4.5 0 0 0 .36-9H23l-.1-.82a7 7 0 0 0-13.88 0L9 11h-.86a4.5 4.5 0 0 0 .36 9H9v2h-.5A6.5 6.5 0 0 1 7.2 9.14a9 9 0 0 1 17.6 0A6.5 6.5 0 0 1 23.5 22"></path><path fill="currentColor" d="M17 26.17V14h-2v12.17l-2.59-2.58L11 25l5 5l5-5l-1.41-1.41z"></path></svg> <span class="ml-2"> Unrestrictive </span> </h2> <p class="mt-2 text-sm font-light dark:text-white/80"> Download 3D models for 3D printing, or even export them with textures and animations, for free! </p> </div> <div class="w-full rounded-lg border-2 bg-neutral-100/95 p-4 dark:bg-black/60"> <h2 class="text-sm flex font-semibold"> <svg slot="icon" width="25" height="25" viewBox="0 0 32 32" width="1.2em" height="1.2em"><path fill="currentColor" d="M20.59 22L15 16.41V7h2v8.58l5 5.01z"></path><path fill="currentColor" d="M16 2A13.94 13.94 0 0 0 6 6.23V2H4v8h8V8H7.08A12 12 0 1 1 4 16H2A14 14 0 1 0 16 2"></path></svg> <span class="ml-2"> Up to date </span> </h2> <p class="mt-2 text-sm font-light dark:text-white/80"> See the latest skins and champions before they officially launch in-game, as we update them in sync with the PBE. </p> </div> <div class="w-full rounded-lg border-2 bg-neutral-100/95 p-4 dark:bg-black/60"> <h2 class="text-sm flex font-semibold"> <svg slot="icon" width="25" height="25" viewBox="0 0 32 32" width="1.2em" height="1.2em"><path fill="currentColor" d="M4 22H2V4a2 2 0 0 1 2-2h18v2H4zm17-5a3 3 0 1 0-3-3a3.003 3.003 0 0 0 3 3m0-4a1 1 0 1 1-1 1a1 1 0 0 1 1-1"></path><path fill="currentColor" d="M28 7H9a2.003 2.003 0 0 0-2 2v19a2.003 2.003 0 0 0 2 2h19a2.003 2.003 0 0 0 2-2V9a2.003 2.003 0 0 0-2-2m0 21H9v-6l4-3.997l5.586 5.586a2 2 0 0 0 2.828 0L23 22.003L28 27Zm0-3.828l-3.586-3.586a2 2 0 0 0-2.828 0L20 22.172l-5.586-5.586a2 2 0 0 0-2.828 0L9 19.172V9h19Z"></path></svg> <span class="ml-2"> Adaptive </span> </h2> <p class="mt-2 text-sm font-light dark:text-white/80"> Capture high quality images for use in thumbnails, cosplay and drawing references, or even creative stickers! </p> </div> </div> </div> </div> <div class="relative relative h-[500px] w-full lg:h-auto"> <canvas id="canvas" class="absolute h-full w-full opacity-0 transition-opacity duration-300" data-interactable="false" data-lite="false" data-camera-style="default" data-shadow="true" id="homepage-canvas" data-group="lol"></canvas> <div id="spinner" class="grid h-full place-content-center backdrop-brightness-75"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin text-white"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg> </div>  <div class="absolute right-0 bottom-0 left-0 lg:bottom-14 lg:left-auto lg:mt-80"> <a class="z-10 m-5 mt-4 flex h-20 cursor-pointer items-center rounded-xl border-2 bg-neutral-100 p-3 shadow-2xl backdrop-blur-lg hover:border-primary dark:bg-black/60 hover:text-foreground lg:min-w-60 lg:max-w-80" href="/model-viewer?id=" data-astro-prefetch data-skin-shortcut id="skin-shortcut"> <img src="https://cdn.modelviewer.lol/lol/circles/.webp" id="skin-shortcut-icon" alt loading="eager" decoding="async" width="48" height="48" class="rounded-full border-2 border-yellow-600"> <div class="ml-3"> <div id="skin-shortcut-name" class="font-light text-black dark:text-white/90" data-skin-name></div> <div class="text-sm italic text-black/60 dark:text-white/60">View 3D Model</div> </div> <div class="ml-auto"> <svg width="30" height="30" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="M12.6 12L8 7.4L9.4 6l6 6l-6 6L8 16.6z"></path></svg> </div> </a> </div>  </div> <script type="module" src="/_astro/Canvas.astro_astro_type_script_index_0_lang.Dhc-WWpL.js"></script> </div> </div> <section class="relative grid min-h-[850px] gap-4 rounded-t-3xl bg-neutral-100 p-1 px-6 pt-6 md:p-10 md:px-12 dark:bg-neutral-950"> <div> <div class="flex items-center gap-2 pt-2"> <a class="bold text-xl font-medium" href="#recent-supporters" id="recent-supporters" tabindex="-1">Recent Supporters</a> <svg height="24" width="24" class="text-red-600 dark:text-red-500" viewBox="0 0 256 256" width="1.2em" height="1.2em"><g fill="currentColor"><path d="M232 102c0 66-104 122-104 122S24 168 24 102a54 54 0 0 1 54-54c22.59 0 41.94 12.31 50 32c8.06-19.69 27.41-32 50-32a54 54 0 0 1 54 54" opacity=".2"></path><path d="M178 40c-20.65 0-38.73 8.88-50 23.89C116.73 48.88 98.65 40 78 40a62.07 62.07 0 0 0-62 62c0 70 103.79 126.66 108.21 129a8 8 0 0 0 7.58 0C136.21 228.66 240 172 240 102a62.07 62.07 0 0 0-62-62m-50 174.8c-18.26-10.64-96-59.11-96-112.8a46.06 46.06 0 0 1 46-46c19.45 0 35.78 10.36 42.6 27a8 8 0 0 0 14.8 0c6.82-16.67 23.15-27 42.6-27a46.06 46.06 0 0 1 46 46c0 53.61-77.76 102.15-96 112.8"></path></g></svg> </div> <span class="mb-2 text-xs text-gray-600 dark:text-gray-300">By leaving a tip on our <a style="color: var(--tip-link-color); text-decoration: underline" href="https://ko-fi.com/khada3d" target="_blank" rel="noopener">Ko-Fi</a> page, you will help us maintain our servers and have the option to leave a message that will appear here.</span> <div class="border-l my-5 pl-4 grid gap-2 grid-cols-[repeat(auto-fit,minmax(240px,max-content))] max-w-full items-start justify-start"> <div class="flex w-full flex-col rounded-lg border border-gray-200 bg-white p-4 shadow-md transition-all duration-200 hover:shadow-lg dark:border-gray-700 dark:bg-neutral-900" style="break-inside:avoid"> <div class="mb-2 flex items-center justify-between"> <div class="flex items-center"> <div class="mr-2 flex h-6 w-6 items-center justify-center rounded-full" style="background-color: hsl(278, 82%, 86%); transform: rotate(-27deg);" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6 text-gray-700 dark:text-gray-800"> <circle cx="9" cy="10" r="0.5" fill="currentColor"></circle> <circle cx="15" cy="10" r="0.5" fill="currentColor"></circle> <path d="M10 15 Q12 18 14 15"></path> </svg> </div> <span class="font-semibold break-words text-[13px] text-gray-800 dark:text-gray-200 max-w-[250px] text-ellipsis truncate"> sk00maddict </span> </div> <span class="ml-3 flex-shrink-0" title="ko-fi"> <a href="https://ko-fi.com/khada3d" target="_blank" rel="noopener noreferrer" aria-label="Ko-fi profile of sk00maddict"> <svg height="20" width="20" class="text-[#187DA6]" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="M11.351 2.715c-2.7 0-4.986.025-6.83.26C2.078 3.285 0 5.154 0 8.61c0 3.506.182 6.13 1.585 8.493c1.584 2.701 4.233 4.182 7.662 4.182h.83c4.209 0 6.494-2.234 7.637-4a9.5 9.5 0 0 0 1.091-2.338C21.792 14.688 24 12.22 24 9.208v-.415c0-3.247-2.13-5.507-5.792-5.87c-1.558-.156-2.65-.208-6.857-.208m0 1.947c4.208 0 5.09.052 6.571.182c2.624.311 4.13 1.584 4.13 4v.39c0 2.156-1.792 3.844-3.87 3.844h-.935l-.156.649c-.208 1.013-.597 1.818-1.039 2.546c-.909 1.428-2.545 3.064-5.922 3.064h-.805c-2.571 0-4.831-.883-6.078-3.195c-1.09-2-1.298-4.155-1.298-7.506c0-2.181.857-3.402 3.012-3.714c1.533-.233 3.559-.26 6.39-.26m6.547 2.287c-.416 0-.65.234-.65.546v2.935c0 .311.234.545.65.545c1.324 0 2.051-.754 2.051-2s-.727-2.026-2.052-2.026m-10.39.182c-1.818 0-3.013 1.48-3.013 3.142c0 1.533.858 2.857 1.949 3.897c.727.701 1.87 1.429 2.649 1.896a1.47 1.47 0 0 0 1.507 0c.78-.467 1.922-1.195 2.623-1.896c1.117-1.039 1.974-2.364 1.974-3.897c0-1.662-1.247-3.142-3.039-3.142c-1.065 0-1.792.545-2.338 1.298c-.493-.753-1.246-1.298-2.312-1.298"></path></svg> </a>  </span> </div> <div class="mt-1 italic relative mb-3 rounded-md bg-gray-200 p-3 text-sm break-words text-gray-700 before:content-[''] before:absolute before:bottom-full before:left-4 before:ml-[-5px] before:border-[5px] before:border-solid before:border-transparent before:border-b-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:before:border-b-gray-700">&lt;3</div> <div class="mt-auto text-right text-xs text-gray-500 dark:text-gray-400">5/19/2026</div> </div><div class="flex w-full flex-col rounded-lg border border-gray-200 bg-white p-4 shadow-md transition-all duration-200 hover:shadow-lg dark:border-gray-700 dark:bg-neutral-900" style="break-inside:avoid"> <div class="mb-2 flex items-center justify-between"> <div class="flex items-center"> <div class="mr-2 flex h-6 w-6 items-center justify-center rounded-full" style="background-color: hsl(210, 77%, 92%); transform: rotate(20deg);" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6 text-gray-700 dark:text-gray-800"> <circle cx="9" cy="10" r="0.5" fill="currentColor"></circle> <circle cx="15" cy="10" r="0.5" fill="currentColor"></circle> <path d="M10 15 Q12 18 14 15"></path> </svg> </div> <span class="font-semibold break-words text-[13px] text-gray-800 dark:text-gray-200 max-w-[250px] text-ellipsis truncate"> GladSask </span> </div> <span class="ml-3 flex-shrink-0" title="patreon">  <a href="https://patreon.com/khada_model_viewer" target="_blank" rel="noopener noreferrer" aria-label="Patreon profile of GladSask"> <svg height="20" width="20" class="text-[#F96854]" viewBox="0 0 256 256" width="1.2em" height="1.2em"><path fill="currentColor" d="M232 93.17c0 41-29.69 52.47-53.55 61.67c-8.41 3.24-16.35 6.3-22.21 10.28c-11.39 7.72-18.59 21.78-25.55 35.38c-9.94 19.42-20.23 39.5-43.17 39.5c-12.91 0-24.61-11.64-33.85-33.66s-14.31-51-13.61-77.45c1.08-40.65 14.58-62.68 25.7-74c14.95-15.2 35.24-25.3 58.68-29.2c21.79-3.62 44.14-1.38 62.93 6.3C215.73 43.6 232 65.9 232 93.17"></path></svg> </a> </span> </div>  <div class="mt-auto text-right text-xs text-gray-500 dark:text-gray-400">5/19/2026</div> </div><div class="flex w-full flex-col rounded-lg border border-gray-200 bg-white p-4 shadow-md transition-all duration-200 hover:shadow-lg dark:border-gray-700 dark:bg-neutral-900" style="break-inside:avoid"> <div class="mb-2 flex items-center justify-between"> <div class="flex items-center"> <div class="mr-2 flex h-6 w-6 items-center justify-center rounded-full" style="background-color: hsl(170, 84%, 85%); transform: rotate(27deg);" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6 text-gray-700 dark:text-gray-800"> <circle cx="9" cy="10" r="0.5" fill="currentColor"></circle> <circle cx="15" cy="10" r="0.5" fill="currentColor"></circle> <path d="M10 15 Q12 18 14 15"></path> </svg> </div> <span class="font-semibold break-words text-[13px] text-gray-800 dark:text-gray-200 max-w-[250px] text-ellipsis truncate"> Alicia Loring </span> </div> <span class="ml-3 flex-shrink-0" title="patreon">  <a href="https://patreon.com/khada_model_viewer" target="_blank" rel="noopener noreferrer" aria-label="Patreon profile of Alicia Loring"> <svg height="20" width="20" class="text-[#F96854]" viewBox="0 0 256 256" width="1.2em" height="1.2em"><path fill="currentColor" d="M232 93.17c0 41-29.69 52.47-53.55 61.67c-8.41 3.24-16.35 6.3-22.21 10.28c-11.39 7.72-18.59 21.78-25.55 35.38c-9.94 19.42-20.23 39.5-43.17 39.5c-12.91 0-24.61-11.64-33.85-33.66s-14.31-51-13.61-77.45c1.08-40.65 14.58-62.68 25.7-74c14.95-15.2 35.24-25.3 58.68-29.2c21.79-3.62 44.14-1.38 62.93 6.3C215.73 43.6 232 65.9 232 93.17"></path></svg> </a> </span> </div>  <div class="mt-auto text-right text-xs text-gray-500 dark:text-gray-400">5/16/2026</div> </div><div class="flex w-full flex-col rounded-lg border border-gray-200 bg-white p-4 shadow-md transition-all duration-200 hover:shadow-lg dark:border-gray-700 dark:bg-neutral-900" style="break-inside:avoid"> <div class="mb-2 flex items-center justify-between"> <div class="flex items-center"> <div class="mr-2 flex h-6 w-6 items-center justify-center rounded-full" style="background-color: hsl(22, 94%, 92%); transform: rotate(30deg);" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6 text-gray-700 dark:text-gray-800"> <circle cx="9" cy="10" r="0.5" fill="currentColor"></circle> <circle cx="15" cy="10" r="0.5" fill="currentColor"></circle> <path d="M10 15 Q12 18 14 15"></path> </svg> </div> <span class="font-semibold break-words text-[13px] text-gray-800 dark:text-gray-200 max-w-[250px] text-ellipsis truncate"> Strong Porco </span> </div> <span class="ml-3 flex-shrink-0" title="patreon">  <a href="https://patreon.com/khada_model_viewer" target="_blank" rel="noopener noreferrer" aria-label="Patreon profile of Strong Porco"> <svg height="20" width="20" class="text-[#F96854]" viewBox="0 0 256 256" width="1.2em" height="1.2em"><path fill="currentColor" d="M232 93.17c0 41-29.69 52.47-53.55 61.67c-8.41 3.24-16.35 6.3-22.21 10.28c-11.39 7.72-18.59 21.78-25.55 35.38c-9.94 19.42-20.23 39.5-43.17 39.5c-12.91 0-24.61-11.64-33.85-33.66s-14.31-51-13.61-77.45c1.08-40.65 14.58-62.68 25.7-74c14.95-15.2 35.24-25.3 58.68-29.2c21.79-3.62 44.14-1.38 62.93 6.3C215.73 43.6 232 65.9 232 93.17"></path></svg> </a> </span> </div>  <div class="mt-auto text-right text-xs text-gray-500 dark:text-gray-400">5/11/2026</div> </div> </div> </div> <div class="mb-10 block lg:hidden"> <div class="grid w-full place-content-center rounded-md border bg-white p-3 text-center dark:bg-neutral-900"> <div class="mb-1 text-[10px] font-bold text-gray-500 uppercase dark:text-gray-400 text-center"> Advertisement </div> <div align="center" class="h-[270px] w-[300px] flex justify-center items-center"> <div class="statikk-container"> <div id="mobile-mpu"></div> </div> <div id="ad-alternatives" class="hidden h-full w-full"> <div class="alternative hidden h-full w-full" data-banner-name="AdBlockerBanner"> <a href="https://ko-fi.com/khada3d" target="_blank" class="block w-full h-full"> <img src="/SupportUs/1_default.webp" id="ad-blocker-image" alt="Support Us - Help keep this site alive" loading="lazy" decoding="async" width="600" height="280" class="w-full shadow-lg transition-all duration-300 hover:shadow-xl hover:transform hover:scale-[1.01] object-contain h-auto max-h-[280px]"> </a> <script>(function(){const localeSuffix = "default";

  document.addEventListener('DOMContentLoaded', () => {
    const image = document.getElementById('ad-blocker-image');
    if (image) {
      const imageNumbers = ['1'];
      const randomIndex = Math.floor(Math.random() * imageNumbers.length);
      const imageNumber = imageNumbers[randomIndex];
      image.src = `/SupportUs/${imageNumber}_${localeSuffix}.webp`;
    }
  });
})();</script> </div> </div> <script type="module" src="/_astro/AdFallback.astro_astro_type_script_index_0_lang.CrCZV5mM.js"></script> </div> </div> </div> <div class="flex"> <div> <a class="bold mb-2 text-xl font-medium" href="#latest-additions" id="latest-additions" tabindex="-1"> Latest Additions </a> <div class="w-full">  <div class="w-full gap-3 border-l my-5"> <div class="flex flex-col ml-2 md:ml-4 [&>*:last-child>div:nth-child(2)]:border-b-0"> <div class="patch-group"> <div class="text-sm font-semibold ml-3 opacity-80 mt-0">PBE</div> <div class="flex flex-wrap gap-3 pb-1 border-b"> <a href="/model-viewer?id=7059" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/lol/tiles/7059.webp" alt="Prestige Sinful Shores LeBlanc" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Prestige Sinful Shores LeBlanc </p> </a><a href="/model-viewer?id=63053" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/lol/tiles/63053.webp" alt="Sinful Shores Brand" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Sinful Shores Brand </p> </a><a href="/model-viewer?id=910021" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/lol/tiles/910021.webp" alt="Sinful Shores Hwei" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Sinful Shores Hwei </p> </a> </div> <div class="mx-3 w-1"></div> </div><div class="patch-group"> <div class="text-sm font-semibold ml-3 opacity-80 mt-3">26.11</div> <div class="flex flex-wrap gap-3 pb-1 border-b"> <a href="/model-viewer?id=131077" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/lol/tiles/131077.webp" alt="Eclipse Eternal Aspect Diana" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Eclipse Eternal Aspect Diana </p> </a><a href="/model-viewer?id=131076" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/lol/tiles/131076.webp" alt="Eternal Aspect Diana" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Eternal Aspect Diana </p> </a><a href="/model-viewer?id=89064" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/lol/tiles/89064.webp" alt="Eternal Aspect Leona" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Eternal Aspect Leona </p> </a><a href="/model-viewer?id=161029" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/lol/tiles/161029.webp" alt="Spaghetti alla Vel'Koz" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Spaghetti alla Vel&#39;Koz </p> </a><a href="/model-viewer?id=39063" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/lol/tiles/39063.webp" alt="Breadsticks Irelia" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Breadsticks Irelia </p> </a><a href="/model-viewer?id=420037" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/lol/tiles/420037.webp" alt="Pasta Maker Illaoi" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Pasta Maker Illaoi </p> </a><a href="/model-viewer?id=14050" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/lol/tiles/14050.webp" alt="Pizza Chef Sion" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Pizza Chef Sion </p> </a> </div> <div class="mx-3 w-1"></div> </div><div class="patch-group"> <div class="text-sm font-semibold ml-3 opacity-80 mt-3">26.10</div> <div class="flex flex-wrap gap-3 pb-1 border-b"> <a href="/model-viewer?id=427031" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/lol/tiles/427031.webp" alt="Rain Shepherd Ivern" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Rain Shepherd Ivern </p> </a><a href="/model-viewer?id=133024" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/lol/tiles/133024.webp" alt="PROJECT: Quinn" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> PROJECT: Quinn </p> </a> </div> <div class="mx-3 w-1"></div> </div><div class="patch-group"> <div class="text-sm font-semibold ml-3 opacity-80 mt-3">26.9</div> <div class="flex flex-wrap gap-3 pb-1 border-b"> <a href="/model-viewer?id=35071" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/lol/tiles/35071.webp" alt="Prestige Pandemonium Shaco" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Prestige Pandemonium Shaco </p> </a><a href="/model-viewer?id=67067" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/lol/tiles/67067.webp" alt="Demoncursed Vayne" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Demoncursed Vayne </p> </a><a href="/model-viewer?id=1059" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/lol/tiles/1059.webp" alt="Pandemonium Annie" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Pandemonium Annie </p> </a><a href="/model-viewer?id=203045" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/lol/tiles/203045.webp" alt="Pandemonium Kindred" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Pandemonium Kindred </p> </a> </div> <div class="mx-3 w-1"></div> </div><div class="patch-group"> <div class="text-sm font-semibold ml-3 opacity-80 mt-3">Tacticians</div> <div class="flex flex-wrap gap-3 pb-1 border-b"> <a href="/model-viewer?id=54004&#38;group=tft" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/tft/tiles/54004.webp" alt="Chibi Cafe Cuties Annie" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Chibi Cafe Cuties Annie </p> </a><a href="/model-viewer?id=151002&#38;group=tft" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/tft/tiles/151002.webp" alt="Chibi Cafe Cuties Vex" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Chibi Cafe Cuties Vex </p> </a><a href="/model-viewer?id=151001&#38;group=tft" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/tft/tiles/151001.webp" alt="Chibi Vex" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Chibi Vex </p> </a><a href="/model-viewer?id=129001&#38;group=tft" class="relative flex w-40 flex-col items-center p-2 text-center" data-astro-prefetch> <div class="group relative transition-all hover:-translate-y-1"> <img src="https://cdn.modelviewer.lol/tft/tiles/129001.webp" alt="Darius Unbound" aria-hidden="true" loading="lazy" decoding="async" width="138" height="184" class="h-[184px] w-[138px] rounded-lg object-cover object-center drop-shadow-xl">  </div> <p class="mt-2 line-clamp-3 w-full text-sm text-gray-600 dark:text-gray-400"> Darius Unbound </p> </a> </div> <div class="mx-3 w-1"></div> </div> </div> </div> </div> </div> <div class="hidden lg:block ml-8"> <div class="border-input sticky top-5 rounded-md border bg-white p-3 text-center dark:bg-neutral-900 min-h-0 statikk-container mr-4"> <div class="mb-1 text-center text-[10px] font-bold text-gray-500 uppercase dark:text-gray-400"> Advertisement </div> <div class="min-h-[600px] w-[160px]"> <div class="statikk-container h-full w-full"> <div id="skyscraper-r"></div> </div> </div> </div> </div> </div> </section> </main>  </span> <footer class="bg-neutral-100 pb-32 dark:bg-neutral-950 mt-[-1px] pt-8"> <div class="flex items-center py-2 px-8"> <div class="flex-1 border-t border-neutral-300 dark:border-neutral-800"></div> <img src="/logo.svg" alt loading="lazy" decoding="async" width="28" height="28" class="mx-4"> <div class="flex-1 border-t border-neutral-300 dark:border-neutral-800"></div> </div> <div class="mt-6 flex items-center justify-center gap-6"> <div class="flex items-center gap-2"> <a href="https://apps.apple.com/us/app/khada-model-viewer-for-lol/id1490688355" target="_blank" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors" title="App Store" aria-label="App Store"> <svg height="24" width="24" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="M17.05 20.28c-.98.95-2.05.8-3.08.35c-1.09-.46-2.09-.48-3.24 0c-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8c1.18-.24 2.31-.93 3.57-.84c1.51.12 2.65.72 3.4 1.8c-3.12 1.87-2.38 5.98.48 7.13c-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25c.29 2.58-2.34 4.5-3.74 4.25"></path></svg> </a><a href="https://play.google.com/store/apps/details?id=com.Khada.Online3DLOL" target="_blank" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors" title="Google Play" aria-label="Google Play"> <svg height="24" width="24" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="M1 18q.225-2.675 1.638-4.925T6.4 9.5L4.55 6.3q-.15-.225-.075-.475T4.8 5.45q.2-.125.45-.05t.4.3L7.5 8.9Q9.65 8 12 8t4.5.9l1.85-3.2q.15-.225.4-.3t.45.05q.25.125.325.375t-.075.475L17.6 9.5q2.35 1.325 3.762 3.575T23 18zm6-2.75q.525 0 .888-.363T8.25 14t-.363-.888T7 12.75t-.888.363T5.75 14t.363.888t.887.362m10 0q.525 0 .888-.363T18.25 14t-.363-.888T17 12.75t-.888.363t-.362.887t.363.888t.887.362"></path></svg> </a> </div> <span class="text-neutral-400 dark:text-neutral-500">|</span> <div class="flex items-center gap-2"> <a href="https://www.ko-fi.com/khada3d" target="_blank" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors" title="Ko-Fi" aria-label="Ko-Fi"> <svg height="24" width="24" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="M11.351 2.715c-2.7 0-4.986.025-6.83.26C2.078 3.285 0 5.154 0 8.61c0 3.506.182 6.13 1.585 8.493c1.584 2.701 4.233 4.182 7.662 4.182h.83c4.209 0 6.494-2.234 7.637-4a9.5 9.5 0 0 0 1.091-2.338C21.792 14.688 24 12.22 24 9.208v-.415c0-3.247-2.13-5.507-5.792-5.87c-1.558-.156-2.65-.208-6.857-.208m0 1.947c4.208 0 5.09.052 6.571.182c2.624.311 4.13 1.584 4.13 4v.39c0 2.156-1.792 3.844-3.87 3.844h-.935l-.156.649c-.208 1.013-.597 1.818-1.039 2.546c-.909 1.428-2.545 3.064-5.922 3.064h-.805c-2.571 0-4.831-.883-6.078-3.195c-1.09-2-1.298-4.155-1.298-7.506c0-2.181.857-3.402 3.012-3.714c1.533-.233 3.559-.26 6.39-.26m6.547 2.287c-.416 0-.65.234-.65.546v2.935c0 .311.234.545.65.545c1.324 0 2.051-.754 2.051-2s-.727-2.026-2.052-2.026m-10.39.182c-1.818 0-3.013 1.48-3.013 3.142c0 1.533.858 2.857 1.949 3.897c.727.701 1.87 1.429 2.649 1.896a1.47 1.47 0 0 0 1.507 0c.78-.467 1.922-1.195 2.623-1.896c1.117-1.039 1.974-2.364 1.974-3.897c0-1.662-1.247-3.142-3.039-3.142c-1.065 0-1.792.545-2.338 1.298c-.493-.753-1.246-1.298-2.312-1.298"></path></svg> </a><a href="https://www.patreon.com/khada_model_viewer" target="_blank" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors" title="Patreon" aria-label="Patreon"> <svg height="24" width="24" viewBox="0 0 256 256" width="1.2em" height="1.2em"><path fill="currentColor" d="M232 93.17c0 41-29.69 52.47-53.55 61.67c-8.41 3.24-16.35 6.3-22.21 10.28c-11.39 7.72-18.59 21.78-25.55 35.38c-9.94 19.42-20.23 39.5-43.17 39.5c-12.91 0-24.61-11.64-33.85-33.66s-14.31-51-13.61-77.45c1.08-40.65 14.58-62.68 25.7-74c14.95-15.2 35.24-25.3 58.68-29.2c21.79-3.62 44.14-1.38 62.93 6.3C215.73 43.6 232 65.9 232 93.17"></path></svg> </a> </div> <span class="text-neutral-400 dark:text-neutral-500">|</span> <div class="flex items-center gap-2"> <a href="https://www.x.com/khada3d" target="_blank" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors" title="X" aria-label="X"> <svg height="24" width="24" viewBox="0 0 32 32" width="1.2em" height="1.2em"><path fill="currentColor" d="M18.234 14.162L26.977 4h-2.072l-7.591 8.824L11.25 4H4.258l9.169 13.343L4.258 28H6.33l8.016-9.318L20.75 28h6.993zm-2.837 3.299l-.93-1.329L7.078 5.56h3.182l5.964 8.532l.93 1.329l7.753 11.09h-3.182z"></path></svg> </a><a href="mailto:devkhada44@gmail.com" target="_blank" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors" title="Mail" aria-label="Mail"> <svg height="24" width="24" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7l8-5V6l-8 5l-8-5v2z"></path></svg> </a> </div> </div> <div class="mt-6 flex items-center justify-center flex-wrap gap-y-1"> <a class="text-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors" href="/privacy/privacy-policy" target="_blank" rel="noopener">Privacy Policy</a> <span class="mx-2 text-lg text-neutral-500 dark:text-neutral-500">·</span> <a class="text-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors" href="/privacy/terms-of-use" target="_blank" rel="noopener">Terms of Use</a> <span class="mx-2 text-lg text-neutral-500 dark:text-neutral-500">·</span> <a class="text-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors" href="/about" target="_blank">About</a> <span class="mx-2 text-lg text-neutral-500 dark:text-neutral-500">·</span> <a class="text-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors" href="/advertise">Advertise with Khada</a> </div> <div class="mt-6 px-4"> <p class="text-center text-xs text-neutral-600 dark:text-neutral-400 max-w-xl mx-auto leading-relaxed"> Khada was created under Riot Games&#39;s &quot;Legal Jibber Jabber&quot; policy using assets owned by Riot Games. Riot Games does not endorse or sponsor this project. </p> <p class="mt-3 text-center text-xs text-neutral-600 dark:text-neutral-400">© 2016-2026 Khada, All rights reserved.</p> </div> </footer> </div> </div> </div> <div id="venatus-footer"></div> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a0434be75d013498',t:'MTc4MDIwMjM4NA=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body></html> <script>(function(){const latestPatchSkins = [{"name":"Prestige Sinful Shores LeBlanc","id":7059,"rarity":"kLegendary","alias":"leblanc","backgroundDataUrl":"radial-gradient(ellipse at 30% 20%, rgb(129,108,136) 0%, rgb(143,147,164) 50%, rgb(29,31,60) 100%)"},{"name":"Sinful Shores Brand","id":63053,"rarity":"kEpic","alias":"brand","backgroundDataUrl":"radial-gradient(ellipse at 30% 20%, rgb(135,61,99) 0%, rgb(143,81,155) 50%, rgb(43,21,56) 100%)"},{"name":"Sinful Shores Hwei","id":910021,"rarity":"kEpic","alias":"hwei","backgroundDataUrl":"radial-gradient(ellipse at 30% 20%, rgb(46,42,84) 0%, rgb(103,102,175) 50%, rgb(50,28,63) 100%)"}];

if (!latestPatchSkins?.length) return;

const skin = latestPatchSkins[Math.floor(Math.random() * latestPatchSkins.length)];
const baseUrl = document.documentElement.dataset.baseUrl || 'https://cdn.modelviewer.lol';

// Set canvas data (must happen before Canvas.astro script)
document.getElementById('canvas').dataset.id = String(skin.id);
document.getElementById('canvas').dataset.alias = skin.alias;

// Set background (gradient from palette, or fallback to tile URL)
const bg = skin.backgroundDataUrl;
if (bg && bg.startsWith('radial-gradient')) {
  document.documentElement.style.setProperty('--splashart-bg', bg);
} else {
  const bgUrl = bg || `${baseUrl}/lol/tiles/${skin.id}.webp`;
  document.documentElement.style.setProperty('--splashart-bg', `url("${bgUrl}")`);
}

// Update UI elements
document.getElementById('homepage-web-button').href = `model-viewer?id=${skin.id}`;
document.getElementById('skin-shortcut').href = `model-viewer?id=${skin.id}`;
document.getElementById('skin-shortcut-name').textContent = skin.name;
document.getElementById('skin-shortcut-icon').src = `${baseUrl}/lol/circles/${skin.id}.webp`;
document.getElementById('skin-shortcut-icon').alt = skin.name;
})();</script>