어떤 방식으로 작성한 코드를 지원하나요?

흔히 쓰는 네 가지 방식을 그대로 쓸 수 있습니다. window.__seek(t)를 정의해 t초 시점의 한 프레임을 그리는 방식, 일시정지한 GSAP 타임라인을 만들어 window.__timelines에 넣는 방식, Three.js 장면을 __seek 안에서 시간에 맞게 배치한 뒤 렌더링하는 방식, 그리고 일반적인 requestAnimationFrame 루프입니다. 페이지에 캔버스가 하나뿐이면 그 캔버스를 바로 가져오고, 아니면 페이지 전체(SVG, CSS, 텍스트)를 한 프레임으로 그립니다.

CDN의 라이브러리를 쓸 수 있나요?

GSAP(CustomEase, MotionPath, MorphSVG, DrawSVG, SplitText 플러그인 포함)과 Three.js는 내장되어 있어, 코드에서 이들을 가리키는 CDN 주소는 자동으로 내장 버전으로 바뀝니다. 샌드박스는 네트워크에 연결되지 않으므로 그 밖의 외부 라이브러리는 불러올 수 없습니다.

내보낸 영상에 소리가 있나요?

모션 자체에는 소리가 없고, 코드에서 재생한 오디오도 녹음되지 않습니다. 음악이나 내레이션은 타임라인에 따로 넣으면 모션과 함께 내보낼 수 있습니다.

코드에서 오류가 나면 어떻게 하나요?

미리보기 상단과 클립에 오류가 표시되고, 오류 원문은 코드 대화상자에 나옵니다. 「AI에게 수정 요청」을 누르면 AI가 코드를 읽고 고친 뒤 결과를 다시 확인합니다. 고쳐지기 전까지 미리보기는 마지막으로 정상이던 프레임에 멈춰 있고, 다른 클립에는 영향이 없습니다.

코드가 업로드되나요?

아니요. 코드는 프로젝트와 함께 브라우저에 저장되고, 여러분의 기기에서 렌더링하고 내보냅니다. 직접 프로젝트를 클라우드에 저장할 때만 프로젝트와 함께 업로드됩니다.

HTML 동영상 변환

웹 애니메이션, Canvas, Three.js 코드를 MP4로

템플릿으로 시작하기

코드 붙여넣기 / .html 가져오기 Canvas, SVG, GSAP, Three.js로 만든 웹 애니메이션이면 모두 넣을 수 있습니다 AI에게 만들어 달라고 하기 원하는 효과를 말하면 AI가 코드를 써서 타임라인에 넣습니다

클릭 한 번이면 모션이 이미 들어간 채로 편집기가 열립니다. 소재 슬롯이 있는 템플릿은 동영상이나 이미지를 카드에 끌어다 놓거나 「내 파일 사용」을 눌러 파일을 고르면, 편집기가 열릴 때 이미 제자리에 들어가 있습니다. 파일은 여러분의 기기에만 있고 업로드되지 않습니다.

Canvas, SVG, GSAP, Three.js로 만든 웹 애니메이션을 붙여 넣으면 시간에 맞춰 한 프레임씩 그려 영상 위에 겹치고 MP4나 GIF로 내보냅니다. 브라우저에서 처리, 무료, 워터마크 없음.

웹 애니메이션 코드를 붙여 넣거나 .html 파일을 가져오면 타임라인 위의 모션 클립이 됩니다. 배경이 투명해 영상이나 이미지 위에 겹쳐지고, 다른 클립처럼 위치 이동, 크기 조절, 불투명도 조절, 키프레임, 인·아웃 애니메이션을 적용할 수 있습니다.

편집기는 화면을 녹화하는 대신 시간에 맞춰 한 프레임씩 그립니다. 같은 시점에서는 언제나 같은 프레임이 그려지므로 미리보기에서 본 모습이 그대로 내보내집니다. 코드 속 Math.random, Date, requestAnimationFrame은 결정적인 시계로 바뀌고, GSAP과 Three.js는 내장되어 있어 외부 스크립트를 따로 불러올 필요가 없습니다.

코드는 격리된 샌드박스에서 실행되며 네트워크에 연결되지 않습니다. 외부 이미지와 글꼴은 불러올 수 없으니 필요하면 data: 주소로 인라인해 주세요. 작품이 선언한 매개변수(텍스트, 색상, 숫자)는 오른쪽 설정 패널에 나타나며, 바꾼 뒤 바로 MP4나 GIF로 내보낼 수 있습니다.

자주 묻는 질문

어떤 방식으로 작성한 코드를 지원하나요?: 흔히 쓰는 네 가지 방식을 그대로 쓸 수 있습니다. window.__seek(t)를 정의해 t초 시점의 한 프레임을 그리는 방식, 일시정지한 GSAP 타임라인을 만들어 window.__timelines에 넣는 방식, Three.js 장면을 __seek 안에서 시간에 맞게 배치한 뒤 렌더링하는 방식, 그리고 일반적인 requestAnimationFrame 루프입니다. 페이지에 캔버스가 하나뿐이면 그 캔버스를 바로 가져오고, 아니면 페이지 전체(SVG, CSS, 텍스트)를 한 프레임으로 그립니다.
CDN의 라이브러리를 쓸 수 있나요?: GSAP(CustomEase, MotionPath, MorphSVG, DrawSVG, SplitText 플러그인 포함)과 Three.js는 내장되어 있어, 코드에서 이들을 가리키는 CDN 주소는 자동으로 내장 버전으로 바뀝니다. 샌드박스는 네트워크에 연결되지 않으므로 그 밖의 외부 라이브러리는 불러올 수 없습니다.
내보낸 영상에 소리가 있나요?: 모션 자체에는 소리가 없고, 코드에서 재생한 오디오도 녹음되지 않습니다. 음악이나 내레이션은 타임라인에 따로 넣으면 모션과 함께 내보낼 수 있습니다.
코드에서 오류가 나면 어떻게 하나요?: 미리보기 상단과 클립에 오류가 표시되고, 오류 원문은 코드 대화상자에 나옵니다. 「AI에게 수정 요청」을 누르면 AI가 코드를 읽고 고친 뒤 결과를 다시 확인합니다. 고쳐지기 전까지 미리보기는 마지막으로 정상이던 프레임에 멈춰 있고, 다른 클립에는 영향이 없습니다.
코드가 업로드되나요?: 아니요. 코드는 프로젝트와 함께 브라우저에 저장되고, 여러분의 기기에서 렌더링하고 내보냅니다. 직접 프로젝트를 클라우드에 저장할 때만 프로젝트와 함께 업로드됩니다.

템플릿으로 시작하기

자주 묻는 질문

관련 도구