GPT 6 Astra for Computer Use

“Midnight Letterpress Accident Laboratory”라는 제목의 완전한 단일 파일 인터랙티브 HTML 웹페이지를 만드세요. 완성된 HTML 문서만 출력하고, 모든 CSS와 JavaScript는 인라인으로 포함하세요. 외부 종속성, CDN, 라이브러리, 폰트, 이미지 링크, SVG 파일 또는 기타 에셋 없이 최신 브라우저에서 직접 열고 작동해야 합니다. 고정된 16:9 이미지나 캔버스 구성이 아닌 반응형 웹페이지이므로 데스크톱, 태블릿, 모바일 화면에 자연스럽게 대응해야 합니다. 사용자가 개별 납활자 블록을 중앙의 종이 위로 드래그해 인쇄물을 구성하고, 이를 회전하고 재배치한 다음 잉크 양, 프레스 압력, 종이 습도를 조절하고 거대한 기계식 인상 레버를 당기는 촉각적 실험용 활판 인쇄 시뮬레이터를 만드세요. 인쇄 결과는 이러한 매개변수에 절차적으로 반응해야 합니다. 잉크가 과하면 번짐과 활자 내부 빈 공간의 막힘이 발생하고, 잉크가 부족하면 건조하고 끊어진 가장자리가 나타나며, 압력에 따라 눌림과 변형이 달라지고, 습도가 높으면 번짐과 종이 섬유 손상이 증가해야 합니다. 활자 배치가 완벽하지 않으면 인쇄 정합 오차가 생기고, 반복 인쇄하면 어긋난 그림자와 잔상이 만들어져야 합니다. 주홍색, 군청색, 산성 노랑만 사용해 여러 색상 패스를 허용하고, 사실적인 겹쳐 찍기 혼합, 눈에 보이는 레이어 순서, 레이어별 표시 여부, 단계별 실행 취소/다시 실행, 종이 모서리를 들어 올려 그 아래에서 변화하는 인쇄물을 확인하는 기능을 제공하세요. 프레스 롤러가 막 올라가고 완성된 인쇄물이 곧 드러나려는 순간을 중심으로 시각적 긴장감을 고정하세요. 중앙의 종이는 연극 무대처럼 느껴져야 합니다. 활자 블록, 잉크 롤러, 핀셋, 정합 핀, 종이 조각, 게이지, 컨트롤을 중앙 주변에 비대칭적인 고리 형태로 배치하세요. 미색 뼈색 종이와 납회색 기반 위에 왼쪽 위에서 대각선으로 비추는 따뜻한 흰색 작업등을 사용하세요. CSS, HTML 요소, Canvas, 절차적 텍스처를 통해 거칠고 물성 있는 실크스크린 인쇄와 수제 콜라주 스타일로 모든 것을 표현하세요. 찢어진 가장자리, 섬유질 종이결, 고르지 않은 안료, 하프톤 점, 긁힌 금속, 잉크 얼룩, 테이프 조각, 약간의 원근감, 불완전한 정합, 겹겹이 쌓인 그림자를 포함하세요. 광택이 나는 그라디언트, 무균적인 SaaS 스타일, 일반적인 카드, 네온 사이버펑크 색상, 사실적인 이미지, 이모지, 스톡 일러스트, 완벽하게 깔끔한 벡터 기하학은 피하세요. 문자, 구두점, 숫자, 여러 장식 블록을 포함한 충분한 양의 가동 활자 목록을 넣으세요. 사용자는 목록에서 블록을 조합 영역으로 드래그하고, 여러 블록을 선택하고, 핸들이나 키보드 단축키로 회전하고, 화살표 키로 조금씩 이동하고, 삭제하거나 복제할 수 있어야 합니다. 물리적인 블록 외형을 잃지 않고 텍스트 내용을 편집할 수 있어야 합니다. 전환 가능한 스냅 가이드를 제공하되, 작은 수동 불규칙성은 유지하세요. 명확한 호버, 활성, 선택, 비활성, 포커스 상태를 구현하세요. 포인터와 터치 상호작용, 합리적인 키보드 조작, 접근성 레이블, 눈에 보이는 포커스 표시를 지원하세요. 잉크 양, 압력, 습도를 위한 세 가지 촉각 컨트롤을 만들고, 값이 종이 미리보기, 텍스처 시뮬레이션, 게이지, 경고 레이블, 주변 기계 동작에 실시간으로 반영되도록 하세요. 극단적인 조합에서는 격렬한 잉크 번짐, 겹쳐진 글자, 미끄러진 활자, 너덜너덜한 섬유 균열, 롤러 떨림, 튀어나온 정합 표시 같은 유쾌한 사고 상태가 나타나되, 전체 구도는 읽을 수 있어야 합니다. 각 인쇄와 해당 매개변수를 기록하는 간결한 실험 로그를 추가하세요. 사용자는 패스 색상을 선택하고, 레버를 설득력 있는 호를 그리며 끌어 프레스를 작동하고, 짧지만 세부적인 프레스 사이클을 지켜본 뒤 종이를 벗겨낼 수 있어야 합니다. 애니메이션에는 레버의 저항감, 기계 진동, 롤러의 움직임, 종이 압축, 먼지 입자, 약간의 램프 깜박임, 공개 직전의 긴장감 있는 멈춤을 포함하세요. prefers-reduced-motion을 준수하세요. 배치, 회전, 매개변수 변경, 인쇄, 색상 패스, 공개 동작 전반에서 실행 취소와 다시 실행이 실제로 작동하도록 하세요. Reset, Random Accident, Re-ink, Add Pass, Undo, Redo 컨트롤과 상호작용 후 사라지는 간결한 온보딩 힌트를 포함하세요. 처음부터 흥미로운 부분 구성 포스터를 제공해 첫 화면이 풍부해 보이게 하되, 모든 중요한 요소는 계속 편집할 수 있어야 합니다. 오디오 에셋을 사용하지 않고도 소리처럼 느껴지는 미묘한 시각 피드백을 추가하세요. 가능한 경우 절차적 텍스처를 결정적으로 생성해 실행 취소 시 동일한 외관이 복원되도록 하세요. 이 경험은 단순히 장식적인 것이 아니라 의식적이고, 수작업 느낌이 나며, 긴장감 있고, 장난스럽게 통제 불가능해야 합니다. 세련된 상호작용 세부 사항, 설득력 있는 매개변수 연동, 층층이 쌓인 절차적 인쇄 흔적, 정교한 애니메이션 타이밍, 뛰어난 반응형 구성을 우선하세요. 시맨틱 HTML과 깔끔하고 잘 구조화된 순수 JavaScript를 사용하세요. 최종 응답에는 완전히 실행 가능한 HTML 문서만 포함해야 합니다.

