레퍼런스 주소: https://ref1.bzlworks.com/ 스크롤에 따라 3D 제품이 회전·분해·재조립되는 인터랙티브 랜딩 페이지입니다. 자사 제품을 감각적으로 보여줘야 하는 하드웨어·리테일 브랜드를 위한 구현 사례입니다. [주요 기능] 스크롤 진행도에 연동된 7개 카메라 키프레임 전환 (와이드샷 표면 클로즈업 내부 통과 마감샷). FOV까지 함께 변화해 시네마틱한 카메라 워크 구현 제품 분해(익스플로디드) 뷰 — 플래터·톤암·스핀들이 축을 따라 분리 마감재 실시간 교체 (그래파이트/본 화이트/브러시드 브라스) — 클릭 즉시 재질 속성이 부드럽게 전환 톤암이 실제 물리에 맞춰 레코드 위를 트래킹 (도입 홈 라벨 직전, 삼각함수로 각도 산출) [기술 스택] Astro 7 · React 19 · Three.js · React Three Fiber · GSAP · Lenis · TypeScript [구현 포인트] 3D 모델 파일 0개. 턴테이블 전 부품을 코드로 생성(Lathe/Tube/Extrude/Ring) 레코드 홈·브러시드 메탈 질감도 Canvas API로 절차적 생성 — 외부 에셋 의존이 없어 로딩이 빠르고 라이선스 이슈가 없습니다. 스크롤 상태 단일 소스 관리 — 하나의 진행도 값에서 카메라·회전·재질이 파생. 3D 갱신은 React state를 거치지 않고 렌더 루프에서 직접 처리해 스크롤 중 리렌더가 발생하지 않습니다. 프레임레이트 독립 감쇠 적용 — 60Hz/120Hz 어느 환경에서도 동일한 모션 속도 보장 저사양 기기 자동 감지 후 해상도·후처리 단계적 완화 — prefers-reduced-motion 대응 웹폰트 self-host + 실사용 글자만 서브셋(2MB 57KB) — 외부 요청 0건 * 본 사이트는 포트폴리오용으로 개편한 가상 브랜드 목업입니다.