배경·앰비언트

[Particle Network] 점들이 가까워지면 선으로 이어지는 별자리 배경

canvas 위 점들이 떠다니다 일정 거리 안으로 가까워지면 선으로 연결돼 별자리처럼 보이는 풀배경. 마우스 근처 점들도 함께 반응한다.

Canvas 2DrequestAnimationFramedevicePixelRatioPointer Eventsprefers-reduced-motion

라이브 데모

새 탭에서 열기

데모 불러오는 중…

제작 과정

한 줄 요약 점 여러 개를 천천히 떠다니게 하고, 서로 가까워진 점들만 선으로 이어 별자리 같은 배경을 만듭니다.

이럴 때 필요해요

랜딩 히어로나 로그인 화면처럼 "비어 보이지만 분위기는 있어야 하는" 배경이 필요할 때 씁니다. 정지 이미지 한 장보다 은은하게 움직이는 점선이 훨씬 살아있어 보이고, 마우스를 따라 선이 모이면 "이 화면이 나에게 반응한다"는 느낌까지 줍니다.

어떻게 동작하나

점마다 위치(x,y)와 속도(vx,vy)를 주고, 매 프레임 위치를 조금씩 옮깁니다. 화면 끝에 닿으면 속도 부호를 뒤집어 안쪽으로 튕깁니다.
매 프레임 모든 점 쌍의 거리를 재서, 정해둔 거리(연결 거리)보다 가까운 쌍만 선으로 잇습니다. 가까울수록 선을 진하게 그려 멀어지면 자연스럽게 사라지게 합니다.
마우스(포인터) 위치도 하나의 점처럼 취급해, 근처 점들과 선을 잇고 아주 살짝 끌어당깁니다.

핵심은 이거예요

"모든 점 쌍의 거리를 비교한다"가 전부입니다. 가까운 쌍에만 선을 그리고 거리에 따라 진하기를 줄이는 것 이 한 줄짜리 규칙이 별자리 효과의 정체입니다.

놓치기 쉬운 것

점 쌍을 전부 비교하므로(NN) 점을 두 배 늘리면 계산은 네 배가 됩니다. 60~90개 선에서 멈추는 게 안전합니다.
DPR(화면 픽셀 밀도)을 맞추지 않으면 레티나 화면에서 선이 뿌옇게 번집니다.
컴포넌트가 사라질 때 RAF 루프와 이벤트를 정리하지 않으면, 화면에서 없어진 뒤에도 루프가 계속 돌며 자원을 먹습니다.
모션에 민감한 사용자를 위해 prefers-reduced-motion이면 움직임을 멈추고 한 프레임만 그립니다.

이런 곳에 써요

SaaS 랜딩 페이지 히어로 배경, 제품 출시 대기 페이지
로그인스플래시 화면의 은은한 분위기 배경

소스 코드

· 데모 페이지에서 자동 추출

import type { Metadata } from "next";
import ParticleNetworkDemo from "./-components/ParticleNetworkDemo";

export const metadata: Metadata = {
  title: "Particle Network — 파티클 네트워크 배경",
  description:
    "canvas 위 점들이 떠다니다 가까워지면 선으로 이어지는 별자리 풀배경 앰비언트 효과.",
  robots: { index: false, follow: false },
};

// data-demo-embed-fixed="720" → 풀배경 데모라 쇼케이스 임베드 시 720px 고정 높이.
export default function Page() {
  return (
    <main
      data-demo-embed-fixed="720"
      className="relative min-h-screen overflow-hidden bg-slate-950"
    >
      <ParticleNetworkDemo />
    </main>
  );
}

22조회수

댓글