프롬프트
엄선
모델
제출
블로그

AhaPrompt

이미지·영상·오디오, 모든 주요 AI 모델을 아우르는 프롬프트 라이브러리

탐색

전체 프롬프트
엄선 프롬프트
이미지 프롬프트
영상 프롬프트
오디오 프롬프트
AI 모델
프롬프트 제출
블로그

언어

English
中文
日本語
한국어

Copyright © 2026 AhaPrompt All rights reserved.

개인정보 처리방침 이용약관

홈AI 프롬프트 라이브러리AI 영상 프롬프트부드러운 호버 데모 화면 녹화

부드러운 호버 데모 화면 녹화

AClaude Opus 5.5Anthropicvideo

[PAGE URL / FILE]의 부드러운 호버 데모 영상을 녹화하세요. 프레임 - 1440×900, 컴포넌트를 중앙에 배치. 배경과 겹치면 대비되는 배경을 사용하세요. - 커서, 클릭, 브라우저 UI는 보이지 않게. 실제 호버 이벤트와 원래 애니메이션 속도를 사용하세요. 줌 시점 - 호버 시 변화하는 영역(예: 메뉴 항목)을 측정하세요. - 프레임 너비의 절반 이상, 높이의 4분의 1 이상이면 줌하지 마세요. - 그렇지 않으면 너비의 약 70%를 채우도록 줌하되, 최대 2.4×까지. 1.4× 미만의 줌은 생략하세요. - 이미지의 실제 해상도를 넘어서 줌하지 마세요. 카메라 (Screen Studio처럼 부드럽게) - 줌과 팬을 임계 감쇠 스프링(바운스 없음)으로 함께 애니메이션화하세요, 정착까지 약 1초, 로그 스케일로 줌. - 정지 상태에서 시작해 부드럽게 이동하고, 각 호버된 항목을 따라가며(각 약 1.2초), 다시 부드럽게 빠져나오세요. - 정확히 첫 프레임에서 끝나 끊김 없이 반복되도록 하세요. - 프레임당 줌 변화는 8%를 넘지 않도록 하세요. 출력 - MP4 (H.264), 30 fps, 5–8초, 오디오 없음, 2 MB 미만, 전체 해상도. - 너무 크면 비트레이트만 낮추세요; 절대 축소, 크롭, 속도 향상을 하지 마세요.

상세 정보

유형: AI 영상 프롬프트
종횡비: 8:5
Duration: 0:05
업데이트: 2026. 10. 21.

카테고리

Animation Motion Graphics Advertising

이 프롬프트 사용 방법

1위의 복사 버튼으로 프롬프트 전문을 복사하세요.
2Anthropic의 Claude Opus 5.5 또는 선호하는 AI 영상 생성 도구를 엽니다.
3프롬프트를 붙여넣되 카메라·모션 관련 표현은 그대로 유지하세요——영상 연출을 좌우하는 부분입니다.
4예시의 설정(8:5 · 0:05 · Animation · Motion Graphics · Advertising)에 맞춰 생성한 뒤 조금씩 다듬으세요——작은 표현 차이가 결과를 크게 바꿉니다.

자주 묻는 질문

이 영상은 어떤 AI 모델로 생성되었나요?

이 클립은 Anthropic의 Claude Opus 5.5로 생성되었습니다. 페이지의 프롬프트가 생성에 사용된 원문 그대로입니다.

이 프롬프트는 어떤 설정을 사용하나요?

예시는 Claude Opus 5.5에서 다음 설정으로 생성되었습니다: 8:5 · 0:05 · Animation · Motion Graphics · Advertising. 같은 설정을 사용하면 가장 비슷한 결과를 얻을 수 있습니다.

비슷한 결과를 얻으려면 어떻게 하나요?

먼저 프롬프트를 그대로 복사한 뒤, 카메라·모션·조명 표현은 유지하고 피사체만 바꿔보세요. 영상 모델은 표현에 민감하므로 몇 차례 시도하는 것이 좋습니다.

이 프롬프트를 수정해도 되나요?

물론입니다. 장면을 교체하거나 템포 표현, 화면 비율을 바꿔 프로젝트에 맞게 조정하세요.

Claude Opus 5.5 프롬프트 더 보기

AClaude Opus 5.5

