오렌지 도트 모션 시스템

다음 사항들을 요청해 주세요: 시작 토글 버튼에 표시할 짧은 레이블, 핵심 단어 하나, 그래프에 표시할 백분율, 마지막 카드에 표시할 텍스트, 강조 색상 하나, 그리고 박자가 명확한 배경 음악.

16:9 비율의 2D 모션 디자인 영상입니다. 따뜻한 느낌의 오프화이트 캔버스에 거의 검정색에 가까운 배경, 굵은 서체, 그리고 선명한 오렌지색 포인트를 사용하세요. 오렌지색 점은 모든 장면을 연결합니다. UI에서 시작하여 글자 위의 점이 되고, 스프링 그래프를 따라 움직이다가 도형으로 커진 후 마지막 화면에서 다시 나타납니다. 커서를 사용하여 시작 부분의 클릭감을 실제처럼 표현하세요. 스프링 오버슈트를 최소화하고, 불필요한 공백 없이 움직임을 날카롭고 정확하게 유지하세요.
금지 항목: 스톡 영상, 그라데이션, 빛 효과, 파티클 폭발, 임의 전환, 화면에 이미 있는 요소와 연결되지 않은 움직임.

약 15초 동안, 주요 박자마다 시각적인 변화가 일어납니다.
열기: 커서가 "동작 줄이기" 옆에 있는 주황색 토글 버튼을 클릭합니다. 글자들이 휘어지면서 제자리를 찾아 "Motion"만 남고 "i" 위에 주황색 점이 나타납니다.
스프링: 점이 단어에서 튀어나와 그래프 위에 착지합니다. 점의 경로는 스프링처럼 튀어 오르다가 목표 지점을 지나쳐 "+22%"라는 표시 옆에 멈춥니다.
형태: 점이 선을 가로질러 뻗어 나가 주황색 원으로 변하고 화면을 가득 채웁니다. 그 안에서 검은색 둥근 사각형이 회전하다가 알약 모양으로 늘어납니다. 장면은 검은색 배경 위에 하나의 주황색 점으로 축소됩니다.
글자: "스프링", "편안함", "키네틱 타입", "3D", "사운드"와 같은 단어들이 점을 중심으로 회전합니다. 글자로 이루어진 원은 작은 점들로 이루어진 영역으로 펼쳐집니다.
공개: 하프톤 영역이 확장되고 검은색으로 바뀌면서 마지막 카드가 나타납니다. " Opus 5.5 ", "모션 디자이너." 및 "키프레임 0개".
복귀: 주황색 점이 하프톤, 그래프 및 토글을 거쳐 다시 돌아갑니다. 비디오가 끊김 없이 반복 재생되도록 마지막 프레임을 첫 번째 프레임과 일치시키세요.

1. HTML 파일 하나, 1920x1080 해상도, 초당 60프레임. seek(t) 함수 내부 시간부터 모든 시각적 요소를 계산합니다. CSS 전환, 타이머 또는 프레임 간 상태 전달은 사용하지 않습니다.
2. 토글, 점의 움직임 및 그래프에 폐쇄형 스프링 함수를 사용하십시오. 점을 움직이는 스프링 함수와 동일한 함수를 사용하여 그래프를 그리십시오.
3. "동작 줄이기"에서 "동작"으로 변환할 때 각 글자를 개별적으로 애니메이션 처리합니다. "i"가 점프를 시작할 때까지 주황색 점이 "i"에 붙어 있도록 유지합니다.
4. 주황색 원, 회전하는 사각형, 알약을 같은 모양의 서로 다른 상태로 만드세요. 각 변환 과정에서 위치와 움직임은 유지해야 합니다.
5. 원형 경로를 따라 회전하는 단어들을 배치한 다음, 글자들을 바깥쪽으로 이동시켜 프레임을 하프톤 그리드에 넘겨줍니다.
6. 주황색 점의 크기에 맞춰 점 격자 형태로 하프톤을 그립니다. 프레임 가장자리를 넘어가도록 그린 후 엔딩 카드를 나타냅니다.
7. 클릭, 점 착지, 그래프 최고점, 모양 변화 및 최종 제목을 측정된 박자에 맞춰 동기화합니다. 전체 내보내기 전에 박자당 한 프레임씩 렌더링하여 페이싱을 확인합니다.

