I want you to create an immersive, artistic, visually stunning interactive experience - not a basic webpage, not a simple CSS layout, and not just text with decorative effects.
The theme is the transformation of humanity from present-day biological existence into a near-future world where human consciousness is transferred into devices, artificial vessels, or digital environments.
IMPORTANT:
This must feel like a visual experience or digital art piece, not a standard website. Avoid generic sections, cards, simple hero layouts, basic gradients, or a “landing page” look. I want something that feels cinematic, atmospheric, emotional, and unforgettable.
Build it as a single self-contained HTML file with all CSS and JavaScript included. The final result should be polished and visually impressive.
Creative direction:
- The experience should show a clear visual progression:
1. Present-day human life
2. Transition / transformation
3. Post-biological / uploaded consciousness future
- The journey should feel seamless, like moving through phases of existence.
- The visuals should communicate emotion, identity, memory, mortality, transcendence, and the blurring of flesh and machine.
- The experience should feel like a fusion of sci-fi cinema, interactive digital art, and a futuristic museum installation.
Visual requirements:
- Full-screen immersive presentation
- Rich atmosphere, lighting, glow, depth, and motion
- Layered scenes with smooth transitions between phases
- Abstract but beautiful symbolism: neural patterns, dissolving bodies, memory fragments, flowing data, holographic structures, particles, light trails, synthetic forms, digital architectures
- Elegant typography used sparingly and meaningfully
- Strong visual storytelling even without much text
- High-end aesthetic: sophisticated, intentional, and artistic
Interaction requirements:
- The user should feel like they are moving through a transformation, not just scrolling a page
- Add meaningful interactivity: scrolling, mouse movement, hover behavior, scene transitions, or subtle input-based reactions
- The transition from one state to another should feel dramatic and emotionally powerful
- Every scene should feel alive and reactive
Tone:
- Poetic
- Haunting
- Futuristic
- Philosophical
- Beautiful but slightly unsettling
- Emotional rather than corporate
Technical guidance:
- Use advanced front-end techniques to make it visually impressive
- If helpful, use canvas, SVG, WebGL, or Three.js-style visual thinking
- Smooth animations are extremely important
- Prioritize visual cohesion and atmosphere over UI complexity
- Keep performance reasonably optimized, but do not sacrifice the experience by making it too plain
What to avoid:
- Generic webpage design
- Boring section-by-section layout
- Random disconnected animations
- Plain CSS-only “pretty” styling without deeper visual direction
- Overly corporate or product-design aesthetics
- Too much text explaining the concept instead of showing it visually
Goal:
I want the final result to feel like a premium interactive short visual journey - something that makes the viewer pause and think, “wow, this actually feels like the passage from human life into digital existence.”
Make it feel like an experience, not a page.
한국어 번역
몰입형이고 예술적이며 시각적으로 압도적인 인터랙티브 경험을 만들어 주세요. 기본 웹페이지도, 단순한 CSS 레이아웃도, 장식 효과만 덧붙인 텍스트도 아닙니다.
주제는 인류가 오늘날의 생물학적 존재에서, 인간의 의식이 기기나 인공적인 그릇, 혹은 디지털 환경으로 옮겨지는 가까운 미래의 세계로 변모하는 과정입니다.
중요:
이것은 표준적인 웹사이트가 아니라 시각적 경험 또는 디지털 아트 작품처럼 느껴져야 합니다. 흔한 섹션, 카드, 단순한 히어로 레이아웃, 기본적인 그라디언트, '랜딩 페이지' 같은 인상은 피하세요. 시네마틱하고, 분위기가 있으며, 감정적이고, 잊히지 않는 무언가를 원합니다.
모든 CSS와 JavaScript를 포함한 단일 자체 완결형 HTML 파일로 제작하세요. 최종 결과물은 완성도 높고 시각적으로 인상적이어야 합니다.
크리에이티브 방향:
- 경험은 명확한 시각적 진행을 보여주어야 합니다:
1. 오늘날의 인간 삶
2. 전환 / 변모
3. 탈생물학적 / 업로드된 의식의 미래
- 여정은 존재의 단계들을 통과하듯 매끄럽게 느껴져야 합니다.
- 비주얼은 감정, 정체성, 기억, 죽음, 초월, 그리고 육체와 기계의 경계가 흐려지는 것을 전달해야 합니다.
- 경험은 SF 영화, 인터랙티브 디지털 아트, 미래적인 미술관 설치의 융합처럼 느껴져야 합니다.
시각 요구 사항:
- 전체 화면 몰입형 프레젠테이션
- 풍부한 분위기, 조명, 광채, 깊이, 움직임
- 단계 사이의 매끄러운 전환이 있는 레이어드 장면
- 추상적이지만 아름다운 상징: 신경 패턴, 해체되는 신체, 기억의 파편, 흐르는 데이터, 홀로그램 구조, 입자, 빛의 궤적, 합성 형태, 디지털 건축
- 절제되고 의미 있게 사용된 우아한 타이포그래피
- 텍스트가 많지 않아도 강한 시각적 스토리텔링
- 고급스러운 미학: 정교하고, 의도적이며, 예술적
상호작용 요구 사항:
- 사용자는 페이지를 스크롤하는 것이 아니라 변모를 통과하고 있다고 느껴야 합니다
- 의미 있는 인터랙션을 추가하세요: 스크롤, 마우스 움직임, 호버 동작, 장면 전환, 또는 입력에 반응하는 섬세한 반응
- 한 상태에서 다른 상태로의 전환은 극적이고 감정적으로 강렬하게 느껴져야 합니다
- 모든 장면이 살아 있고 반응하는 느낌이어야 합니다
톤:
- 시적
- 잊히지 않는
- 미래적
- 철학적
- 아름답지만 약간 불안한
- 기업적이지 않고 감정적
기술 지침:
- 고급 프런트엔드 기법을 사용해 시각적으로 인상적으로 만드세요
- 도움이 된다면 canvas, SVG, WebGL, 또는 Three.js 스타일의 시각적 사고를 사용하세요
- 부드러운 애니메이션이 매우 중요합니다
- UI 복잡성보다 시각적 응집력과 분위기를 우선하세요
- 성능은 합리적으로 최적화하되, 너무 평범하게 만들어 경험을 희생하지 마세요
피할 것:
- 흔한 웹페이지 디자인
- 지루한 섹션별 레이아웃
- 무작위로 연결되지 않은 애니메이션
- 더 깊은 시각적 방향 없이 CSS만으로 꾸민 '예쁜' 스타일링
- 지나치게 기업적이거나 제품 디자인 같은 미학
- 개념을 시각적으로 보여주지 않고 설명하는 텍스트가 너무 많은 것
목표:
최종 결과물이 프리미엄 인터랙티브 짧은 시각 여정처럼 느껴지길 원합니다. 보는 사람이 잠시 멈추고 '와, 이건 정말 인간의 삶에서 디지털 존재로 넘어가는 통과처럼 느껴진다'라고 생각하게 만드는 무언가.
페이지가 아니라 경험처럼 느껴지게 하세요.
