Movie gallery

그리고 로그인은 일단 supabase로 카카오, 구글 두 개 연결해놓긴 했는데 이메일로 매직 링크 보내서 로그인하는 기능도 만들어줘. html 이메일 템플릿으로 초대링크 보내서 로그인하게끔 하면 돼. html 이메일 템플릿은 짜놨으니까 파일 확인해.

영화 포스터들이 뎁스가 있는 무한확장 캔버스 형태로 배열된 3D 공간을 사용자가 제스처로 탐험하는 웹의 렌더 로직을 짜줘.
빨려 들어가는 듯한 Depth 체감 (Pinch Zoom) / 속도에 반응하는 미세한 모션 블러 / 거리에 따른 흑백/밝기 감쇄
Palm Position - 카메라 앞 손바닥의 중심 좌표로 이동 속도 제어.
Pinch Gesture - 검지와 엄지 사이의 거리를 계산하여 확대 및 축소. 이거 확대 축소 할 때 포스터 메시 간 거리가 1차원적으로 줄면 안되고 뎁스에 따라서 속도가 달라야겠지.

지금 빌드는 Vite/vercel로 호스팅 하고 있으니께 알아서 잘 최적화할 수 있는 걸로. Three.js 쓰면 되지 않나
필요하다면 vanila js 외에 react 등을 사용해도 돼. 그리고 포스터는 흑백이 아니고 원본 이미지 그대로이되 멀어질수록 흑백+화이트아웃이 되는거야. 우선 네가 계획한대로 진행해봐. 코드 작성시에도 초보자도 보고 이해하며 공부할 수 있도록 상세한 주석을 달아.

라운딩은 없애고, favicon도 없애. vite 기본 아이콘 개못생김 그리고 포스터 사이즈가 다양한 건 좋은데 가로세로 비율을 임의로 수정하지는 마. 원본 포스터가 잘리면 안돼. 그리고 마우스 휠을 아래로 스크롤하면 포스터간 간격이 줄어들면서 크기도 줄어들고 밀도가 높아지고, 위로 스크롤하면 활대되다가 꽤 커졌다 싶으면 수렴할정도로 미세하게만 커지게 로직 수정해. 줄어들때도 마찬가지고. 그리고 포스터를 클릭하면 왼쪽에는 포스터, 오른쪽에는 마크다운 형식으로 메모할 수 있는 타이핑 공간이 나오게끔 기능을 확장해줘.