{"id":2059,"date":"2026-07-03T09:34:44","date_gmt":"2026-07-03T09:34:44","guid":{"rendered":"https:\/\/kojoon.com\/?page_id=2059"},"modified":"2026-07-09T01:41:33","modified_gmt":"2026-07-09T01:41:33","slug":"kojoon-active-scroll-demo","status":"publish","type":"page","link":"https:\/\/kojoon.com\/it\/kojoon-active-scroll-demo\/","title":{"rendered":"KOJOON Active Scroll Demo"},"content":{"rendered":"\ufeff\n<style>\n  body.page-id-2059 { background: #030509; overflow-x: hidden; }\n  body.page-id-2059 .entry-title,\n  body.page-id-2059 .page-title,\n  body.page-id-2059 header,\n  body.page-id-2059 footer,\n  body.page-id-2059 .site-header,\n  body.page-id-2059 .site-footer { display: none !important; }\n\n  :root {\n    --ink: #030509;\n    --paper: #f2fbff;\n    --muted: rgba(242,251,255,.64);\n    --a: #74ffe8;\n    --b: #ff4f9a;\n    --c: #f5ff86;\n  }\n  * { box-sizing: border-box; }\n  html body.page-id-2059, body.page-id-2059 {\n    margin: 0;\n    background: var(--ink);\n    color: var(--paper);\n    font-family: Arial, Helvetica, sans-serif;\n    overflow-x: hidden;\n  }\n  .karch-page { position: relative; height: 620vh; margin-left: calc(50% - 50vw); width: 100vw; max-width: 100vw; background: var(--ink); }\n  .karch {\n    position: sticky;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    overflow: hidden;\n    background:\n      radial-gradient(circle at var(--light-x, 58%) var(--light-y, 38%), color-mix(in srgb, var(--a) 34%, transparent), transparent 22%),\n      radial-gradient(circle at 18% 78%, color-mix(in srgb, var(--b) 25%, transparent), transparent 28%),\n      linear-gradient(118deg, #020407, #081016 46%, #040307);\n    perspective: 1200px;\n  }\n  .karch canvas {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n  }\n  .noise {\n    position: absolute;\n    inset: -20%;\n    z-index: 2;\n    opacity: .2;\n    background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.25px);\n    background-size: 4px 4px;\n    mix-blend-mode: screen;\n    animation: noiseMove 6s steps(8) infinite;\n    pointer-events: none;\n  }\n  @keyframes noiseMove { to { transform: translate3d(-3%, 4%, 0); } }\n  .grid {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    z-index: 2;\n    pointer-events: none;\n    background:\n      linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px),\n      linear-gradient(0deg, rgba(255,255,255,.028) 1px, transparent 1px);\n    background-size: 86px 86px;\n    mask-image: radial-gradient(circle at 50% 50%, black 0 60%, transparent 82%);\n  }\n  .topnav {\n    position: absolute;\n    z-index: 9;\n    top: 34px;\n    left: 50%;\n    transform: translateX(-50%);\n    display: flex;\n    align-items: center;\n    gap: 34px;\n    padding: 15px 34px;\n    border: 1px solid rgba(255,255,255,.22);\n    border-radius: 999px;\n    background: rgba(4, 9, 13, .68);\n    box-shadow: 0 0 42px color-mix(in srgb, var(--a) 20%, transparent), inset 0 0 22px rgba(255,255,255,.06);\n    backdrop-filter: blur(18px);\n    text-transform: uppercase;\n    letter-spacing: .12em;\n    font-size: 13px;\n  }\n  .topnav b { color: var(--a); }\n  .topnav span { color: rgba(242,251,255,.72); }\n  .copy {\n    position: absolute;\n    z-index: 7;\n    left: 6.5vw;\n    top: 20vh;\n    width: min(620px, 42vw);\n    transform: translate3d(0, var(--copy-y, 0), 0);\n    opacity: var(--copy-o, 1);\n  }\n  .eyebrow {\n    color: var(--a);\n    text-transform: uppercase;\n    letter-spacing: .22em;\n    font-size: 12px;\n    margin-bottom: 22px;\n  }\n  h1 {\n    margin: 0;\n    font-size: clamp(50px, 6.9vw, 124px);\n    line-height: .9;\n    letter-spacing: 0;\n    font-weight: 800;\n  }\n  h1 span {\n    color: transparent;\n    background: linear-gradient(90deg, var(--a), var(--b), var(--c));\n    -webkit-background-clip: text;\n    background-clip: text;\n  }\n  .intro {\n    max-width: 520px;\n    margin: 24px 0 0;\n    color: var(--muted);\n    font-size: 16px;\n    line-height: 1.75;\n  }\n  .scroll-call {\n    position: absolute;\n    z-index: 8;\n    left: 50%;\n    top: 23vh;\n    transform: translateX(-50%);\n    color: rgba(242,251,255,.54);\n    text-transform: uppercase;\n    letter-spacing: .12em;\n    font-size: 12px;\n  }\n  .building-wrap {\n    position: absolute;\n    z-index: 5;\n    left: 52%;\n    top: 54%;\n    width: min(44vw, 650px);\n    height: min(58vh, 620px);\n    transform: translate(-50%, -50%) rotateX(58deg) rotateZ(var(--model-r, -18deg)) scale(var(--model-s, 1));\n    transform-style: preserve-3d;\n  }\n  .blueprint-ring {\n    position: absolute;\n    inset: -4% 8%;\n    border: 1px solid color-mix(in srgb, var(--a) 44%, transparent);\n    border-radius: 50%;\n    box-shadow: 0 0 72px color-mix(in srgb, var(--a) 24%, transparent), inset 0 0 36px color-mix(in srgb, var(--b) 18%, transparent);\n    transform: translateZ(-26px);\n  }\n  .blueprint-ring::before,\n  .blueprint-ring::after {\n    content: \"\";\n    position: absolute;\n    border-radius: 50%;\n    border: 1px solid rgba(255,255,255,.18);\n  }\n  .blueprint-ring::before { inset: 16%; }\n  .blueprint-ring::after { inset: 34%; border-color: color-mix(in srgb, var(--c) 56%, transparent); }\n  .tower {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    width: 42%;\n    height: 62%;\n    transform: translate(-50%, -50%) translateZ(80px) rotateX(-8deg) rotateY(var(--tower-y, -18deg));\n    transform-style: preserve-3d;\n  }\n  .floor {\n    position: absolute;\n    left: 0;\n    right: 0;\n    height: 12%;\n    border: 1px solid rgba(255,255,255,.2);\n    border-radius: 10px;\n    background:\n      linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),\n      repeating-linear-gradient(90deg, transparent 0 16px, rgba(255,255,255,.09) 17px 18px);\n    box-shadow: 0 20px 50px rgba(0,0,0,.28), 0 0 28px color-mix(in srgb, var(--a) 14%, transparent);\n    backdrop-filter: blur(6px);\n  }\n  .floor:nth-child(1) { bottom: 0%; transform: translateZ(0); }\n  .floor:nth-child(2) { bottom: 10%; transform: translateZ(30px); }\n  .floor:nth-child(3) { bottom: 20%; transform: translateZ(60px); }\n  .floor:nth-child(4) { bottom: 30%; transform: translateZ(90px); }\n  .floor:nth-child(5) { bottom: 40%; transform: translateZ(120px); }\n  .floor:nth-child(6) { bottom: 50%; transform: translateZ(150px); }\n  .floor:nth-child(7) { bottom: 60%; transform: translateZ(180px); }\n  .floor:nth-child(8) { bottom: 70%; transform: translateZ(210px); }\n  .core-mark {\n    position: absolute;\n    left: 36%;\n    top: 22%;\n    width: 28%;\n    aspect-ratio: 1;\n    border: 2px solid rgba(255,255,255,.78);\n    border-radius: 38% 62% 54% 46%;\n    box-shadow: 0 0 32px rgba(255,255,255,.32), 0 0 68px color-mix(in srgb, var(--b) 28%, transparent);\n    transform: translateZ(250px) rotateZ(calc(var(--model-r, 0deg) * -1));\n  }\n  .site-ribbon {\n    position: absolute;\n    z-index: 4;\n    left: 50%;\n    top: 56%;\n    width: min(21vw, 300px);\n    height: min(64vh, 620px);\n    border-radius: 50%;\n    border: 2px solid color-mix(in srgb, var(--b) 54%, transparent);\n    border-left-color: color-mix(in srgb, var(--a) 72%, transparent);\n    box-shadow: 0 0 54px color-mix(in srgb, var(--b) 28%, transparent);\n    transform: translate(-50%, -50%) rotate(var(--ribbon-r, -24deg)) skewY(18deg);\n    filter: blur(.2px);\n  }\n  .plan-card {\n    position: absolute;\n    z-index: 6;\n    right: 6vw;\n    top: 24vh;\n    width: min(390px, 29vw);\n    border: 1px solid rgba(255,255,255,.22);\n    border-radius: 22px;\n    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04));\n    box-shadow: 0 34px 90px rgba(0,0,0,.46), 0 0 40px color-mix(in srgb, var(--a) 18%, transparent);\n    backdrop-filter: blur(16px);\n    padding: 24px;\n    transform: translate3d(var(--card-x, 0), var(--card-y, 0), 0) rotateZ(var(--card-r, -7deg));\n  }\n  .mini-plan {\n    position: relative;\n    height: 145px;\n    margin-bottom: 20px;\n    border-radius: 16px;\n    border: 1px solid rgba(255,255,255,.14);\n    overflow: hidden;\n    background:\n      linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),\n      linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px),\n      radial-gradient(circle at 36% 42%, var(--a), transparent 20%),\n      radial-gradient(circle at 72% 60%, var(--b), transparent 27%);\n    background-size: 26px 26px, 26px 26px, auto, auto;\n  }\n  .mini-plan i {\n    position: absolute;\n    display: block;\n    border: 2px solid rgba(255,255,255,.72);\n    border-radius: 8px;\n  }\n  .mini-plan i:nth-child(1) { left: 18px; top: 22px; width: 108px; height: 74px; }\n  .mini-plan i:nth-child(2) { left: 126px; top: 48px; width: 112px; height: 72px; }\n  .mini-plan i:nth-child(3) { right: 22px; top: 18px; width: 58px; height: 102px; border-color: var(--c); }\n  .plan-card strong { display: block; font-size: 25px; line-height: 1.08; }\n  .plan-card small { display: block; margin-top: 10px; color: rgba(242,251,255,.64); line-height: 1.55; }\n  .spec-list {\n    position: absolute;\n    z-index: 6;\n    left: 6.5vw;\n    bottom: 7vh;\n    width: 315px;\n    padding: 18px 20px;\n    border: 1px solid rgba(255,255,255,.18);\n    border-radius: 18px;\n    background: rgba(0,0,0,.3);\n    backdrop-filter: blur(12px);\n    text-transform: uppercase;\n    letter-spacing: .08em;\n    font-size: 12px;\n  }\n  .spec-list b { display: block; margin-bottom: 12px; color: var(--paper); letter-spacing: .12em; }\n  .spec-list span { display: block; margin: 10px 0; color: rgba(242,251,255,.72); }\n  .spec-list span::before { content: \"-> \"; color: var(--a); }\n  .progress {\n    position: absolute;\n    z-index: 7;\n    right: 6vw;\n    bottom: 7vh;\n    width: 250px;\n    text-transform: uppercase;\n    letter-spacing: .12em;\n    font-size: 12px;\n    color: rgba(242,251,255,.68);\n  }\n  .progress-row { display: flex; justify-content: space-between; margin-bottom: 14px; }\n  .track { height: 3px; background: rgba(255,255,255,.14); overflow: hidden; }\n  .track i { display: block; height: 100%; width: var(--bar, 0%); background: linear-gradient(90deg, var(--a), var(--b), var(--c)); }\n  .material-strip {\n    position: absolute;\n    z-index: 6;\n    right: 6vw;\n    bottom: 15vh;\n    display: flex;\n    gap: 10px;\n    transform: translateY(var(--strip-y, 0));\n  }\n  .swatch {\n    width: 42px;\n    height: 72px;\n    border-radius: 14px;\n    border: 1px solid rgba(255,255,255,.18);\n    box-shadow: 0 18px 42px rgba(0,0,0,.35);\n  }\n  .swatch:nth-child(1) { background: linear-gradient(135deg, #d8d2c8, #827568); }\n  .swatch:nth-child(2) { background: linear-gradient(135deg, #31251f, #a77b53); }\n  .swatch:nth-child(3) { background: linear-gradient(135deg, #d8ecf0, #7b9fa6); }\n  .swatch:nth-child(4) { background: linear-gradient(135deg, #16191d, #5e6974); }\n  @media (max-width: 900px) {\n    .karch-page { height: 600vh; }\n    .topnav { top: 24px; gap: 14px; padding: 11px 14px; font-size: 10px; max-width: calc(100vw - 24px); }\n    .copy { left: 24px; right: 24px; top: 16vh; width: auto; }\n    h1 { font-size: clamp(43px, 14vw, 76px); }\n    .intro { max-width: 350px; font-size: 15px; }\n    .scroll-call { top: 47vh; }\n    .building-wrap { left: 55%; top: 58%; width: 96vw; height: 54vh; opacity: .9; }\n    .site-ribbon { left: 55%; top: 60%; width: 48vw; height: 45vh; }\n    .plan-card { right: 18px; top: auto; bottom: 94px; width: 49vw; min-width: 178px; padding: 16px; }\n    .mini-plan { height: 94px; margin-bottom: 14px; }\n    .plan-card strong { font-size: 18px; }\n    .plan-card small { display: none; }\n    .spec-list { display: none; }\n    .material-strip { right: 24px; bottom: 230px; gap: 8px; }\n    .swatch { width: 32px; height: 54px; border-radius: 11px; }\n    .progress { left: 24px; right: 24px; bottom: 28px; width: auto; }\n  }\n\n<\/style>\n<section class=\"karch-page\">\n<main class=\"karch\" id=\"karch\">\n  <canvas><\/canvas>\n  <div class=\"noise\"><\/div>\n  <div class=\"grid\"><\/div>\n  <nav class=\"topnav\"><b>KOJOON<\/b><span>Work<\/span><span>Systems<\/span><span>Contact<\/span><\/nav>\n  <div class=\"scroll-call\">Scroll Down<\/div>\n  <section class=\"copy\">\n    <div class=\"eyebrow\">Architectural building material experience<\/div>\n    <h2>Build the <span>whole house<\/span> in motion.<\/h2>\n    <p class=\"intro\">A cinematic interactive concept for KOJOON: architecture, interior systems and export supply move as one digital showroom.<\/p>\n  <\/section>\n  <div class=\"site-ribbon\"><\/div>\n  <section class=\"building-wrap\">\n    <div class=\"blueprint-ring\"><\/div>\n    <div class=\"tower\">\n      <i class=\"floor\"><\/i><i class=\"floor\"><\/i><i class=\"floor\"><\/i><i class=\"floor\"><\/i>\n      <i class=\"floor\"><\/i><i class=\"floor\"><\/i><i class=\"floor\"><\/i><i class=\"floor\"><\/i>\n      <i class=\"core-mark\"><\/i>\n    <\/div>\n  <\/section>\n  <aside class=\"plan-card\">\n    <div class=\"mini-plan\"><i><\/i><i><\/i><i><\/i><\/div>\n    <strong>Masterplan Showroom<\/strong>\n    <small>From villa shell to kitchen cabinets, wardrobes, wall panels and delivery packages.<\/small>\n  <\/aside>\n  <aside class=\"spec-list\">\n    <b>System Menu<\/b>\n    <span>Villa planning<\/span>\n    <span>Kitchen cabinets<\/span>\n    <span>Wardrobe systems<\/span>\n    <span>Wall panel supply<\/span>\n  <\/aside>\n  <div class=\"material-strip\"><i class=\"swatch\"><\/i><i class=\"swatch\"><\/i><i class=\"swatch\"><\/i><i class=\"swatch\"><\/i><\/div>\n  <div class=\"progress\"><div class=\"progress-row\"><span>Project<\/span><span class=\"count\">01 \/ 04<\/span><\/div><div class=\"track\"><i><\/i><\/div><\/div>\n<\/main>\n<\/section>\n<script>\n(function(){\n  const root = document.getElementById('karch');\n  const canvas = root.querySelector('canvas');\n  const ctx = canvas.getContext('2d');\n  const dpr = Math.min(devicePixelRatio || 1, 2);\n  const title = root.querySelector('h1');\n  const intro = root.querySelector('.intro');\n  const cardTitle = root.querySelector('.plan-card strong');\n  const cardText = root.querySelector('.plan-card small');\n  const count = root.querySelector('.count');\n  const specs = Array.from(root.querySelectorAll('.spec-list span'));\n  const scenes = [\n    {\n      count:'01 \/ 04', a:'#74ffe8', b:'#ff4f9a', c:'#f5ff86',\n      title:'Build the <span>whole house<\/span> in motion.',\n      text:'A cinematic interactive concept for KOJOON: architecture, interior systems and export supply move as one digital showroom.',\n      card:'Masterplan Showroom',\n      detail:'From villa shell to kitchen cabinets, wardrobes, wall panels and delivery packages.',\n      specs:['Villa planning','Kitchen cabinets','Wardrobe systems','Wall panel supply']\n    },\n    {\n      count:'02 \/ 04', a:'#6ff5ff', b:'#7386ff', c:'#ffffff',\n      title:'Turn drawings into <span>villa systems.<\/span>',\n      text:'Blueprint lines, facade grids and custom rooms become one visual sales journey for overseas builders.',\n      card:'Villa Building Package',\n      detail:'Facade, interior doors, wall panels and fixed furniture for complete residential projects.',\n      specs:['Facade system','Door wall cabinet','Room schedule','Drawing support']\n    },\n    {\n      count:'03 \/ 04', a:'#ff72d8', b:'#70ffd0', c:'#ffe27a',\n      title:'Show every <span>interior module.<\/span>',\n      text:'Kitchen islands, wardrobes, storage walls and finishes move as modular components instead of static product photos.',\n      card:'Interior System Kit',\n      detail:'Kitchen, wardrobe, bathroom vanity, wall panel and hardware options in one coordinated package.',\n      specs:['Kitchen island','Glass wardrobe','Material board','Hardware list']\n    },\n    {\n      count:'04 \/ 04', a:'#ffb35d', b:'#ff4b8e', c:'#7ef7ff',\n      title:'Package export as <span>one story.<\/span>',\n      text:'Factory capability, quality control and container delivery become part of the visual trust system.',\n      card:'Export Delivery Flow',\n      detail:'OEM \/ ODM, production tracking, packing details and shipping support for overseas projects.',\n      specs:['OEM \/ ODM','QC checklist','Container loading','After-sales support']\n    }\n  ];\n  let w=1,h=1,particles=[],progress=0,active=-1,mouseX=.5,mouseY=.5;\n  function resize(){\n    w = canvas.clientWidth;\n    h = canvas.clientHeight;\n    canvas.width = Math.floor(w*dpr);\n    canvas.height = Math.floor(h*dpr);\n    ctx.setTransform(dpr,0,0,dpr,0,0);\n    const n = innerWidth < 900 ? 520 : 1100;\n    particles = Array.from({length:n}, (_,i)=>({\n      x: Math.random()*w,\n      y: Math.random()*h,\n      tx: Math.random()*w,\n      ty: Math.random()*h,\n      seed: Math.random()*1000,\n      size: .6 + Math.random()*2.2,\n      t: i \/ n\n    }));\n  }\n  function target(p, i, scene, local){\n    const cx = w * (.52 + (mouseX-.5)*.05);\n    const cy = h * (.54 + (mouseY-.5)*.05);\n    const t = p.t;\n    if(scene === 0){\n      const a = t * Math.PI * 12 + progress * 8;\n      const r = 60 + t * Math.min(w,h) * .42;\n      return [cx + Math.cos(a)*r*.68, cy + Math.sin(a*1.15)*r*.48];\n    }\n    if(scene === 1){\n      const col = i % 36;\n      const row = Math.floor(i\/36) % 28;\n      return [w*.34 + col*18 + Math.sin(row*.5 + local*6)*14, h*.20 + row*16];\n    }\n    if(scene === 2){\n      const room = i % 4;\n      const baseX = [w*.38,w*.52,w*.42,w*.58][room];\n      const baseY = [h*.38,h*.40,h*.56,h*.58][room];\n      const a = t*Math.PI*22 + local*5;\n      return [baseX + Math.cos(a)*90 + Math.sin(t*50)*12, baseY + Math.sin(a)*52];\n    }\n    const col = i % 44;\n    const row = Math.floor(i\/44) % 24;\n    const wave = Math.sin(col*.42 + local*7) * 42;\n    return [w*.25 + col*20, h*.28 + row*18 + wave];\n  }\n  function setScene(idx){\n    if(idx === active) return;\n    active = idx;\n    const s = scenes[idx];\n    root.style.setProperty('--a', s.a);\n    root.style.setProperty('--b', s.b);\n    root.style.setProperty('--c', s.c);\n    title.innerHTML = s.title;\n    intro.textContent = s.text;\n    cardTitle.textContent = s.card;\n    cardText.textContent = s.detail;\n    count.textContent = s.count;\n    specs.forEach((el,i)=>el.textContent = s.specs[i]);\n  }\n  function drawBlueprint(scene, local){\n    ctx.save();\n    ctx.globalAlpha = .34;\n    ctx.strokeStyle = scenes[scene].a;\n    ctx.lineWidth = 1;\n    const ox = w*.18, oy = h*.24, step = innerWidth < 900 ? 34 : 48;\n    for(let x=0;x<8;x++){\n      ctx.beginPath();\n      ctx.moveTo(ox+x*step, oy);\n      ctx.lineTo(ox+x*step + Math.sin(local*5+x)*12, oy+step*5);\n      ctx.stroke();\n    }\n    for(let y=0;y<6;y++){\n      ctx.beginPath();\n      ctx.moveTo(ox, oy+y*step);\n      ctx.lineTo(ox+step*7, oy+y*step + Math.cos(local*5+y)*10);\n      ctx.stroke();\n    }\n    ctx.restore();\n  }\n  function loop(){\n    const max = document.body.scrollHeight - innerHeight;\n    progress = Math.max(0, Math.min(1, scrollY \/ max));\n    const exact = progress * (scenes.length - .001);\n    const idx = Math.floor(exact);\n    const local = exact - idx;\n    const pulse = Math.sin(local*Math.PI);\n    setScene(idx);\n    root.style.setProperty('--bar', (progress*100).toFixed(2)+'%');\n    root.style.setProperty('--model-r', (-20 + progress*120 + (mouseX-.5)*12).toFixed(2)+'deg');\n    root.style.setProperty('--tower-y', (-18 + Math.sin(progress*5)*28).toFixed(2)+'deg');\n    root.style.setProperty('--model-s', (1 + pulse*.12).toFixed(3));\n    root.style.setProperty('--ribbon-r', (-24 + progress*92).toFixed(2)+'deg');\n    root.style.setProperty('--copy-y', (pulse*-18).toFixed(1)+'px');\n    root.style.setProperty('--copy-o', (.78 + pulse*.22).toFixed(3));\n    root.style.setProperty('--card-x', ((local-.5)*-116).toFixed(1)+'px');\n    root.style.setProperty('--card-y', (pulse*-54).toFixed(1)+'px');\n    root.style.setProperty('--card-r', (-7 + local*18).toFixed(2)+'deg');\n    root.style.setProperty('--strip-y', (Math.sin(progress*8)*18).toFixed(1)+'px');\n    root.style.setProperty('--light-x', (58 + (mouseX-.5)*16 + Math.sin(progress*5)*10).toFixed(1)+'%');\n    root.style.setProperty('--light-y', (38 + (mouseY-.5)*12 + Math.cos(progress*4)*10).toFixed(1)+'%');\n    ctx.clearRect(0,0,w,h);\n    drawBlueprint(idx, local);\n    ctx.globalCompositeOperation = 'lighter';\n    const colors = [scenes[idx].a, scenes[idx].b, scenes[idx].c];\n    for(let i=0;i<particles.length;i++){\n      const p = particles[i];\n      const pt = target(p, i, idx, local);\n      p.tx += (pt[0] - p.tx) * .05;\n      p.ty += (pt[1] - p.ty) * .05;\n      p.x += (p.tx - p.x) * .075;\n      p.y += (p.ty - p.y) * .075;\n      ctx.fillStyle = colors[i % 3];\n      ctx.globalAlpha = .23 + Math.sin(performance.now()*.002 + p.seed)*.11;\n      ctx.beginPath();\n      ctx.arc(p.x, p.y, p.size, 0, Math.PI*2);\n      ctx.fill();\n    }\n    ctx.globalAlpha = 1;\n    ctx.globalCompositeOperation = 'source-over';\n    requestAnimationFrame(loop);\n  }\n  addEventListener('resize', resize, {passive:true});\n  addEventListener('mousemove', e => {\n    mouseX = e.clientX \/ innerWidth;\n    mouseY = e.clientY \/ innerHeight;\n  }, {passive:true});\n  resize();\n  loop();\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>\ufeff KOJOONWorkSystemsContact Scroll Down Architectural building material experience Build the whole house in motion. A cinematic interactive concept for KOJOON: architecture, interior systems and export supply move as one digital showroom. Masterplan Showroom From villa shell to kitchen cabinets, wardrobes, wall panels and delivery packages. System Menu Villa planning Kitchen cabinets Wardrobe systems Wall panel [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_thinkrank_schema_form_data":"","_thinkrank_selected_schema_type":"","_thinkrank_additional_schemas":"","_thinkrank_canonical_url":"","_thinkrank_og_title":"","_thinkrank_og_description":"","_thinkrank_og_image":"","_thinkrank_twitter_title":"","_thinkrank_twitter_description":"","_thinkrank_twitter_image":"","_thinkrank_imported_from":"","_thinkrank_focus_keywords":[],"_thinkrank_focus_keyword":"","_thinkrank_robots_meta_enabled":0,"_thinkrank_robots_meta":"","_thinkrank_advanced_robots_meta":"","_thinkrank_exclude_from_search":0,"_thinkrank_exclude_from_archives":0,"_thinkrank_primary_category":0,"_xspeed_no_cache":false,"_xspeed_expiry_hours":0,"footnotes":""},"class_list":["post-2059","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.0 (Yoast SEO v28.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>KOJOON Active Scroll Demo -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kojoon.com\/it\/kojoon-active-scroll-demo\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"KOJOON Active Scroll Demo\" \/>\n<meta property=\"og:description\" content=\"\ufeff KOJOONWorkSystemsContact Scroll Down Architectural building material experience Build the whole house in motion. A cinematic interactive concept for KOJOON: architecture, interior systems and export supply move as one digital showroom. Masterplan Showroom From villa shell to kitchen cabinets, wardrobes, wall panels and delivery packages. System Menu Villa planning Kitchen cabinets Wardrobe systems Wall panel [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kojoon.com\/it\/kojoon-active-scroll-demo\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-09T01:41:33+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kojoon.com\\\/kojoon-active-scroll-demo\\\/\",\"url\":\"https:\\\/\\\/kojoon.com\\\/kojoon-active-scroll-demo\\\/\",\"name\":\"KOJOON Active Scroll Demo -\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kojoon.com\\\/it\\\/#website\"},\"datePublished\":\"2026-07-03T09:34:44+00:00\",\"dateModified\":\"2026-07-09T01:41:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kojoon.com\\\/kojoon-active-scroll-demo\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kojoon.com\\\/kojoon-active-scroll-demo\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kojoon.com\\\/kojoon-active-scroll-demo\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/kojoon.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"KOJOON Active Scroll Demo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kojoon.com\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/kojoon.com\\\/it\\\/\",\"name\":\"\",\"description\":\"One-stop Solution for Residential &amp; Commercial Building Projects\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kojoon.com\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"KOJOON Active Scroll Demo -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kojoon.com\/it\/kojoon-active-scroll-demo\/","og_locale":"it_IT","og_type":"article","og_title":"KOJOON Active Scroll Demo","og_description":"\ufeff KOJOONWorkSystemsContact Scroll Down Architectural building material experience Build the whole house in motion. A cinematic interactive concept for KOJOON: architecture, interior systems and export supply move as one digital showroom. Masterplan Showroom From villa shell to kitchen cabinets, wardrobes, wall panels and delivery packages. System Menu Villa planning Kitchen cabinets Wardrobe systems Wall panel [&hellip;]","og_url":"https:\/\/kojoon.com\/it\/kojoon-active-scroll-demo\/","article_modified_time":"2026-07-09T01:41:33+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tempo di lettura stimato":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kojoon.com\/kojoon-active-scroll-demo\/","url":"https:\/\/kojoon.com\/kojoon-active-scroll-demo\/","name":"KOJOON Active Scroll Demo -","isPartOf":{"@id":"https:\/\/kojoon.com\/it\/#website"},"datePublished":"2026-07-03T09:34:44+00:00","dateModified":"2026-07-09T01:41:33+00:00","breadcrumb":{"@id":"https:\/\/kojoon.com\/kojoon-active-scroll-demo\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kojoon.com\/kojoon-active-scroll-demo\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kojoon.com\/kojoon-active-scroll-demo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kojoon.com\/"},{"@type":"ListItem","position":2,"name":"KOJOON Active Scroll Demo"}]},{"@type":"WebSite","@id":"https:\/\/kojoon.com\/it\/#website","url":"https:\/\/kojoon.com\/it\/","name":"","description":"Soluzione unica per progetti di edilizia residenziale e commerciale","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kojoon.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"}]}},"_links":{"self":[{"href":"https:\/\/kojoon.com\/it\/wp-json\/wp\/v2\/pages\/2059","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kojoon.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kojoon.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kojoon.com\/it\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/kojoon.com\/it\/wp-json\/wp\/v2\/comments?post=2059"}],"version-history":[{"count":0,"href":"https:\/\/kojoon.com\/it\/wp-json\/wp\/v2\/pages\/2059\/revisions"}],"wp:attachment":[{"href":"https:\/\/kojoon.com\/it\/wp-json\/wp\/v2\/media?parent=2059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}