CSS로 만드는 호버 & 커서 이펙트

// hex 색상 문자열을 rgba()로 변환 — CSS 변수에 투명도를 포함시키기 위함
const hex = glareColor.replace('#', '');
let rgba = glareColor;
if (/^[0-9A-Fa-f]{6}$/.test(hex)) {
  const r = parseInt(hex.slice(0, 2), 16);
  const g = parseInt(hex.slice(2, 4), 16);
  const b = parseInt(hex.slice(4, 6), 16);
  rgba = `rgba(${r}, ${g}, ${b}, ${glareOpacity})`;
}

const vars = {
  '--gh-width': width,           // '500px'
  '--gh-height': height,         // '500px'
  '--gh-bg': background,         // '#000'
  '--gh-br': borderRadius,       // '10px'
  '--gh-angle': `${glareAngle}deg`,        // '-45deg'
  '--gh-duration': `${transitionDuration}ms`, // '650ms'
  '--gh-size': `${glareSize}%`,             // '250%'
  '--gh-rgba': rgba,             // 'rgba(255, 255, 255, 0.5)'
  '--gh-border': borderColor     // '#333'
};

/* ::before 가상 요소 = 반사광 레이어 */
.glare-hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--gh-angle),          /* -45deg → 좌상단에서 우하단 방향 */
    hsla(0, 0%, 0%, 0) 60%,  /* 0~60%: 투명 */
    var(--gh-rgba) 70%,       /* 60~70%: rgba(255,255,255,0.5) 반사광 */
    hsla(0, 0%, 0%, 0) 100%  /* 70~100%: 투명 */
  );
  transition: var(--gh-duration) ease;  /* 650ms */
  background-size: var(--gh-size) var(--gh-size);  /* 250% 250% */
  background-position: -100% -100%;   /* 초기: 좌상단 밖 → 보이지 않음 */
}

/* 호버 시: 우하단으로 이동 → transition이 650ms 동안 보간 */
.glare-hover:hover::before {
  background-position: 100% 100%;
}

React props → CSS 커스텀 속성 (--gh-*)
  → ::before의 linear-gradient (반사광 모양 결정)
  → :hover → background-position 변경 (-100% -100% → 100% 100%)
  → CSS transition이 650ms 동안 보간
  → 대각선 스와이프 효과

/* transition을 평소에 제거하고, 호버 시에만 적용 */
.glare-hover--play-once::before {
  transition: none;     /* 마우스 빼도 즉시 리셋 (되감기 없음) */
}
.glare-hover--play-once:hover::before {
  transition: var(--gh-duration) ease;  /* 호버 시에만 애니메이션 */
}

star-border-container (overflow: hidden)
├── border-gradient-bottom (z-index: 0) ← 하단 빛
├── border-gradient-top    (z-index: 0) ← 상단 빛
└── inner-content          (z-index: 1) ← 실제 콘텐츠

style={{ padding: `${thickness}px 0` }}

// 점 형태의 빛 — 중심에서 바깥으로 10%까지만 불투명
background: `radial-gradient(circle, ${color}, transparent 10%)`,
animationDuration: speed  // '6s'

/* 하단 빛: 오른쪽에서 왼쪽으로 이동하며 투명해짐 */
@keyframes star-movement-bottom {
  0%   { transform: translate(0%, 0%); opacity: 1; }
  100% { transform: translate(-100%, 0%); opacity: 0; }
}

/* 상단 빛: 왼쪽에서 오른쪽으로 이동 (반대 방향) */
@keyframes star-movement-top {
  0%   { transform: translate(0%, 0%); opacity: 1; }
  100% { transform: translate(100%, 0%); opacity: 0; }
}

// 1. 요소의 화면 위치와 크기를 가져온다
const { left, top, width, height } = element.getBoundingClientRect();
const centerX = left + width / 2;
const centerY = top + height / 2;

// 2. 마우스와 요소 중심 사이의 거리를 계산한다
const distX = e.clientX - centerX;
const distY = e.clientY - centerY;

// 3. 거리에 따라 transform을 적용한다
element.style.transform = `translate3d(${distX / 2}px, ${distY / 2}px, 0)`;

const { left, top, width, height } = magnetRef.current.getBoundingClientRect();
const centerX = left + width / 2;
const centerY = top + height / 2;

const distX = Math.abs(centerX - e.clientX);
const distY = Math.abs(centerY - e.clientY);

// 요소 경계 + padding 범위 안에 마우스가 있는지 판별
if (distX < width / 2 + padding && distY < height / 2 + padding) {
  // 범위 안 → 끌어당김
} else {
  // 범위 밖 → 원위치
}

const offsetX = (e.clientX - centerX) / magnetStrength;
const offsetY = (e.clientY - centerY) / magnetStrength;
setPosition({ x: offsetX, y: offsetY });

