Showcase | 허준혁

013D video written in HTML

three.js 씬과 타이틀 모션을 HTML 한 장으로 짜서 프레임 단위로 seek 되는 영상으로 만들었습니다. 문구를 바꾸면 바로 다시 조립됩니다.

Loading player…

컴포지션은 HTML 한 장입니다. 1920×1080 루트에 data-start·data-duration을 달고, GSAP 타임라인을 window.__timelines에 등록합니다.
three.js 렌더를 GSAP 타임라인의 onUpdate에 묶어, 플레이어가 어느 시점으로 seek 하든 같은 프레임이 나오게 했습니다. 점토 변형과 파티클 배치도 시드 고정입니다.
입력이 바뀌면 HTML을 다시 만들어 플레이어의 srcdoc으로 넘기고, 보던 시점으로 되돌립니다. 컴포지션은 불투명 origin 샌드박스 안에서 돕니다.

이 포트폴리오의 소스를 AST로 분석해 심볼·import·호출 관계를 뽑고, 3D force graph로 그렸습니다.

841 nodes · 1745 edges · 42 clusters

점이나 묶음을 고르면 여기에 정보가 나옵니다.

Built from 45841c1 · 2026-09-30

드래그하면 회전하고, 점을 누르면 그 노드로 다가가 파일 위치와 연결을 보여 줍니다. 선 위의 빛은 호출·import 방향입니다.

분석은 tree-sitter AST 기반이라 LLM 호출 없이 오프라인으로 돕니다. pnpm graph 한 번으로 커밋된 src를 다시 분석해 JSON으로 줄여 둡니다.
레이아웃은 3D force simulation(반발·스프링·묶음 인력)을 직접 구현했습니다. 매 프레임 조금씩 풀리며 자리를 잡습니다.
노드는 발광 포인트 스프라이트, 엣지는 source에서 target 쪽으로 빛 펄스가 흐르는 라인이고 둘 다 커스텀 셰이더입니다. 드로우콜은 두 번, 강조할 때는 버퍼 한 칸만 바꿉니다.