<inputs>

프롬프트

<inputs>
次の3つを私に質問すること：図形が変身する8〜12個の画面部品（例：ボタン、読み込み中の表示、音楽プレーヤー、音量スライダー、オン/オフのスイッチ、タブ、グラフ、⌘Kで開く検索窓、一瞬出る通知）、色は完全な白黒か差し色1色か、そして120BPM（1分間に120拍のテンポ）前後の著作権フリーの曲（例：Mixkit、商用利用無料）。
</inputs>

<direction>
デザイナー向け作品サイト「Dribbble」に載るレベルの、洗練された画面の動き。図形は1つだけで、絶対に場面を切り替えない。すべての状態は、同じ1つの図形が大きさ・角の丸み・色を変えながら形を変えていく動きで表し、中身は短いぼかしをはさんで入れ替える。カーソルが本物のクリックとドラッグで、すべての変化を起こす。背景はあたたかみのある明るいグレー、部品は白と黒、画面の文字は日本語で、日本語フォントはNoto Sans JP、英数字と記号はGeist（1種類のフォント）。動きはすべて「ばね」のような自然な動きにし、行き過ぎ（跳ね返り）はごくわずかまで。カメラはズームして、各状態が画面いっぱいになるようにする。最後のフレームは最初のフレームと同じにして、ループさせる。
禁止：弾むような動き、粒が飛び散る演出、光るにじみ、部品へのグラデーション、線の太さが揃っていないアイコン、何も起きない無駄な間、テンプレっぽく見えるもの全般。
</direction>

<structure>
120BPM、7小節（約14秒）、毎拍なにかが起きる。
ボタン → 読み込み中の表示 → チェック → iPhoneのダイナミックアイランド風の表示 → 再生/一時停止のマークが滑らかに変わる音楽プレーヤー → 再生バーのつまみをドラッグして再生位置を動かす → 音量スライダーに変身（最大を超えてドラッグするとゴムのように伸びる） → オン/オフのスイッチが拍に合わせて切り替わる → スイッチのつまみが液体のように動くタブの選択表示になる → タブが開いて、自分で線を描いていくグラフに（カーソルを乗せると吹き出しが出る） → ⌘Kの検索窓に折りたたまれる → 入力して候補を絞り込む → Enter → 一瞬出る通知 → ボタンに戻る。
</structure>

<build>
1. HTMLファイル1つ、正方形1440x1440。すべての見た目は seek(t)（時間tを渡すと、その瞬間の画面が決まる関数）の中で、時間から計算する。CSSトランジション（自動アニメーション機能）もタイマーも使わず、フレーム間で状態を持ち越さない。
2. 「ばね」の動きは、式で直接求められる形（閉形式のステップ応答）にする。目標が何度も変わる値は、変化ごとに1つずつ計算した動きを足し合わせる。そうすれば、いつでも時間だけで値が決まる。
3. タブの選択表示は、左端と右端を別々のばねで動かし、進む方向の先端が後ろ側より先に伸びるようにする。スイッチのつまみも同じ手法。
4. ドラッグは直接操作：カーソルを押している間、値はカーソル位置から計算する。離したら、その位置からばねで戻る。
5. 曲はnumpy（計算用のツール）で解析して拍の位置を割り出し、小節の頭の拍から始める。操作音は、測定した音のピークの位置に置く。
6. Playwright（ブラウザを自動操作して画面を画像に書き出すツール）で描画する。1フレームあたり4コマ分を書き出して、ffmpeg（動画を作るツール）のtmixで重ねてモーションブラー（動きの残像）をかけ、60fpsにする。
7. 全編を書き出す前に、1拍ごとに1フレームだけ書き出して確認する。拍からズレているもの、窮屈なもの、読みにくいものを直す。
</build>

<gotchas>
カメラで拡大縮小される要素には will-change（ブラウザの描画設定）を絶対に付けない。付けると文字がぼやける。形が変わる箱の中で入れ替わる文字には、それぞれ専用の出入りのタイミングを持たせる（重なるのを防ぐ）。最後のフレームは、カーソルの位置と速度も含めて最初のフレームと完全に一致させる。そうしないと、ループがカクつく。
</gotchas>

<start>
まず入力内容を私に質問して、コードを書く前に、拍ごとの状態リストを見せて。
</start>

한국어 번역

<inputs>
다음 세 가지를 저에게 질문할 것: 도형이 변신할 8~12개의 화면 부품(예: 버튼, 로딩 중 표시, 음악 플레이어, 볼륨 슬라이더, 온/오프 스위치, 탭, 그래프, ⌘K로 여는 검색창, 잠깐 나타나는 알림), 색상은 완전한 흑백인지 포인트 컬러 1색인지, 그리고 120BPM(1분에 120박의 템포) 전후의 저작권 없는 곡(예: Mixkit, 상업적 이용 무료).
</inputs>