“Midnight Ramen Soundscape Theater”라는 제목의 완전하고 세련된 단일 파일 인터랙티브 HTML 웹페이지를 만드세요. 모든 CSS와 JavaScript를 인라인으로 포함한 최종 HTML 문서만 출력하세요. 빌드 단계와 외부 종속성, 라이브러리, 폰트, 이미지, 오디오 파일, CDN 리소스, 네트워크 요청, 링크된 에셋 없이 최신 브라우저에서 직접 실행되어야 합니다. 초현실적인 한밤중 라멘 가게를 배경으로 한 표현력 있는 인터랙티브 장면을 만드세요. 중심 오브젝트는 Canvas, SVG 또는 둘을 세심하게 결합해 렌더링한 하나의 이어진 탄성 면발 다발입니다. 면발 다발은 전경을 가로질러 대각선으로 지나가며 물리적인 촉감을 느낄 수 있어야 합니다. 사용자는 마우스나 터치로 어느 지점이든 잡아 끌고, 늘리고, 휘두르고, 자기 위로 접고, 놓을 수 있어야 합니다. 관성, 감쇠, 중력, 여러 연결 세그먼트, 충돌 반응, 눈에 보이는 2차 움직임을 포함한 설득력 있는 스프링 물리를 구현하세요. 공격적인 드래그, 빠른 방향 전환, 뷰포트 크기 변경, 반복 상호작용 중에도 시뮬레이션이 안정적으로 유지되어야 합니다. 구도를 가로지르는 휘어진 호를 따라 최소 세 개의 서로 다른 라멘 그릇과 여러 재료를 배치하여 대각선 면발 주변에 강한 시각적 리듬을 만드세요. 각 그릇은 고유한 일러스트 국물 패턴, 색상 정체성, 레이블, 사운드 특성을 가져야 합니다. 면발이 그릇에 닿거나 들어가면 동기화된 시청각 반응을 실행하세요. Web Audio API로 합성한 고유한 타악 비트, 솟아오르는 김 폭발, 파 듬뿍의 초록색 입자 분사, 국물 물결, 작은 물방울, 실크스크린 인쇄의 정합 흔들림, 스타일이 적용된 텍스트로 만든 손글씨 일본풍 의성어 “ZURU!”, “PON!”, “JUU!”, “BASHAN!” 등을 포함하세요. 충돌 강도는 음량, 피치, 입자 수, 물결 크기, 글자 크기, 애니메이션의 힘에 영향을 주어야 합니다. 오디오는 사용자의 첫 상호작용 이후에만 시작되어야 하며, 명확한 음소거/음소거 해제 컨트롤을 포함하세요. 절정의 시각 상태는 면발이 공중에서 극적으로 늘어나고 국물이 튀기기 직전 정지된 순간을 연상해야 합니다. 이를 위해 “튀는 순간 고정” 컨트롤과 Space 키를 지원하세요. 정지 모드에 들어가면 짧고 강렬한 전환을 적용하고, 상태를 잃지 않은 채 물리 장면을 일시 정지하며, 공중에 떠 있는 물방울과 늘어난 면발의 장력을 강조하고, 대담한 포스터풍 키네틱 타이포그래피를 표시하세요. 페이지가 여전히 살아 있는 느낌을 주도록 절차적 선의 미세한 반짝임은 유지하세요. Space 키나 컨트롤을 다시 누르면 자연스럽게 재개되어야 합니다. 재설정 컨트롤, 간결한 사운드 상태 표시기, 최근 충돌을 기반으로 한 절제된 실시간 “템포/충격” 표시를 추가하세요. 키보드 조작은 작은 통합 도움말 패널에서 확인할 수 있어야 합니다. Space는 정지 전환, R은 재설정, M은 음소거, 화살표 키는 면발에 방향성 충격을 가합니다. 빈티지 실크스크린 포스터 디자인과 절차적 선 애니메이션을 세련되게 결합하세요. 짙은 인디고 배경을 중심으로 하고, 그릇과 충돌 지점 주변에는 국소적인 화로 불빛의 따뜻함을 더하세요. 주홍색, 생강색 노랑, 파채 초록, 따뜻한 크림색, 거의 검정에 가까운 색상으로 구성된 레이어형 별색을 사용하고, 하프톤 텍스처, 거친 잉크 가장자리, 약간의 색상 정합 오차, 굵은 그래픽 그림자, 움직이는 윤곽선을 포함하세요. 결과물은 광택이 나거나 사실적이라기보다 수작업 느낌이 나고 연극적이어야 합니다. 은은한 주변 김, 깜박이는 화로 빛, 떠다니는 입자, 움직이는 선화를 포함하되 강한 대비와 읽기 쉬운 컨트롤을 유지하세요. 일반적인 네온 사이버펑크 스타일은 피하세요. 구도를 넓은 데스크톱, 태블릿, 모바일 화면에 맞게 반응형으로 만드세요. 이것은 웹페이지이므로 고정된 16:9 비율을 강요하지 마세요. 핵심 콘텐츠가 잘리지 않도록 그릇 배치, 타이포그래피, 컨트롤, 시뮬레이션 경계, 터치 영역을 유연하게 조정하세요. 마우스, 펜, 터치 입력을 통합 처리하기 위해 포인터 이벤트를 사용하세요. 면발을 적극적으로 조작하는 동안에만 페이지 스크롤을 막으세요. prefers-reduced-motion을 준수하여 주변 애니메이션을 줄이되 핵심 상호작용은 유지하세요. 효율적인 입자 풀링 또는 엄격한 입자 제한, requestAnimationFrame, 합리적인 해상도 상한을 적용한 device-pixel-ratio 대응 렌더링, 크기 변경에 안전한 좌표 처리를 통해 성능을 부드럽게 유지하세요. 콘텐츠와 마감 요구사항: 분위기 있는 제목 처리, 상호작용을 유도하는 짧은 한 줄 문구, 레이블이 있는 그릇 세 개 이상, 시각적으로 구분되는 여러 토핑, 상황에 맞는 손글씨 사운드 단어, 세련된 컨트롤 상태, 명확한 포커스 스타일, 접근 가능한 버튼 레이블, 첫 사용 후 사라지는 방해되지 않는 상호작용 힌트를 포함하세요. 시작 장면은 상호작용 전에도 완성된 수집용 포스터처럼 보여야 하며, 활성 상태에서는 층층이 쌓인 피드백과 놀라운 창발적 움직임을 지닌 생생한 리듬 장난감으로 변해야 합니다. 부정적 제약: 외부 에셋이나 종속성 금지, 이미지 URL 금지, 사전 녹음 오디오 금지, 프레임워크 금지, 미완성 플레이스홀더 금지, TODO 주석 금지, 고장 난 컨트롤 금지, 고정된 16:9 캔버스 금지, 평범한 기본 UI 금지, 일반적인 그라디언트만으로 구성된 배경 금지, 주요 아트워크로 이모지 사용 금지, 과도한 설명 텍스트 금지, 자동 재생 오디오 금지, 제어되지 않는 입자 증가 금지, 폭발하거나 NaN 값을 생성하는 취약한 물리 금지, 마우스에서만 작동하는 상호작용 금지, 단일 완전한 HTML 문서 외의 출력 금지.