그래프와 점은 동일한 움직임을 보여야 하며, 그렇지 않으면 스프링이 부자연스럽게 느껴집니다. 모든 장면에서 주황색 강조 색상을 일관되게 유지하세요. 글자가 겹치지 않도록 나가는 텍스트와 들어오는 텍스트에 서로 다른 타이밍을 적용하세요. 도형이 화면을 가득 채울 때는 네 모서리를 모두 넘어서 확대하세요. 루프 끊김 현상을 방지하기 위해 처음과 마지막 프레임에서 커서, 점, 글꼴을 일치시키세요.

먼저 입력값을 요청한 다음, 비트맵과 네 개의 스틸 이미지(토글, 그래프, 키네틱 타입, 엔딩 카드)를 보여주고 나서 전체 영상을 제작하세요.

Ask me for: a short label for the opening toggle, one hero word, a percentage for the graph, the text for the final card, one accent color, and a track with a clear beat.

A 2D motion design film in 16:9. Use a warm off-white canvas, near-black backgrounds, bold typography and one vivid orange accent. The orange dot connects every scene: it starts in the UI, becomes the dot over a letter, traces a spring graph, grows into a shape and returns on the end card. A cursor makes the opening click feel real. Keep the motion sharp and controlled, with small spring overshoots and no dead time.
Banned: stock footage, gradients, glows, particle bursts, random transitions and motion that isn't connected to an element already on screen.

Around 15 seconds, with a visual change on every major beat.
Open: a cursor clicks the orange toggle beside "Reduce Motion". The letters bend and move into place until only "Motion" remains, with the orange dot above the "i".
Spring: the dot jumps away from the word and lands on a graph. Its path draws a spring response, overshoots the target and settles beside a "+22%" callout.
Shape: the dot shoots across a line, grows into an orange circle and fills the frame. A black rounded square rotates inside it, then stretches into a pill. The scene contracts to a single orange dot on black.
Type: words like "SPRINGS", "EASING", "KINETIC TYPE", "3D" and "SOUND" orbit the dot. The circle of type opens out into a field of tiny dots.
Reveal: the halftone field expands and flips to black, revealing the final card: "Opus 5.5", "Motion designer." and "0 keyframes".
Return: the orange dot moves back through the halftone, graph and toggle. Match the final frame to the first so the video loops cleanly.

1. One HTML file, 1920x1080 at 60fps. Compute every visual from time inside seek(t): no CSS transitions, timers or state carried between frames.
2. Use closed-form springs for the toggle, bouncing dot and graph. Draw the graph from the same spring function that moves the dot.
3. Animate letters individually for the "Reduce Motion" to "Motion" transformation. Keep the orange dot attached to the "i" until it begins its jump.
4. Make the orange circle, rotating square and pill different states of the same shape. Preserve its position and motion through each transformation.
5. Place the orbiting words along a circular path, then move their letters outward to hand the frame over to the halftone grid.
6. Draw the halftone as a grid of dots whose sizes respond to the orange dot. Let it grow past the frame edges before revealing the end card.
7. Sync the click, dot landing, graph peak, shape changes and final title to measured beats. Render one frame per beat to check the pacing before the full export.

The graph and dot must follow the same motion or the spring will feel fake. Keep the orange accent consistent across every scene. Give outgoing and incoming text separate timing so letters don't overlap. When a shape fills the screen, scale it past all four corners. Match the cursor, dot and typography in the first and last frames to avoid a loop stutter.

Ask me for the inputs, then show me the beat map and four stills (toggle, graph, kinetic type, end card) before building the full video.

프롬프트는 다음에서 가져왔습니다. 우편 @ultimaxbt.