나에게 요청하세요: 워드마크용 한 단어 브랜드 이름(동사가 이상적), 9~12장의 고해상도 사진, 명확한 드롭과 조용한 브레이크다운이 있는 120 BPM에 가까운 로열티 프리 트랙(Mixkit, 상업 프로젝트 무료), 그리고 움직이는 식물 그림자가 있는 빈 벽의 무료 스톡 샷(Pexels). 순수 2D로 Apple 키노트 스타일의 제품 런칭 필름을 하나의 끊김 없는 테이크로 제작하세요. 모든 장면은 이전 장면에서 직접 발전해야 합니다: 페이드, 블러 전환, 컷 없음. 요소들은 후속 요소로 모핑됩니다. 타이포그래피는 마스크 가장자리를 통해 상승하고, 아이콘은 제로 스케일에서 팝되며, 진행 바는 캔버스 전체로 확장되고, 페이지는 프레임 안으로 밀려 들어오며, 검은 형태가 화면을 덮도록 확장된 후 다음 장면으로 수축됩니다. 따뜻한 오프화이트 배경, 검은 인터페이스 요소, 그리고 사진 위에 레이어드된 iOS 26 스타일 리퀴드 글래스를 사용하세요. 워드마크는 Archivo(wdth 125, weight 800)로, UI는 Geist로 설정하세요. 커서는 실제 클릭, 드래그, 롱프레스를 통해 모든 상호작용을 시작해야 합니다. 화면 스튜디오 느낌으로 카메라를 움직여 각 비트가 정사각형 구도를 채우도록 하고, 커서를 카메라와 함께 스케일하세요. 금지: 크로스페이드, 블러인, 밝기 "리빌", 3D 플립, 파티클, 글로우, 1초 이상의 정적 유지, 그리고 템플릿처럼 보이는 모든 것. 120 BPM, 54 비트, 매 비트마다 눈에 띄는 변화. 오픈: 워드마크가 아코디언처럼 자체 마침표를 향해 수축합니다. 점이 검은 알약으로 성장하고 그 안에서 라벨이 나타납니다. 클릭하면 여섯 개의 아이리스 블레이드가 라벨 주위로 닫혔다가 사진 위로 스프링 열립니다. 원형이 사각형이 되어 축소됩니다. 그 뒤에서 그리드가 종이 한 장처럼 펼쳐집니다 - 중앙, 플러스, 모서리 - 그런 다음 벤토 레이아웃으로 재구성됩니다. 클릭이 한 타일로 다이브하여 정확히 드롭에 착지합니다. 글래스: 글래스 단어가 한 글자씩 만들어지고, 그런 다음 물방울로 액화됩니다. 물방울이 옆으로 늘어나 글래스 툴바가 됩니다. 조정 아이콘이 슬라이더로 변환됩니다. 슬라이더를 드래그하면 두 개의 완벽하게 정렬된 샷을 사용하여 사진이 일광에서 골든 아워로 전환됩니다. 유지된 노브가 글래스 렌즈로 변하고, 위로 상승하여 글래스 오브가 됩니다. 다음 사진이 원으로 오브 안에 나타납니다. 오브가 글래스 시계 숫자, 날짜, 홈 바가 있는 잠금 화면으로 확장됩니다. 홈 바가 바깥으로 늘어나 글래스 뮤직 플레이어가 됩니다. 스테이지: 잠금 화면이 물러나고 그 주위의 폰이 드러나며, 베젤이 화면 경계에서 직접 성장합니다. 다이나믹 아일랜드가 액체처럼 늘어나고, 폰에서 핀치되어 떨어져 나와 캔버스 가로질러 날아가 Mac 창으로 확장됩니다. 창이 블라인드처럼 위로 말립니다. 배경화면을 롱프레스하고 Safari 탭 위로 드래그하세요. 브라우저 페이지가 앞으로 밀려 들어옵니다. 이미지가 릴리스되면 랜딩 페이지의 히어로 이미지가 됩니다. 스크롤: 히어로 이미지가 제품 카드 안의 프레임된 프린트로 변환되며, 매트와 몰딩이 사진 가장자리에서 유기적으로 성장합니다. 프레임 색상을 선택하면 프레임 전체에 칠해집니다. 사이즈를 선택하세요. 내비게이션 버튼이 아래로 날아가 "Order print"로 변환됩니다. 주문: 하나의 검은 형태가 지속적으로 상태를 변경합니다: 주문됨 ✓ → 인쇄 중 % → 배송 중(경로를 따라가는 밴) → 배달됨 ✓. 벽: 배달된 원이 검은색이 전체 프레임을 차지할 때까지 확장됩니다. 정확히 한 비트 유지한 다음, 실제 벽 영상 안에 걸린 프레임된 프린트로 수축됩니다. 동일한 여섯 블레이드 아이리스가 아트워크 위로 열렸다가 다시 닫힙니다. 프레임이 화면을 채울 때까지 확장되고, 알약으로 수축되고, 점이 되며, 마침내 돌아오는 비트에 글자들이 바깥으로 스프링 튀어나오게 합니다. 최종 프레임은 오프닝 프레임과 동일해야 합니다. 1. 모든 것을 1440×1440의 단일 HTML 파일 안에 유지하세요. 모든 시각적 속성은 비동기 seek(t) 함수 내부의 시간에서 파생되어야 합니다. CSS 전환, 타이머, 프레임 간 지속 상태 없음. 모든 스프링 모션에 닫힌 형태의 스텝 응답을 사용하세요. 속성이 두 번 이상 목표를 변경할 때마다 각 목표 변경에 대해 별도의 스프링을 추가하여 전체 애니메이션이 시간의 순수 함수로 유지되도록 하세요. 리퀴드 글래스를 구축하려면 모든 글래스 컴포넌트에 그 아래 장면의 자체 복사본을 부여하세요. 둥근 사각형 거리 필드를 기반으로 한 SVG feImage 변위 맵으로 해당 클론을 처리하세요. 약간 다른 스케일의 세 개의 feDisplacementMap을 통과시켜 미묘한 색수차 가장자리 분리를 만든 다음 림 라이트 레이어를 추가하세요. 글래스 타이포그래피의 경우 모든 글리프에 대한 캔버스 거리 필드를 생성하고 변위, 마스킹, 하이라이트에 사용하세요. 구 효과의 경우 소스를 블러 처리하고 알파 임계값을 통과시킨 다음 원본 소스를 결과 위에 다시 합성하여 내부가 완벽하게 선명하게 유지되도록 하세요. 육각형 개구부 주위에 위치한 여섯 개의 블레이드로 아이리스를 구성하세요. 각 블레이드는 두 개의 꼭짓점, 해당 가장자리 확장, 그리고 이를 연결하는 SHORT 호를 사용해야 합니다. 워드마크 압축의 경우 동일한 압축 계수를 사용하여 모든 문자를 마침표 쪽으로 이동하세요. 그려진 너비를 그에 맞게 조정하세요: 먼저 wdth 축을 좁힌 다음 나머지 지오메트리를 스케일하여 모든 글자가 접촉 상태를 유지하도록 하세요. 모든 영상을 ffmpeg(-g 1)로 올인트라로 재인코딩하세요. 결과 미디어를 blob URL을 통해 로드하고 모든 프레임을 그리기 전에 "seeked"를 기다리세요. 오디오의 경우 각 상호작용 이벤트에 다운로드한 SFX를 사용하고(Mixkit), 생성된 사운드는 절대 사용하지 마세요. 측정된 피크를 사용하여 모든 SFX를 배치하세요. 음악을 정확히 다운비트에 시작하고, 카메라 착지를 드롭에 정렬하고, 벽 시퀀스를 브레이크다운 안에 배치하고, 워드마크를 다음에 다시 가져오세요

