0011

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 크리에이티브 스튜디오 웹사이트를 만들어줘. 스튜디오 이름은 "STUDIO"이고, 전체적으로 다크 테마(검정 배경)에 화이트 텍스트, 시네마틱한 분위기의 모던 디자인으로 만들어줘.

프로그램 개요
총 3개 섹션으로 구성된 원페이지 스크롤 웹사이트야. 섹션 순서는 아래와 같아.

(1) Hero (전체화면 비디오 인트로) (2) Projects (프로젝트 그리드) (3) Footer (간단한 연락처/소셜)

상단에 고정 네비게이션 바도 있어야 해.

기능
2-1. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 왼쪽에 "STUDIO" 로고(볼드, letter-spacing 좁게), 오른쪽에 메뉴 링크들(Work, About, Services, Contact) 배치해줘. 배경은 반투명 검정 + backdrop-filter blur 적용해줘. 스크롤 100px 이상 내려가면 배경 불투명도가 진해지게 해줘. 768px 이하 모바일에서는 메뉴 링크 숨겨줘. 모든 앵커 링크에 부드러운 스크롤 적용해줘.

2-2. 히어로 비디오 배경 전체 화면(100vh) 히어로 섹션에 비디오를 배경으로 깔아줘. 비디오는 autoplay, muted, loop으로 재생되고, object-fit cover처럼 화면을 꽉 채우되 비율이 깨지지 않게 처리해줘. 비디오 소스는 여러 개를 배열로 준비해서 랜덤으로 하나를 선택하게 하고, 로드 실패 시 다음 소스로 자동 전환하는 폴백 로직을 넣어줘.

2-3. 비디오 위 효과 레이어 시스템 비디오 위에 여러 겹의 시각 효과 레이어를 올려줘. 각 효과는 독립된 div로 분리하고, 우하단에 토글 버튼들을 배치해서 사용자가 효과를 켜고 끌 수 있게 해줘.

효과 목록:

Color Overlay: 보라핑크시안 그라데이션이 mix-blend-mode multiply로 깔리면서 투명도가 천천히 맥박치듯 변하는 애니메이션
Scanlines: 가로 1px 간격의 반투명 검정 줄무늬가 반복되는 CRT 스캔라인 효과
Noise: SVG 기반 fractalNoise 텍스처를 300% 크기로 깔고, steps 애니메이션으로 빠르게 위치를 이동시켜 필름 그레인 느낌
Vignette: 중앙 투명 → 가장자리 검정의 방사형 그라데이션으로 비네트 효과
Blur: 비디오 자체에 CSS blur 필터 추가/제거
Grayscale: 비디오 자체에 CSS grayscale 필터 추가/제거
토글 버튼은 둥근 pill 형태(반투명 검정 배경 + blur + 흰색 텍스트), active 상태면 테두리와 배경이 밝아지게 해줘. Color, Scan, Noise, Vignette는 기본 켜짐, Blur와 Grayscale은 기본 꺼짐 상태로 시작해줘.

2-4. 파티클 효과 히어로 영역에 30개 정도의 작은 흰색 원형 파티클이 화면 하단에서 상단으로 천천히 떠오르는 애니메이션을 넣어줘. 각 파티클의 가로 위치, 시작 딜레이, 속도를 랜덤으로 다르게 설정해줘.

2-5. 글리치 텍스트 로테이션 히어로 중앙에 영문 대문자 키워드들(CREATE, DESIGN, INNOVATE, INSPIRE, TRANSFORM, IMAGINE, BUILD, CRAFT, DEVELOP, EVOLVE, DISRUPT, ELEVATE)이 약 0.4초 간격으로 빠르게 회전하면서 표시되게 해줘. 각 단어는 나타날 때 블러+축소+회전에서 선명+정상크기로, 사라질 때 블러+확대+회전으로 전환되는 3D 애니메이션 적용해줘. 텍스트에 사이버펑크풍 글리치 효과를 넣어줘 — ::before에 시안(#00ffff), ::after에 마젠타(#ff00ff) 색상의 잔상이 clip-path로 잘려서 미세하게 어긋나는 효과, 그리고 전체 텍스트에 은은한 네온 글로우(text-shadow 다중 레이어) 적용해줘.

2-6. 프로젝트 그리드 어두운 배경(#0a0a0a) 위에 반응형 auto-fit 그리드(최소 300px)로 프로젝트 카드 6개를 배치해줘. 카드 높이 400px, 라운드 10px. 이미지 또는 비디오를 카드 전체에 object-fit cover로 채워줘. 호버 시 카드가 1.02배 살짝 확대되고, 하단에서 프로젝트 제목과 카테고리가 올라오는 오버레이(아래→위 그라디언트) 표시해줘.

디자인
3-1. 컬러 팔레트 메인 배경: #000000 (순수 검정) 보조 배경: #0a0a0a (프로젝트 섹션) 텍스트: #FFFFFF (순백) 보조 텍스트: rgba(255,255,255,0.6~0.9) 푸터 보더: #222222 효과 색상: 시안 #00ffff, 마젠타 #ff00ff, 보라핑크시안 그라데이션

3-2. 서체 시스템 폰트 스택(-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) 사용해줘. 외부 폰트 로드 없이.

3-3. 전체 톤앤무드 시네마틱하고 어두운 분위기, 사이버펑크 느낌의 글리치와 네온 효과. 비디오 배경 위에 다층 효과를 쌓아서 영화적 질감을 만들어줘. 히어로 타이틀은 clamp(50px, 10vw, 120px)로 반응형 크기, 대문자, letter-spacing -2px로 밀도 있게.

기술
4-1. 기본 구조 단일 HTML 파일 하나에 CSS(style 태그)와 JavaScript(script 태그) 모두 포함해줘. 외부 라이브러리 없이 순수 HTML + CSS + Vanilla JS로만 만들어줘.

4-2. CSS 관련 비디오는 position absolute + top/left 50% + transform translate(-50%,-50%) + min-width/min-height 100%로 비율 유지하며 화면을 덮게 해줘. 모든 효과 레이어는 pointer-events: none으로 클릭 방해하지 않게. 반응형은 768px 한 구간으로 미디어쿼리 작성해줘.

4-3. JavaScript 관련 비디오 소스 랜덤 선택 및 에러 폴백, 효과 토글 이벤트 리스너, 파티클 동적 생성, 텍스트 로테이션 setInterval, 스크롤 이벤트로 헤더 상태 변화, 윈도우 리사이즈 시 비디오 비율 재계산 등을 처리해줘.

추가 조건 히어로 섹션에 서브타이틀("We create digital experiences that matter", 가늘고 letter-spacing 넓게)과 CTA 버튼("View Our Work", 투명 배경 + 흰색 테두리 pill, 호버 시 배경 흰색 채워지면서 텍스트 검정으로 전환, ::before 의사요소로 구현)도 넣어줘. 서브타이틀과 버튼은 시간차 페이드인 애니메이션으로 순차 등장하게 해줘. 푸터에는 "Let's create something amazing together" 제목과 소셜 링크(Instagram, Behance, LinkedIn, Twitter) 배치해줘.