<direction>
디자이너용 작품 사이트 “Dribbble”에 올라갈 수준의 세련된 화면 움직임. 도형은 하나뿐이며, 절대 장면을 전환하지 않는다. 모든 상태는 같은 하나의 도형이 크기·모서리 둥글기·색을 바꾸며 형태를 바꾸는 움직임으로 표현하고, 내용물은 짧은 블러를 사이에 두고 교체한다. 커서가 실제 클릭과 드래그로 모든 변화를 일으킨다. 배경은 따뜻한 밝은 회색, 부품은 흰색과 검은색, 화면의 문자는 일본어이며 일본어 폰트는 Noto Sans JP, 영숫자와 기호는 Geist(폰트 1종). 움직임은 모두 “스프링” 같은 자연스러운 움직임으로 하고, 오버슈트(튕김)는 아주 미미하게. 카메라는 줌해서 각 상태가 화면을 가득 채우게 한다. 마지막 프레임은 첫 프레임과 같게 하여 루프시킨다.
금지: 튀는 듯한 움직임, 입자가 흩날리는 연출, 빛나는 번짐, 부품에 대한 그라디언트, 선 두께가 고르지 않은 아이콘, 아무 일도 일어나지 않는 군더더기 정지, 템플릿처럼 보이는 것 전반.
</direction>

<structure>
120BPM, 7마디(약 14초), 매 박마다 무언가가 일어난다.
버튼 → 로딩 중 표시 → 체크 → iPhone 다이내믹 아일랜드풍 표시 → 재생/일시정지 마크가 부드럽게 바뀌는 음악 플레이어 → 재생 바의 손잡이를 드래그해 재생 위치를 이동 → 볼륨 슬라이더로 변신(최대치를 넘겨 드래그하면 고무처럼 늘어남) → 온/오프 스위치가 박자에 맞춰 전환 → 스위치 손잡이가 액체처럼 움직이는 탭 선택 표시가 됨 → 탭이 열려 스스로 선을 그려가는 그래프로(커서를 올리면 말풍선이 뜸) → ⌘K 검색창으로 접힘 → 입력해 후보를 좁힘 → Enter → 잠깐 나타나는 알림 → 버튼으로 복귀.
</structure>

<build>
1. HTML 파일 하나, 정사각형 1440x1440. 모든 겉모습은 seek(t)(시간 t를 넘기면 그 순간의 화면이 결정되는 함수) 안에서 시간으로부터 계산한다. CSS 트랜지션(자동 애니메이션 기능)도 타이머도 사용하지 않고, 프레임 사이에 상태를 이월하지 않는다.
2. “스프링” 움직임은 식으로 직접 구할 수 있는 형태(폐형식 스텝 응답)로 만든다. 목표가 여러 번 바뀌는 값은 변화마다 하나씩 계산한 움직임을 더해 간다. 그러면 언제든 시간만으로 값이 결정된다.
3. 탭 선택 표시는 왼쪽 끝과 오른쪽 끝을 각각 다른 스프링으로 움직이고, 진행 방향의 끝이 뒤쪽보다 먼저 늘어나게 한다. 스위치 손잡이도 같은 방식.
4. 드래그는 직접 조작: 커서를 누르고 있는 동안 값은 커서 위치에서 계산한다. 놓으면 그 위치에서 스프링으로 돌아간다.
5. 곡은 numpy(계산용 도구)로 분석해 박자 위치를 찾아내고, 마디 첫 박에서 시작한다. 조작음은 측정한 소리의 피크 위치에 둔다.
6. Playwright(브라우저를 자동 조작해 화면을 이미지로 내보내는 도구)로 렌더링한다. 1프레임당 4코마분을 내보내고, ffmpeg(영상을 만드는 도구)의 tmix로 겹쳐 모션 블러(움직임의 잔상)를 걸어 60fps로 만든다.
7. 전체를 내보내기 전에 1박마다 1프레임만 내보내 확인한다. 박자에서 어긋난 것, 답답한 것, 읽기 어려운 것을 고친다.
</build>

<gotchas>
카메라로 확대/축소되는 요소에는 will-change(브라우저의 렌더링 설정)를 절대 붙이지 않는다. 붙이면 문자가 흐려진다. 형태가 바뀌는 상자 안에서 교체되는 문자에는 각각 전용의 등장/퇴장 타이밍을 갖게 한다(겹치는 것을 방지). 마지막 프레임은 커서의 위치와 속도까지 포함해 첫 프레임과 완전히 일치시킨다. 그렇게 하지 않으면 루프가 끊긴다.
</gotchas>

<start>
먼저 입력 내용을 저에게 질문하고, 코드를 작성하기 전에 박자별 상태 목록을 보여주세요.
</start>

출처

원작자

okapi_fukugyo

게시일

2026-09-25（由推文 ID 反解）

원문 출처

원문 보기 ↗

수록 출처

yihui-dev/awesome-opus5-5-videos · okapi-fukugyo-166351 · MIT