0030

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 디지털 아트 스튜디오 웹사이트를 만들어줘. 스튜디오 이름은 "NEXUS"이고, 전체적으로 깊은 블랙 다크 테마에 네온 그린(#00ff88), 핫 핑크(#ff0088), 일렉트릭 퍼플(#8800ff) 세 가지 포인트 컬러를 활용한 사이버펑크/퓨처리스틱 디자인으로 만들어줘.

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

(1) Hero (전체화면 파티클 인트로) (2) Gallery (이미지·영상 그리드 갤러리) (3) Services (서비스 카드 그리드) (4) About (스튜디오 소개 + 통계) (5) Contact (연락처)

그리고 맨 아래에 Footer 넣어줘. 페이지 진입 시 로딩 화면도 있어야 하고, 상단 고정 네비게이션도 포함해줘. 배경 곳곳에 ◆, ◇, ○ 같은 기하학 도형 문자를 반투명하게 띄워서 느리게 떠다니는 장식 요소도 넣어줘.

기능
2-1. 로딩 화면 페이지 처음 열리면 #0a0a0a 검정 배경에 "NEXUS" 텍스트가 그린→핑크→퍼플 그라데이션 색상으로 표시되면서 펄스(scale + opacity) 애니메이션이 반복 재생돼. 페이지 로드 완료 약 1초 후에 로딩 화면이 opacity 0으로 페이드아웃 되면서 사라지게 해줘.

2-2. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 왼쪽에 "NEXUS" 로고(bold, 그린→핑크 그라데이션 텍스트), 오른쪽에 메뉴 링크들(Home, Gallery, Services, About, Contact) 배치해줘. 기본 상태에서는 mix-blend-mode: difference를 적용해서 배경 위에 자연스럽게 녹아들게 하고, 스크롤 50px 이상 내려가면 반투명 검정 배경 + backdrop-filter blur가 적용되면서 mix-blend-mode가 normal로 바뀌게 해줘. 768px 이하에서는 메뉴 링크 숨겨줘. 모든 앵커 링크에 부드러운 스크롤 적용해줘. 메뉴 링크에 호버 시 하단에 네온 그린 밑줄이 왼쪽에서 오른쪽으로 펼쳐지는 효과 넣어줘.

2-3. Hero 파티클 배경 Canvas API를 사용해서 Hero 섹션 전체를 채우는 인터랙티브 파티클 애니메이션을 만들어줘. 300개의 파티클이 화면을 떠다니고, 가까운 파티클끼리(100px 이내) 반투명 흰색 선으로 연결되게 해줘. 파티클 색상은 hue 300~360도 범위(핑크~퍼플 계열)로 랜덤 지정해줘. 마우스를 움직이면 마우스 반경 150px 안에 있는 파티클들이 마우스 반대 방향으로 밀려나는 상호작용 효과를 넣어줘. 파티클이 너무 작아지면 새 파티클로 교체하고, 화면 밖으로 나가면 반대편에서 다시 나타나게 해줘. 창 크기 변경 시 캔버스 리사이즈 + 파티클 재초기화 처리해줘.

2-4. Hero 콘텐츠 파티클 캔버스 위에 중앙 정렬로 큰 타이틀, 서브타이틀, CTA 버튼을 겹쳐 배치해줘. 타이틀은 3줄("DIGITAL" / "NEXUS" / "STUDIO")로, 각 줄이 아래에서 위로 올라오면서 3D 회전(rotateX)으로 등장하는 순차 애니메이션을 적용해줘. "NEXUS" 줄에는 글리치 이펙트(::before에 그린, ::after에 핑크 색상의 복제 텍스트가 clip-path로 잘려서 미세하게 흔들리는 효과)를 넣어줘. 서브타이틀 "Where Art Meets Technology"는 지연 페이드인, CTA 버튼 "Explore Our Universe →"는 그린→핑크 그라데이션 배경의 둥근 알약 모양으로 만들고, 호버 시 반투명 흰색 원이 중앙에서 퍼지는 효과 + 위로 살짝 떠오르면서 퍼플 글로우 그림자가 생기게 해줘.

2-5. 갤러리 그리드 반응형 auto-fit 그리드(최소 300px)로 이미지와 영상 카드를 배치해줘. 각 카드는 높이 400px, border-radius 20px, overflow hidden. 이미지 카드는 호버 시 이미지가 1.1배 확대 + 2도 회전하고, 그 위에 그린+핑크+퍼플 반투명 그라데이션 오버레이가 페이드인 되게 해줘. 카드 하단에는 어두운 그라데이션 위에 번호(큰 bold, 반투명) + 작품명 + 카테고리(네온 그린)가 표시되는 오버레이가 호버 시 아래에서 위로 슬라이드인 되게 해줘. 영상 카드는 autoplay muted loop playsinline으로 자동 재생. 카드들은 초기에 scale 0.9 + opacity 0 상태에서 IntersectionObserver로 뷰포트에 들어오면 순차적으로(각각 0.1초 간격) 원래 크기로 나타나는 애니메이션을 적용해줘. 섹션 상단에 "Visual Odyssey" 제목(그린→흰색 그라데이션 텍스트)과 설명을 중앙 정렬로 넣어줘.

2-6. 서비스 카드 auto-fit 그리드(최소 300px)로 4개 서비스 카드를 배치해줘. 각 카드는 반투명 흰색(2%) 배경 + 미세한 흰색 반투명 테두리, border-radius 20px, 넉넉한 패딩. 중앙에 이모지 아이콘(🎨, 🚀, ✨, 🎯)이 들어간 그라데이션 정사각형 박스가 위아래로 천천히 떠다니는 애니메이션과 함께 배치되고, 아래에 서비스명과 설명. 호버 시 카드가 위로 10px 떠오르면서 테두리 바깥에 그린→핑크→퍼플 그라데이션 보더가 나타나게 해줘. 서비스: Digital Art, Web Design, Motion Graphics, Brand Identity. 섹션 배경은 검정→짙은 퍼플→짙은 남색 대각선 그라데이션. 섹션 제목 "Our Expertise" 하단에 그린→핑크 그라데이션 가로선 장식 넣어줘.

2-7. About 섹션 2컬럼 그리드(텍스트 / 비주얼). 텍스트 쪽에 "Pioneers in Digital Innovation" 소제목(그린→핑크 그라데이션 텍스트), 스튜디오 설명 2단락, 그 아래 2×2 그리드로 통계 4개(150+ Projects Completed, 50+ Happy Clients, 25+ Team Members, 10+ Awards Won). 통계 숫자는 그린→퍼플 그라데이션 텍스트, 큰 bold. 비주얼 쪽에 border-radius 20px의 이미지, 그 위에 그린+핑크 반투명 그라데이션 오버레이(mix-blend-mode: overlay). 배경은 #050505 어두운 톤.

2-8. Contact 섹션 검정에서 순수 블랙으로 이어지는 그라데이션 배경. 중앙 정렬로 "Let's Create Something Amazing" 대형 제목(그린→핑크→퍼플 그라데이션 텍스트), 서브타이틀, 그 아래 이메일·전화·주소 3개 연락 링크를 둥근 알약 모양 테두리 버튼으로 나란히 배치해줘. 호버 시 배경이 반투명 흰색으로 채워지면서 테두리가 네온 그린으로 바뀌고 위로 살짝 떠오르게 해줘.

디자인
3-1. 컬러 팔레트 메인 배경: #0a0a0a (깊은 블랙) 네온 그린: #00ff88 (주 강조) 핫 핑크: #ff0088 (보조 강조) 일렉트릭 퍼플: #8800ff (세번째 강조) 텍스트: #ffffff 서비스 섹션 배경: #050505 전체적으로 세 가지 포인트 컬러의 그라데이션 조합을 적극 활용해줘.

3-2. 서체 시스템 폰트 스택 사용: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif. 외부 폰트 CDN 없이 시스템 기본 산세리프로 통일해줘.

3-3. 전체 톤앤무드 어둡고 미래적인 사이버펑크/디지털 아트 스튜디오 느낌. 네온 컬러의 글로우와 그라데이션이 어두운 배경 위에서 강렬하게 빛나는 분위기. 글리치, 파티클, 반투명 오버레이 등으로 테크놀로지 감성을 표현해줘. 타이틀은 매우 크고 볼드하게(font-weight 900, letter-spacing 음수), clamp()로 반응형 사이즈 적용.

3-4. 반응형 1024px 이하: 갤러리 그리드 최소 250px, About 1컬럼. 768px 이하: 네비게이션 메뉴 숨김, Hero 타이틀 축소, Services 1컬럼, 컨테이너 패딩 축소.

3-5. 각 섹션에 사용할 이미지/영상

갤러리 섹션 이미지 12장:

https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_3.png (Ethereal Dreams / Digital Art)
https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_2.png (Neon Nights / Concept Design)
https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_1.png (Future Vision / UI/UX)
https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_0.png (Abstract Reality / Digital Art)
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_1.png (Cosmic Journey / Motion Design)
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_0.png (Urban Pulse / Photography)
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_2.png (Digital Zen / Concept Art)
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_3.png (Quantum Leap / Experimental)
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_0.png (Neural Networks / AI Art)
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_1.png (Synthetic Dreams / Digital Art)
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_2.png (Data Streams / Visualization)
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_3.png (Virtual Spaces / VR Design)
갤러리 섹션 영상 4개:

https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/0.mp4 (Motion Study 01 / Animation)
https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/1.mp4 (Motion Study 02 / Animation)
https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/2.mp4 (Motion Study 03 / Animation)
https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/3.mp4 (Motion Study 04 / Animation)
About 섹션 이미지:

https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_0.png
기술
4-1. 기본 구조 단일 HTML 파일 하나에 CSS(style 태그)와 JavaScript(script 태그) 모두 포함해줘. 외부 라이브러리나 프레임워크 절대 사용하지 말고, 순수 HTML + CSS + Vanilla JS로만 만들어줘. 외부 CDN 링크 없이 완전 자립형으로 동작하게 해줘.

4-2. CSS 관련 CSS 변수(Custom Properties)로 컬러 관리해줘. 반응형은 1024px, 768px 두 구간으로 미디어쿼리 작성해줘. -webkit-background-clip: text와 -webkit-text-fill-color: transparent 조합으로 그라데이션 텍스트 효과를 적극 활용해줘.

4-3. JavaScript 관련 Canvas API + requestAnimationFrame으로 파티클 시스템 구현. IntersectionObserver로 갤러리 카드와 서비스 카드의 스크롤 진입 애니메이션 제어(animationPlayState 토글). scroll 이벤트로 네비게이션 상태 변화 처리. DOM으로 갤러리 카드를 동적으로 생성해줘.

추가 조건 언어는 영어로 통일해줘. HTML lang="ko"로 설정해줘. 콘텐츠 최대 너비는 1600px(갤러리), 1400px(기타 섹션). 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.