3D 템플릿

three.js 사용하여 Prompt Motion 갤러리는 곡선형 벽면에 비디오 카드가 설치된 3D 공간으로 새롭게 탈바꿈했습니다. 하나의 독립적인 HTML 페이지로 빌드합니다.
스타일: Prompt Motion 의 작품 속 부드러운 자연광과 여백: 흑백, Geist, 그리고 하나의 오렌지색 포인트.
대표 샷은 카드들이 배열된 복도가 위에서 본 PROMPT MOTION이라는 글자로 나타나는 부분을 뒤로 당겨보면 알 수 있습니다. 입니다. 모든 것을 그 샷을 향해 구축하세요.
카메라: 필름 카메라이며, 궤도 제어 방식은 사용하지 않습니다. 모든 샷은 하나의 명명된 동작(돌리, 크레인, 궤도, 푸시인, 랙 포커스)을 사용하여 부드럽게 진입하고 벗어나며, 카메라가 기하학적 형상을 통과하지 않습니다.
조명 및 재질: 키 라이트, 필 라이트, 림 라이트와 부드러운 그림자, 반사를 위한 환경 맵, 깊이감을 위한 안개, 다양한 거칠기를 가진 물리 기반 재질, ACES 톤 매핑. 모든 것이 기본 재질처럼 보여서는 안 됩니다.
움직임: 사물들이 서로 반응합니다 (충돌한 것은 움직이고, 가까운 것은 밝아집니다). 스프링이나 간단한 물리 법칙에 의해 구동되며, 선형적인 트윈 애니메이션은 사용하지 않습니다.
금지 사항: 기본 재질 및 조명, 떠다니는 텍스트 레이블, 모든 것에 빛나는 효과, 천천히 회전하는 물체를 전체적인 콘셉트로 사용하는 것, 기술 데모처럼 보이는 모든 것.

각 샷은 약 3초 정도입니다.
1. 부드러운 조명 아래 카드 한 장의 가장자리를 매크로 촬영한 다음, 재생 중인 비디오(사이트의 실제 포스터)에 초점을 맞춥니다. 2. 돌리 백: 부드럽게 곡선으로 휘어진 벽에 수백 장의 카드가 걸려 있고, 모든 카드가 재생되고 있습니다. 주황색 빛줄기가 벽을 따라 흐르면서 각 카드가 지나갈 때마다 살짝 기울어집니다. 3. 크레인으로 벽 위로 카메라를 들어 올립니다. 그 뒤로 더 많은 벽들이 복도처럼 펼쳐져 있습니다. 4. 카드 한 장이 분리되어 무게감 있게 카메라 쪽으로 흔들리다가 멈춥니다. 카드 뒷면에 인쇄된 안내 문구가 3D 형태로 한 줄씩 입체적으로 나타납니다. 5. 시그니처 샷: 주황색 빛이 'O'자를 따라 흐르는 동안 카메라를 뒤로 멀리 당겨 위로 올립니다. 6. 워드마크와 prompt-motion.com에 초점을 맞춥니다.

1. HTML 파일 하나, CDN에서 제공하는 three.js 만 사용하며 빌드 단계는 없습니다. 모든 모델링은 코드로 구현하고, 다운로드한 모델이나 텍스처는 사용하지 않으며, 카드에 사용된 텍스처는 사이트 자체의 비디오 포스터만 사용합니다.
2. MeshPhysicalMaterial, RoomEnvironment의 PMREM 환경, 소프트 섀도우, ACES 톤 매핑 및 앤티앨리어싱을 사용합니다. 필요한 장면에만 피사계 심도를 추가합니다.
3. 노트북에서 초당 60프레임을 유지하세요.
4. 모든 프레임이 시간으로부터 계산되는 렌더링 모드를 추가합니다(시드된 난수, 클록 없음). 이렇게 하면 Playwright 사용하여 1920x1080 의 MP4 파일로 캡처할 수 있습니다.
5. 촬영할 때마다 프레임 하나씩 캡처하여 확인하고, 평면적이거나, 계단 현상이 있거나, 잘리거나, 읽기 어려운 부분이 있으면 수정하십시오.

그림자 편향을 설정하지 않으면 표면에 줄무늬가 생깁니다. 근거리 평면과 원거리 평면을 가깝게 유지하지 않으면 멀리 있는 표면이 깜빡거립니다. 모든 난수에 초기값을 부여해야 렌더링 결과가 미리보기와 일치하지 않습니다.

시그니처 샷과 샷 리스트를 몇 줄로 설명한 후, 더 이상 묻지 말고 직접 제작해 주세요. HTML 파일과 '렌더링 모드'로 촬영한 20초 분량의 MP4 제공해 주세요.

Build the Prompt Motion gallery, reimagined as a 3D space of video cards on curved walls, as one self-contained HTML page with three.js.
Style: soft daylight and white space in Prompt Motion's own: black and white, Geist, one orange accent.
The signature shot is the pull back where the corridors of cards resolve into the letters PROMPT MOTION seen from above. Build everything toward it.
Camera: a film camera, not orbit controls. Every shot uses one named move (dolly, crane, orbit, push-in, rack focus), eased in and out, and the camera never passes through geometry.
Light and materials: a key, fill and rim light with soft shadows, an environment map for reflections, fog for depth, physically based materials with varied roughness, ACES tone mapping. Nothing should look like a default material.
Motion: things react to each other (what's hit moves, what's near lights up), driven by springs or simple physics, never linear tweens.
Banned: default materials and lighting, floating text labels, glows on everything, a slowly spinning object as the whole idea, anything that looks like a tech demo.

Shots, about three seconds each:
1. Macro on the edge of one card in soft light, then rack focus onto its playing video (a real poster from the site). 2. Dolly back: it's one of hundreds of cards on a gently curved wall, all playing; a wave of orange light runs along the wall and each card tilts slightly as it passes. 3. Crane up and over the wall: behind it, more walls form corridors. 4. One card unhinges, swings toward the camera with weight and settles; its prompt is printed on its back and lifts off as 3D type, line by line. 5. The signature shot: pull far back and up while the orange light traces the O. 6. Settle on the wordmark and prompt-motion.com.

1. One HTML file, three.js from a CDN, no build step. Model everything in code; no downloaded models, and no textures except the site's own video posters for the cards.
2. Use MeshPhysicalMaterial, a PMREM environment from RoomEnvironment, soft shadows, ACES tone mapping and antialiasing. Add depth of field only on shots that need it.
3. Hold 60fps on a laptop.
4. Add a ?render mode where every frame is computed from time (seeded randomness, no clock), so it can be captured with Playwright into an MP4 at 1920x1080.
5. Capture one frame per shot, look at it, and fix anything flat, aliased, clipping or hard to read.

Set shadow bias, or surfaces get striped acne. Keep near and far planes tight, or distant surfaces flicker. Seed every random number, or the render won't match the preview.

Describe the signature shot and the shot list in a few lines, then build it without asking me anything else. Give me the HTML file and a 20-second MP4 captured with the ?render mode.