AClaude Opus 5.5

나에게 물어봐 줘: 도형이 모핑될 8~12개의 UI 상태 (예: 버튼, 로더, 플레이어, 슬라이더, 토글, 탭, 차트, 커맨드 팔레트, 토스트), 흑백 또는 단일 액센트 색상, 그리고 약 120 BPM의 로열티 프리 곡 (예: Mixkit, 상업적 사용 무료). Dribbble 수준의 UI 모션. 하나의 도형, 컷 없음: 모든 상태는 동일한 요소가 크기, 반경, 색상을 모핑하면서 콘텐츠는 짧은 블러와 함께 교체된다. 커서가 실제 클릭과 드래그로 모든 변화를 이끈다. 밝은 웜 그레이 캔버스, 흑백 컴포넌트, 하나의 깔끔한 UI 폰트 (Geist). 모든 곳에 스프링, 아주 약간의 오버슈트만. 카메라가 줌되어 각 상태가 전체 프레임을 채운다. 마지막 프레임이 첫 프레임과 일치하여 완벽하게 루프된다. 금지: 바운시 이징, 파티클 버스트, 글로우, UI 크롬의 그라디언트, 불일치 아이콘 스트로크, 데드 타임, 템플릿처럼 보이는 것. 120 BPM, 7마디, 매 비트마다 무언가 일어난다. 버튼 → 로더 → 체크 → 다이나믹 아일랜드 → 재생/일시정지 모핑이 있는 뮤직 플레이어 → 진행 바 스크럽 → 최대치를 넘겨 드래그하면 늘어나는 볼륨 슬라이더로 변환 → 비트에 맞춰 토글 전환 → 노브가 리퀴드 탭 인디케이터가 됨 → 탭이 스스로 그려지는 차트로 확장, 호버 시 툴팁 → ⌘K로 축소 → 타이핑하여 필터 → 엔터 → 토스트 → 다시 버튼으로. 하나의 HTML 파일, 정사각형 1440x1440. 모든 스타일은 seek(t) 내부의 시간으로부터 계산된다: CSS 트랜지션 없음, 타이머 없음, 프레임 간 상태 유지 없음. 스프링은 폐형 스텝 응답을 사용한다. 여러 번 목표가 바뀌는 값은 변경당 하나의 스프링의 합이므로 시간의 순수 함수로 유지된다. 탭 인디케이터의 두 가장자리는 별도의 스프링을 따르므로 선행 가장자리가 후행 가장자리보다 앞서 늘어난다. 토글 노브에도 같은 기법을 사용한다. 드래그는 직접 조작을 사용한다: 커서가 잡혀 있는 동안 값은 위치로부터 계산된다. 놓으면 있던 위치에서 스프링백된다. numpy로 곡을 분석하여 비트 그리드를 찾고 다운비트에서 시작한다. 모든 UI 사운드를 측정된 피크에 맞춘다. Playwright로 렌더링: 프레임당 4 서브프레임, ffmpeg tmix로 블렌딩하여 60fps 모션 블러. 전체 렌더 전에 비트당 한 프레임을 렌더링한다. 그리드에서 벗어난 것, 답답한 것, 읽기 어려운 것을 수정한다. 카메라가 스케일하는 모든 것에 will-change를 절대 넣지 마라, 텍스트가 흐리게 렌더링된다. 모핑하는 컨테이너 내부에서 교체되는 텍스트는 자체적인 진입 및 퇴장 타이밍이 필요하다, 그렇지 않으면 겹친다. 마지막 프레임을 첫 프레임과 동일하게 만들어라, 커서 위치와 속도 포함, 그렇지 않으면 루프가 끊긴다. 나에게 입력값을 물어본 후, 코드를 작성하기 전에 비트 그리드 위의 상태 목록을 보여줘.