const transitionStyle = isActive ? activeTransition : inactiveTransition;
// isActive = true  → 'transform 0.3s ease-out'     (빠르게 따라감)
// isActive = false → 'transform 0.5s ease-in-out'   (천천히 원위치)

window.mousemove → getBoundingClientRect() → 거리 판별
  → 범위 안?
    → offsetX = (mouseX - centerX) / magnetStrength
    → setPosition({ x: offsetX, y: offsetY })
    → transform: translate3d(offsetX, offsetY, 0)
    → transition: 0.3s ease-out (따라감)
  → 범위 밖?
    → setPosition({ x: 0, y: 0 })
    → transform: translate3d(0, 0, 0)
    → transition: 0.5s ease-in-out (원위치 복귀)

// rows * columns개의 span을 생성
const total = rows * columns;  // 9 * 9 = 81개
const spans = Array.from({ length: total }, (_, i) => (
  <span
    key={i}
    style={{
      '--rotate': `${baseAngle}deg`,  // 초기 각도 (예: -10deg)
      backgroundColor: lineColor,
      width: lineWidth,               // '1vmin'
      height: lineHeight              // '6vmin'
    }}
  />
));

gridTemplateColumns: `repeat(${columns}, 1fr)`,
gridTemplateRows: `repeat(${rows}, 1fr)`,

const onPointerMove = (pointer: { x: number; y: number }) => {
  items.forEach(item => {
    const rect = item.getBoundingClientRect();
    const centerX = rect.x + rect.width / 2;
    const centerY = rect.y + rect.height / 2;

    const b = pointer.x - centerX;  // x 거리 (밑변)
    const a = pointer.y - centerY;  // y 거리 (높이)
    const c = Math.sqrt(a * a + b * b) || 1;  // 빗변 (유클리드 거리)

    // acos(b/c) = 벡터와 x축 사이의 각도
    const r = ((Math.acos(b / c) * 180) / Math.PI)
              * (pointer.y > centerY ? 1 : -1);

    item.style.setProperty('--rotate', `${r}deg`);
  });
};

// 마운트 시 그리드 중앙 라인을 기준으로 초기 각도 설정
if (items.length) {
  const middleIndex = Math.floor(items.length / 2);  // 81개 중 40번째
  const rect = items[middleIndex].getBoundingClientRect();
  onPointerMove({ x: rect.x, y: rect.y });
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.track { animation: scroll 10s linear infinite; }

const updateDimensions = useCallback(() => {
  const containerWidth = containerRef.current?.clientWidth ?? 0;
  const sequenceWidth = seqRef.current?.getBoundingClientRect()?.width ?? 0;

  if (sequenceWidth > 0) {
    setSeqWidth(Math.ceil(sequenceWidth));
    // 뷰포트를 채우기 위해 필요한 복제 수 + 여유분 2개
    const copiesNeeded = Math.ceil(containerWidth / sequenceWidth)
                       + ANIMATION_CONFIG.COPY_HEADROOM;
    setCopyCount(Math.max(ANIMATION_CONFIG.MIN_COPIES, copiesNeeded));
  }
}, []);

const animate = (timestamp: number) => {
  const deltaTime = (timestamp - lastTimestampRef.current) / 1000;  // 초 단위

  // 지수 보간으로 속도를 부드럽게 변경
  const easingFactor = 1 - Math.exp(-deltaTime / ANIMATION_CONFIG.SMOOTH_TAU);
  velocityRef.current += (target - velocityRef.current) * easingFactor;

  // 오프셋 갱신 — modulo로 한 세트 범위 안에 유지
  let nextOffset = offsetRef.current + velocityRef.current * deltaTime;
  nextOffset = ((nextOffset % seqSize) + seqSize) % seqSize;
  offsetRef.current = nextOffset;

  track.style.transform = `translate3d(${-offsetRef.current}px, 0, 0)`;
  requestAnimationFrame(animate);
};

velocityRef.current += (target - current) * (1 - e^(-dt/tau))

nextOffset = ((nextOffset % seqSize) + seqSize) % seqSize;

const useImageLoader = (seqRef, onLoad, dependencies) => {
  useEffect(() => {
    const images = seqRef.current?.querySelectorAll('img') ?? [];
    if (images.length === 0) {
      onLoad();  // 이미지 없으면 즉시 실행
      return;
    }
    let remainingImages = images.length;
    const handleImageLoad = () => {
      remainingImages -= 1;
      if (remainingImages === 0) onLoad();  // 모든 이미지 로드 완료
    };
    images.forEach(img => {
      if ((img as HTMLImageElement).complete) handleImageLoad();
      else img.addEventListener('load', handleImageLoad, { once: true });
    });
  }, dependencies);
};

.logoloop--fade::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--logoloop-fadeColor) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}
.logoloop--fade::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--logoloop-fadeColor) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}