pretext

Wave

텍스트 라인이 사인 곡선으로 출렁인다. layoutWithLines()로 각 라인 위치를 계산하고 Canvas에 오프셋을 적용.

Scatter

마우스 근처 글자들이 흩어졌다 원래 자리로 돌아온다. 각 글자의 x 위치를 measureText()로 직접 계산.

Reflow

드래그로 텍스트 박스 너비를 조절하면 즉시 재배치된다. DOM reflow 없이 60fps로 동작하는 pretext의 핵심.

Vortex

커서 근처 글자들이 블랙홀처럼 궤도를 돌며 색상이 바뀐다. 접선 힘 + 구심력으로 나선형 궤도를 생성.

Ripple

클릭하면 파문이 텍스트를 가로질러 퍼져나간다. 파문 링과의 거리로 힘을 계산하고 스프링으로 복원.

Glitch

주기적으로 크로마틱 어버레이션 글리치가 발생한다. lighter 합성 모드로 레드/시안 채널을 분리.

Flow

드래그 가능한 블록 주변으로 텍스트가 실시간 리플로우된다. layoutNextLine()으로 줄마다 다른 너비를 적용.

Crater

클릭하면 구슬이 박히며 충격파로 주변 글자를 날린다. 구슬은 영구 장애물로 남아 크레이터 형태를 유지한다.

Gravity

글자들이 중력으로 떨어져 바닥에 쌓인다. 캔버스를 좌우로 드래그하면 흔들린다. pretext로 초기 위치 계산 후 물리 적용.