AClaude Opus 5.5

다음을 물어봐 주세요: 도형이 되어야 할 8~12개의 UI 상태(예: 버튼, 로더, 플레이어, 슬라이더, 토글, 탭, 차트, 커맨드 팔레트, 토스트), 순수 흑백 또는 하나의 강조 색상, 그리고 약 120 BPM의 로열티 프리 곡(예: Mixkit, 상업적 사용 무료). Dribbble 수준의 UI 모션. 하나의 도형, 절대 끊기지 않음: 모든 상태는 동일한 요소가 크기, 반경, 색상을 모핑하면서 콘텐츠는 짧은 블러로 교체된다. 커서가 실제 클릭과 드래그로 모든 변화를 이끈다. 밝은 웜그레이 캔버스, 흑백 컴포넌트, 하나의 깔끔한 UI 폰트(Geist). 곳곳에 스프링, 최대 아주 작은 오버슈트만. 카메라가 줌되어 각 상태가 프레임을 채운다. 마지막 프레임이 첫 프레임과 일치하여 루프된다. 금지: 튀는 이징, 파티클 버스트, 글로우, UI 크롬의 그라디언트, 불일치하는 아이콘 스트로크, 죽은 시간, 템플릿처럼 느껴지는 모든 것. 120 BPM, 7마디, 매 비트마다 무언가 일어난다. 버튼 → 로더 → 체크 → 다이나믹 아일랜드 → 재생/일시정지 모핑이 있는 뮤직 플레이어 → 진행 바 스크럽 → 최대치를 넘겨 드래그하면 늘어나는 볼륨 슬라이더가 됨 → 토글이 비트에 맞춰 전환 → 노브가 리퀴드 탭 인디케이터가 됨 → 탭이 스스로 그려지는 차트로 열리고, 호버 시 툴팁 표시 → ⌘K로 축소 → 타이핑하여 필터 → 엔터 → 토스트 → 다시 버튼으로. 1. 하나의 HTML 파일, 정사각형 1440x1440. 모든 스타일은 seek(t) 내부의 시간으로부터 계산된다: CSS 트랜지션 없음, 타이머 없음, 프레임 간 상태 유지 없음. 2. 스프링은 닫힌 형태의 계단 응답이다. 목표를 여러 번 바꾸는 값은 변경당 하나의 스프링의 합이므로, 시간의 순수 함수로 유지된다. 3. 탭 인디케이터의 두 가장자리는 서로 다른 스프링을 타므로, 앞쪽 가장자리가 뒤쪽 가장자리보다 앞서 늘어난다. 토글 노브에도 같은 기법을 사용하라. 4. 드래그는 직접 조작이다: 커서가 잡혀 있는 동안 값은 위치로부터 계산된다. 놓으면 있던 위치에서 스프링으로 돌아온다. 5. numpy로 곡을 분석하여 비트 그리드를 얻고 다운비트에서 시작하라. 모든 UI 사운드를 측정된 피크에 배치하라. 6. Playwright로 렌더링: 프레임당 4 서브프레임, 60fps에서 모션 블러를 위해 ffmpeg tmix로 블렌딩. 7. 전체 렌더 전에 비트당 한 프레임을 렌더링하라. 그리드에서 벗어난 것, 비좁은 것, 읽기 어려운 것을 수정하라. 카메라가 스케일하는 어떤 것에도 will-change를 절대 넣지 마라, 텍스트가 흐리게 렌더링된다. 모핑하는 컨테이너 내부에서 교체되는 텍스트는 자체적인 진입 및 퇴장 타이밍이 필요하다, 그렇지 않으면 겹친다. 마지막 프레임을 첫 프레임과 동일하게 만들어라, 커서 위치와 속도 포함, 그렇지 않으면 루프가 끊긴다. 입력을 물어본 후, 코드를 작성하기 전에 비트 그리드 위의 상태 목록을 보여줘.

