<div class="bg-fx">
  <div class="bg-grid"></div>
  <div class="bg-orb bg-o1"></div>
  <div class="bg-orb bg-o2"></div>
  <div class="bg-orb bg-o3"></div>
  <div class="bg-glow"></div>
  <div class="bg-glow bg-s"></div>
  <canvas class="bg-p"></canvas>
</div>



<script>
(function(){
  var root=document.querySelector('.bg-fx');
  var c=root.querySelector('.bg-p');
  var x=c.getContext('2d');
  var W=window.innerWidth, H=window.innerHeight, mx=W/2, my=H/2;
  var dpr=window.devicePixelRatio||1;

  window.addEventListener('mousemove', function(e){
    mx=e.clientX; my=e.clientY;
    root.style.setProperty('--bmx', mx+'px');
    root.style.setProperty('--bmy', my+'px');
  });

  function R(){
    W=window.innerWidth; H=window.innerHeight;
    c.width=W*dpr; c.height=H*dpr;
    c.style.width=W+'px'; c.style.height=H+'px';
    x.setTransform(1,0,0,1,0,0);
    x.scale(dpr,dpr);
  }
  R();
  window.addEventListener('resize', R);

  var C=['#4285f4','#9b6dff','#ff6b9d','#ffa552'];
  var P=[];
  for(var i=0;i<80;i++){
    P.push({
      x:Math.random()*W, y:Math.random()*H,
      vx:(Math.random()-.5)*.3, vy:(Math.random()-.5)*.3,
      r:Math.random()*1.8+.5,
      c:C[i%4], a:Math.random()*.5+.2
    });
  }

  // ★ 반발력 파라미터
  var REPEL_RADIUS = 45;   // 이 거리 안에 들어오면 서로 밀어냄
  var REPEL_FORCE  = 0.3; // 반발 세기
  var MAX_SPEED    = 1.8;  // 최대 속도 제한 (너무 튕기지 않도록)

  function tick(){
    x.clearRect(0,0,W,H);

    // === 1. 마우스 끌림 + 파티클 간 반발력 ===
    for(var k=0;k<P.length;k++){
      var p=P[k];
      // 마우스 끌림
      var ax=mx-p.x, ay=my-p.y;
      var dd=Math.sqrt(ax*ax+ay*ay);
      if(dd<200 && dd>0){
        var f=(200-dd)/200;
        p.vx+=(ax/dd)*f*.04;
        p.vy+=(ay/dd)*f*.04;
      }

      // ★ 다른 파티클들과의 반발력
      for(var m=0;m<P.length;m++){
        if(m===k) continue;
        var q=P[m];
        var rx=p.x-q.x, ry=p.y-q.y;
        var rd=Math.sqrt(rx*rx+ry*ry);
        if(rd<REPEL_RADIUS && rd>0){
          var rf=(REPEL_RADIUS-rd)/REPEL_RADIUS;
          // 가까울수록 더 강하게 밀어냄 (제곱으로 가속)
          p.vx+=(rx/rd)*rf*rf*REPEL_FORCE;
          p.vy+=(ry/rd)*rf*rf*REPEL_FORCE;
        }
      }

      // 감쇠
      p.vx*=.97; p.vy*=.97;

      // ★ 최대 속도 제한
      var sp=Math.sqrt(p.vx*p.vx+p.vy*p.vy);
      if(sp>MAX_SPEED){
        p.vx=(p.vx/sp)*MAX_SPEED;
        p.vy=(p.vy/sp)*MAX_SPEED;
      }

      p.x+=p.vx; p.y+=p.vy;
      if(p.x<0)p.x=W; if(p.x>W)p.x=0;
      if(p.y<0)p.y=H; if(p.y>H)p.y=0;

      x.beginPath();
      x.fillStyle=p.c;
      x.globalAlpha=p.a;
      x.arc(p.x,p.y,p.r,0,6.28);
      x.fill();
    }

    // === 2. 연결선 그리기 ===
    x.globalAlpha=1;
    for(var i=0;i<P.length;i++){
      for(var j=i+1;j<P.length;j++){
        var a=P[i], b=P[j];
        var dx=a.x-b.x, dy=a.y-b.y;
        var dd2=Math.sqrt(dx*dx+dy*dy);
        if(dd2<120){
          x.beginPath();
          x.strokeStyle=a.c;
          x.globalAlpha=(1-dd2/120)*.15;
          x.lineWidth=.6;
          x.moveTo(a.x,a.y);
          x.lineTo(b.x,b.y);
          x.stroke();
        }
      }
    }
    requestAnimationFrame(tick);
  }
  tick();
})();
  
