Lab · Visual Playground
Particle NetworkParticle Network
Vanilla JS Canvas로 구현한 인터랙티브 배경 시스템. 이 사이트 전체에 깔린 배경의 풀 버전입니다.An interactive background system built with pure vanilla JS Canvas. The full-power version of the background running across this site.
기술 사양Tech Spec
생산성에 쓸 수 있나요?Can This Boost Productivity?
파티클 네트워크는 그 자체가 생산성 도구는 아니지만, 만드는 과정이 AI 에이전트 워크플로우의 좋은 예시가 됩니다. 60개 이하 입자, 60fps 유지, 모바일 최적화 — 이 모든 제약을 CLAUDE.md에 적어두고 하네스 엔지니어링으로 빌드했습니다.The particle network itself isn't a productivity tool — but the process of building it is a great example of an AI agent workflow. Constraint of ≤60 particles, 60fps target, mobile-first — all written into CLAUDE.md and built with harness engineering.
CLAUDE.md로 제약 명시Constraints via CLAUDE.md
"입자 60개 이하", "외부 라이브러리 금지", "모바일에서 40개로 축소" 같은 제약을 먼저 적어두면 에이전트가 일관되게 지킵니다.Rules like "max 60 particles", "no external libs", "scale down to 40 on mobile" — written first, agents follow consistently.
Phase별 검증Phase-by-phase Verification
① 입자 렌더링 → ② 연결선 → ③ 마우스 반응 → ④ 클릭 버스트. 각 단계를 분리해 테스트하면 돌아갔다 안 됐다 하지 않습니다.① Render particles → ② Connections → ③ Mouse reaction → ④ Click burst. Verify each stage separately to avoid regressions.
성능 우선 설계Performance-first Design
prefers-reduced-motion 대응, DPR 캡(2), 모바일 자동 감지. 생산성 도구를 만들 때도 같은 원칙이 적용됩니다 — 사용자 환경을 존중하세요.Respects prefers-reduced-motion, caps DPR at 2, auto-detects mobile. Same principles apply to any productivity tool — respect the user's environment.