AClaude Opus 5.5

huashu-art-motion으로 15초 애니메이션을 만들어 주세요. 이 스킬의 문서는 중국어로 되어 있으니, 읽고 저에게는 영어로 말해 주세요. 1. 먼저 uv, ffmpeg, Playwright Chromium이 있는지 확인하고, 빠진 것이 있으면 설치 방법을 알려 주세요. 2. 어떤 내용이고, 누구를 위한 것이며, 가로인지 세로인지 물어보세요. references/风格配方/INDEX.md의 소재 레이어에서 어울리는 스타일 3개를 별 3개짜리부터 골라 주세요. 세 가지 모두 제 소재에 맞게 구도를 다시 설계하되, 각각 서로 다르게 하고 샘플에 있는 방을 그대로 베끼지 마세요. 고를 수 있도록 각각 정지 프레임 한 장씩 보여 주세요. 3. 제가 고르면, 각 장면에 메인 동작 하나와 그 스타일 카드에 있는 모티프 루프 두 개를 넣어 주세요. 반 고흐라면 별이 빛나는 하늘이 소용돌이로 말려 올라가는 것과 램프의 후광이 바깥으로 퍼지는 것이요. 음악이 있으면 스킬의 BPM 합성을 사용해서 동작을 비트에 맞춰 주세요. 4. 사람이 등장해야 한다면 먼저 저에게 물어보세요: 제가 직접 그린 캐릭터 아트, 이미지 모델로 만든 프레임, 아니면 손과 뒷모습 실루엣만. 5. 렌더링 후에는 스킬 자체의 QA 절차를 따르세요: 먼저 스킬의 QA 스크립트를 실행하고, 그다음 제작에 전혀 참여하지 않은 서브에이전트를 보내 완성된 영상만 보고 문제를 찾게 하세요. 찾은 내용은 审片/ 폴더에 작성하게 하고, 스킬의 전달 스크립트로 전달하세요. 빨간불이 뜨는 것이 있으면 고치고 다시 렌더링한 뒤 저에게 주세요.

AClaude Opus 5.5

나에게 다음을 물어봐: 제품 이름과 한 줄 약속, 보여줄 3~5개의 UI 순간, 강조 색상 하나, 내가 소유한 10~20개의 실제 세로 클립, 그리고 명확한 드롭이 있는 로열티 프리 곡 (예: Mixkit, 상업적 사용 무료). 하이엔드 미니멀. 샷당 하나의 아이디어, 충분한 여백, 강조 색상 하나, 깔끔한 산세리프 하나 (Geist 또는 Inter)에 타이트한 자간. 마스킹된 타이포그래피 리빌, 매치 컷, 일관된 카메라 언어. 실제 영상만, 플레이스홀더 카드 절대 금지. 화면 텍스트에 마침표 없음. 금지: 충격파 링, 파티클 버스트, RGB 분리, 카메라 흔들림, 렌즈 플레어, 네온 글로우, 그리드 바닥, 깜빡이는 배경, 바운시 이징. 120 BPM에서 10마디, 각 2초. 마디 1: 훅이 비트마다 단어 하나씩 나타남. 마디 2: 훅의 한 단어가 제품 UI로 모핑됨. 커서가 타이핑하고 클릭함. 드롭: 원이 버튼에서 확장되어 어두운 장면으로. 그다음 마디당 하나의 무브: 스캔 라인과 3개의 위너가 있는 실제 클립의 벽 핵심 출력이 큰 타이포그래피로 드러남 바닥 반사와 모션 블러된 휩이 하나의 히어로 클립으로 이어지는 실제 영상의 3D 캐러셀 결과로 플립되는 패널 옆 폰 안의 히어로 푸시 컷 위의 큰 통계 3단어 티커 로고 리빌 블랙으로 페이드 1920x1080의 HTML 파일 하나. 모든 스타일은 https://t.co/knoJJfMFI5(t) 내부의 시간으로부터 계산됨: CSS 애니메이션 없음, 타이머 없음, 프레임 간 상태 없음. 실제 비디오: ffmpeg로 클립을 30fps JPEG 시퀀스로 추출하고 프레임마다 img 소스를 교체. seek는 이미지 디코드를 기다림. numpy로 곡을 분석: 템포, 비트 그리드, 마디당 에너지, 드롭. 그리드를 실제 킥 히트에 캘리브레이션. 모든 컷은 다운비트에, 모든 UI 히트는 비트에 착지. Playwright로 렌더: 프레임당 3개의 서브프레임을 t 마이너스, t, t 플러스 1/240초에 렌더한 후 ffmpeg tmix로 블렌드하여 60fps의 실제 모션 블러 생성. 모든 사운드 이펙트는 파일 시작이 아닌 측정된 피크가 이벤트에 착지하도록 배치. 이펙트는 음악 아래에서 조용하게 유지. Loudnorm으로 -14 LUFS로. 전체 렌더 전에 20개 이상의 프레임을 확인. 어수선하거나, 겹치거나, 읽기 어려운 것은 수정. preserve-3d 요소에 opacity나 filter를 절대 설정하지 마, 평탄화되어 양면이 모두 보이니까. 대신 래퍼를 페이드해. 정확한 매치 컷을 위해 런타임에서 요소 위치를 측정해. 상업적 사용을 허용하는 라이선스의 음악과 사운드 이펙트만 사용해. 나에게 입력을 물어본 다음, 코드를 작성하기 전에 모든 타이밍이 비트 그리드에 매핑된 스토리보드를 보여줘.