(function(){
  // ===== 카드에 호버 효과 강제 적용 =====
  var SELECTORS = [
    '.notion-collection-card',
    '.notion-collection-item',
    '.notion-list-item',
    '.notion-gallery-card',
    '.notion-collection-card-body',
    '[class*="notion-collection"][class*="card"]',
    '[class*="notion-gallery"][class*="card"]'
  ].join(',');

  function applyHoverStyle(){
    var cards = document.querySelectorAll(SELECTORS);
    for(var i=0;i<cards.length;i++){
      var card = cards[i];
      if(card.dataset.cyHoverApplied === '1') continue;  // 중복 방지
      card.dataset.cyHoverApplied = '1';

      // 그라데이션 테두리용 ::before 가짜 요소 대체 (실제 div로 삽입)
      card.style.position = 'relative';
      card.style.transition = 'transform .35s ease, box-shadow .35s ease';
      card.style.borderRadius = '12px';

      var border = document.createElement('div');
      border.className = 'cy-card-border';
      border.style.cssText = [
        'position:absolute',
        'inset:0',
        'border-radius:12px',
        'padding:1.5px',
        'background:linear-gradient(135deg,#4285f4,#9b6dff,#ff6b9d,#ffa552)',
        'background-size:300% 300%',
        '-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)',
        '-webkit-mask-composite:xor',
        'mask-composite:exclude',
        'opacity:0',
        'transition:opacity .35s ease',
        'pointer-events:none',
        'z-index:2'
      ].join(';');
      card.appendChild(border);

      // 호버 이벤트
      card.addEventListener('mouseenter', function(){
        this.style.transform = 'translateY(-4px)';
        this.style.boxShadow = '0 12px 28px rgba(155,109,255,0.15), 0 0 0 1px rgba(155,109,255,0.18)';
        var b = this.querySelector('.cy-card-border');
        if(b){
          b.style.opacity = '1';
          b.style.animation = 'cardflow 5s linear infinite';
        }
      });
      card.addEventListener('mouseleave', function(){
        this.style.transform = '';
        this.style.boxShadow = '';
        var b = this.querySelector('.cy-card-border');
        if(b){
          b.style.opacity = '0';
          b.style.animation = '';
        }
      });
    }
  }

  // 키프레임 동적 삽입 (한 번만)
  if(!document.getElementById('cy-card-keyframes')){
    var s = document.createElement('style');
    s.id = 'cy-card-keyframes';
    s.textContent = '@keyframes cardflow{0%{background-position:0% 50%}100%{background-position:300% 50%}}';
    document.head.appendChild(s);
  }

  // ① 페이지 첫 로드 시 적용
  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', applyHoverStyle);
  } else {
    applyHoverStyle();
  }

  // ② DOM이 동적으로 바뀔 때마다 재적용 (Notion이 카드를 lazy load)
  var observer = new MutationObserver(function(mutations){
    var hasNewCards = false;
    for(var i=0;i<mutations.length;i++){
      if(mutations[i].addedNodes.length > 0){
        hasNewCards = true;
        break;
      }
    }
    if(hasNewCards){
      // 너무 자주 호출되지 않도록 디바운스
      clearTimeout(window._cyHoverTimer);
      window._cyHoverTimer = setTimeout(applyHoverStyle, 100);
    }
  });
  observer.observe(document.body, { childList:true, subtree:true });

  // ③ 추가 안전망: 페이지 로드 후 일정 시간마다 재확인 (Oopy의 lazy render 대응)
  setTimeout(applyHoverStyle, 500);
  setTimeout(applyHoverStyle, 1500);
  setTimeout(applyHoverStyle, 3000);

  // ④ URL 변경 감지 (SPA 라우팅: /blog → /projects 등)
  var lastUrl = location.href;
  setInterval(function(){
    if(location.href !== lastUrl){
      lastUrl = location.href;
      setTimeout(applyHoverStyle, 300);
      setTimeout(applyHoverStyle, 1000);
    }
  }, 500);
})();
  
</script>

changyulee.oopy.io

버디즈 (Buddyz) 최종본 시연영상

Projects