AClaude Opus 5.5

### 당신의 임무 **SIGNAL / NOISE**라는 실험적인 디지털 간행물을 설계하고 개발하세요. 기술, 인공지능, 디지털 문화, 그리고 인터넷의 미래에 관한 독립 잡지입니다. 우리는 최고의 디지털 편집 디자인 프로젝트와 시각적으로 경쟁할 수 있는 웹사이트를 원합니다. 또 다른 일반적인 SaaS 랜딩 페이지가 아닌, 개성이 담긴 경험을 원합니다. 아트 디렉션, 타이포그래피, 구성, 색상 팔레트, 애니메이션, 시각 시스템을 결정할 창의적 자유가 있습니다. 웹사이트를 어떻게 디자인할지 설명해 달라는 것이 아닙니다. **직접 구축해 주세요.** ### 제품 웹사이트는 네 가지 주요 구성 요소로 이루어집니다: **1. 편집 표지** 간행물의 정체성을 즉시 확립하는 첫 화면입니다. SIGNAL / NOISE라는 이름, 에디션 번호(ISSUE 001), 주인공 편집 콘텐츠, 그리고 기억에 남는 시각적 구성이 포함되어야 합니다. **2. 기사 인덱스** 기술과 디지털 문화에 관한 여섯 개의 가상이지만 사실적인 기사 모음입니다. 여섯 개의 동일한 카드를 사용하지 마세요. 주인공 스토리, 보조 기사, 짧은 콘텐츠를 구분할 수 있는 편집 구성을 디자인하세요. **3. 읽기 경험** 표지에서 접근할 수 있는 최소 하나의 완전한 기사를 개발하세요. 기사 제목: "The Internet Is Becoming a Place Without People". 리드 문단, 여러 섹션, 강조 인용문, 그리고 콘텐츠에 통합된 시각적 요소를 포함하세요. 즐겁고 세심한 읽기 경험이어야 합니다. **4. 내비게이션과 인터랙션** 기능적인 내비게이션, 전환, 호버 상태, 시각적 표시, 그리고 작은 인터랙션 디테일을 구현하세요. 애니메이션은 경험에 기여해야 하며, 무의미한 장식이어서는 안 됩니다. ### 기술 요구 사항 - React, TypeScript, Tailwind CSS. - 애니메이션 및 아이콘 라이브러리를 사용할 수 있습니다. - 데스크톱과 모바일을 위한 반응형 디자인. - 기본 접근성, 키보드 내비게이션, `prefers-reduced-motion` 지원. - 작동하는 것처럼 보이기만 하는 정적 인터페이스는 금지. - 다른 웹사이트의 스크린샷을 디자인의 대체물로 사용하지 마세요. - 사진이나 외부 시각 자료를 사용할 수 있지만, 일관된 아트 디렉션에 통합하세요. - 프로젝트는 로컬에서 실행 가능해야 합니다. ### 디자인 기준 우리가 추구하는 것: - 독특하고 인식 가능한 시각적 정체성. - 뛰어난 타이포그래픽 위계. - 의도를 가지고 공간을 활용하는 구성. - 실험성과 사용성 사이의 좋은 균형. - 세심한 마이크로인터랙션. - 표지, 인덱스, 기사 간의 일관성. - 단순히 압축된 것이 아닌, 설계된 모바일 버전. 피해야 할 것: - 템플릿의 일반적인 모습. - 완벽하게 정렬된 여섯 개의 카드. - 기능 없는 장식적 그라디언트. - 읽기를 방해하는 화려한 효과. - 불필요한 UI 컴포넌트. - 전형적인 AI 제품 랜딩 페이지의 모습. ### 창의적 자유 특정 시각적 참조를 따를 필요가 없습니다. SIGNAL / NOISE가 편집 정체성으로서 무엇을 의미하는지, 그리고 그것이 시각적으로 어떻게 표현되어야 하는지 스스로 결정하세요. 실험적, 미니멀리스트, 브루탈리스트, 세련된 스타일, 또는 완전히 다른 방향을 선택할 수 있습니다. 중요한 것은 당신의 결정들이 하나의 집합체로서 의미를 가져야 한다는 것입니다. ### 결과물 프로젝트 전체를 구축하세요. 완료 후, 작동하는지 확인하고 주요 아트 디렉션 결정에 대한 간단한 설명(최대 200단어)을 제공하세요. **질문하거나 시각적 방향에 대한 승인을 요청하지 마세요. 결정하고 실행하세요.**

AClaude Opus 5.5

나에게 요청해 줘: 워드마크용 한 단어 브랜드 이름(동사가 가장 좋음), 고해상도 사진 9~12장, 드롭과 조용한 브레이크다운이 있는 약 120 BPM의 로열티 프리 트랙(Mixkit, 상업적 사용 무료), 그리고 움직이는 식물 그림자가 있는 평범한 벽의 무료 스톡 클립(Pexels). Apple 키노트 스타일의 런칭 필름, 2D만 사용, 한 번의 연속 테이크로 촬영. 각 장면은 이전 장면에서 자라난다: 페이드, 블러, 컷 없음. 대신 오브젝트가 변형된다. 텍스트는 마스크 라인에서 솟아오르고, 아이콘은 0에서 튀어나오며, 바는 화면을 가로질러 그려지고, 페이지는 앞으로 밀려나오며, 검은 도형이 프레임을 채운 뒤 다음 장면으로 축소된다. 따뜻한 오프화이트 캔버스, 검은 UI, 사진 위에 iOS 26 리퀴드 글래스를 사용한다. 워드마크에는 Archivo(wdth 125, weight 800), UI에는 Geist. 커서가 실제 클릭, 드래그, 롱프레스로 모든 변화를 트리거한다. 카메라를 스크린 스튜디오 스타일로 줌해서 각 순간이 정사각형을 채우게 하고, 커서도 함께 스케일한다. 금지: 크로스페이드, 블러인, 밝기 "현상" 효과, 3D 플립, 파티클, 글로우, 1초 초과 유지, 템플릿처럼 느껴지는 모든 것. 120 BPM, 54비트, 매 비트마다 무언가 일어난다. 오픈: 워드마크가 아코디언처럼 자기 마침표 속으로 압축된다. 점이 검은 알약으로 확장되고, 그 안에서 라벨이 솟아오른다. 클릭: 여섯 개의 아이리스 블레이드가 라벨 위로 닫혔다가 사진 위로 탁 열린다. 원이 사각형으로 변하고 축소된다. 종이 지도처럼 그리드가 뒤에서 펼쳐지고(중앙, 플러스, 코너), 벤토로 재배열되며, 클릭 한 번에 한 타일로 줌인되어 드롭에 정확히 착지한다. 글래스: 유리 단어가 글자 하나씩 나타나고, 물방울로 녹아내려 유리 툴바로 늘어난다. 조정 아이콘이 그것을 슬라이더로 바꾼다. 드래그하면 사진 조명이 낮에서 골든아워로 이동하고(정렬된 두 장의 샷), 잡고 있는 노브는 유리 렌즈가 된다. 그것이 유리 오브로 솟아오르고, 다음 사진이 그 안에 원으로 열리며, 오브가 유리 시계 숫자, 날짜, 그리고 유리 뮤직 플레이어로 늘어나는 홈 바가 있는 잠금 화면으로 성장한다. 스테이지: 잠금 화면이 뒤로 물러나며 폰을 드러내고, 베젤이 화면 가장자리에서 자라난다. 다이나믹 아일랜드가 액체처럼 늘어나고, 집혀 떨어져 나와 날아가며, 블라인드처럼 말리는 Mac 창으로 확장된다. 배경화면을 롱프레스해서 Safari 탭 위로 드래그한다. 페이지가 밀려 들어오고, 이미지를 놓으면 랜딩 페이지의 히어로가 된다. 스크롤: 히어로가 제품 카드 위의 액자 인화로 변형되고, 매트와 몰딩이 사진 가장자리에서 자라난다. 프레임 색상을 고르면(전체에 칠해짐) 사이즈를 고르고, 내비 버튼이 아래로 날아가 "Order print"가 된다. 주문: 하나의 검은 도형이 계속 변한다: Ordered ✓ → Printing % → On its way(경로 위의 밴) → Delivered ✓. 벽: 배달 완료된 원이 확장되어 검은색이 프레임을 채우고, 한 비트 유지한 뒤 실제 벽 영상에 걸린 액자 인화로 축소된다. 같은 아이리스가 인화 위로 열렸다가 다시 닫힌다. 프레임이 화면을 채우고, 알약 → 점 → 글자들이 돌아오는 비트에 맞춰 다시 튀어나온다. 마지막 프레임 = 첫 프레임. 1. HTML 파일 하나, 정사각형 1440x1440. async seek(t) 안에서 시간으로부터 모든 스타일을 계산한다: CSS 트랜지션, 타이머, 프레임 간 상태 유지 없음. 2. 스프링에는 닫힌 형태의 스텝 응답을 사용한다. 한 값에 여러 타깃이 있을 때는 변화마다 스프링을 하나씩 추가해서 시간의 순수 함수로 유지한다. 3. 리퀴드 글래스: 각 유리 요소는 뒤에 있는 장면의 자체 클론을 유지한다. 그 클론을 SVG feImage 변위 맵(둥근 사각형 거리장)으로 필터링하고, 약간씩 다른 스케일의 세 개 feDisplacementMap을 통해 색수차 가장자리를 만든 뒤 림 라이트를 추가한다. 유리 글자의 경우 글리프마다 캔버스 거리장을 사용해 맵, 마스크, 하이라이트를 만든다. 4. 구: 블러와 알파 임계값을 적용한 뒤 소스를 위에 합성해서 유리 내부가 선명하게 유지되도록 한다. 5. 아이리스: 육각형 조리개 주위에 6개의 블레이드를 배치한다. 각 블레이드는 두 꼭짓점, 두 가장자리 연장선, 그리고 그 사이의 짧은 호를 사용한다. 6. 워드마크 압축: 모든 글자를 같은 계수만큼 점 쪽으로 이동시키고 그려진 너비를 그에 맞게 조정한다(wdth 축을 좁히고 나머지는 스케일), 글자들이 접촉을 유지하도록. 7. 영상: 전부 인트라로 재인코딩하고(ffmpeg -g 1), blob URL로 로드한 뒤 각 프레임을 그리기 전에 "seeked"를 기다린다. 8. 사운드: 모든 이벤트에 다운로드한 SFX를 사용하고(Mixkit), 절대 합성하지 않으며, 측정된 피크에 따라 각각 배치한다. 곡은 다운비트에서 시작한다: 줌은 드롭에 착지하고, 벽은 브레이크다운에 두고, 워드마크는 비트에 맞춰 돌아온다. Loudnorm으로 -14 LUFS. 9. Playwright로 렌더링: ffmpeg tmix로 60fps에서 프레임당 4개의 서브프레임을 블렌드한다. 비트마다 한 프레임을 확인한 뒤, 단일 프레임 팝(이웃보다 3배 높은 프레임 차이 스파이크)을 찾는다. backdrop-filter: url()은 Chromium에서 변위 맵을 잘못 읽으므로 대신 장면을 클론한다. 플러드는 코너 너머까지 확장되어 약 0.3초가 걸려야 한다; 그렇지 않으면 화면의 절반이 단일 프레임에서 바뀐다. visibility: visible로 설정된 자식은 숨겨진 부모를 통해 보일 수 있으므로 inherit을 사용한다. 변형하는 도형 안에서 텍스트를 교체하려면 자체 마스크가 필요하다. python http.server는 비디오 범위 탐색을 할 수 없으므로 blob URL을 사용한다. 나에게 입력값을 요청한 뒤, 전체 필름을 작성하기 전에 비트 맵과 4개의 스틸(오픈, 글래스, 스테이지, 벽)을 보여줘.

AClaude Opus 5.5

SVG와 three.js, webgl, 그리고 다른 효과들과 그래픽 기법들이 융합되어 탄생한 새로운 종류의 애니메이션을 표시하는 씽클렛을 만들어줘 — 지금 바로 발명할 수 있는 새로운 형태의 애니메이션으로. 그리고 새로운 테슬라 로드스터(온라인에서 이미지를 찾아봐) 위에서 압축 공기 제트로 공중부양하고 있는 로드스터 위에서 하나의 자전거를 타고 있는 4마리의 펠리컨이 애니메이션되길 원해. 각 펠리컨은 다양한 문화에 따라 각기 다른 옷을 입고 있어야 해.

Claude Opus 5.5 프롬프트 전체 보기 AI 영상 프롬프트 둘러보기