Claude Opus 5.5 기반 475개 이상의 모션 그래픽·3D 데모 및 프롬프트 오픈소스 컬렉션

AI 리서처이자 크리에이터인 아에멘(@aymenpursue)이 2026년 10월 4일, 클로드 오퍼스 5.5(Claude Opus 5.5)를 활용해 제작된 475개 이상의 모션 그래픽, 3D 씬, 브라우저 게임 데모와 원본 프롬프트를 집대성한 오픈소스 저장소 'awesome-opus5-5-videos'를 공유했습니다. 개발자 yihui-dev가 정리해 MIT 라이선스로 배포 중인 이 컬렉션은 불투명한 픽셀 단위 동영상 생성 AI 모델 대신, 웹 표준 실행 코드로 고품질 시각 연출을 생성하는 실전 프롬프트 제작법을 체계적으로 제공합니다.

이미지 출처: @aymenpursue (X) / yihui-dev (GitHub)

소셜 미디어 X(구 트위터)를 중심으로 클로드 오퍼스 5.5 기반의 고난도 비주얼 작업물이 다수 바이럴되었지만, 대다수 작업물은 결과 영상만 공개되어 다른 작업자가 직접 구조를 학습하거나 재현하기 어려웠습니다. 이번 저장소는 실제 동작이 검증된 475개 이상의 데모마다 원작자가 사용한 프롬프트 전문을 매핑하여 누구나 동일한 결과물을 브라우저상에서 재현하고 개작할 수 있도록 돕습니다.

실행 가능한 웹 표준 코드로 구현되는 AI 모션 그래픽 메커니즘

awesome-opus5-5-videos에 수록된 데모들의 핵심 기술적 특징은 확산(Diffusion) 기반의 무거운 비디오 파일 대신, 브라우저에서 실시간 연산되는 '실행 가능한 코드(Executable Code)'로 애니메이션을 생성한다는 점입니다.

• 표준 웹 기술 스택 활용: 수록된 데모들은 HTML, HTML5 Canvas, SVG, Three.js 3D 라이브러리, GSAP, Web Audio 및 WebGL/GLSL 셰이더 코드를 기반으로 제작되었습니다.
• 해상도 및 압축 손실 배제: 사전 렌더링된 픽셀 비디오 파일 대신 코드와 수학적 벡터 연산으로 화면을 직접 그리므로, 디스플레이 해상도에 맞춰 래스터 압축 손실 없이 선명한 그래픽을 표현할 수 있습니다.
• 실시간 인터랙션과 물리 연산: 정적 영상 재생에 머무르지 않고 마우스 인터랙션과 입력에 반응하며, Three.js와 Canvas 기반의 물리 시뮬레이션 및 상호작용 요소를 포함합니다.
• 경량화 및 비용 효율성: 고비용의 비디오 확산 모델 추론 인프라 대신, 클로드 오퍼스 5.5가 생성한 단일 웹 스크립트 파일을 브라우저나 클로드 아티팩트 환경에서 즉각 렌더링할 수 있습니다.

3D 공간 연출부터 인터랙티브 게임까지 475개 데모의 주요 구성

저장소 README는 대표적인 100개 사례를 선별해 소개하며, prompts/ 디렉토리와 연계된 Skillry 쇼케이스 페이지에서 전체 475개 프롬프트와 원작·재현 데모 영상을 함께 제공합니다.

1. 3D 환경 및 가상 공간 (3D Worlds & Scenes): Three.js 및 GLSL 셰이더를 활용한 절차적 지오메트리, 조명, 파티클 시스템 등을 결합한 3D 가상 공간 및 장면 데모들입니다.
2. 상용 모션 그래픽 쇼릴 (Motion Graphics Showreels): GSAP, GLSL, Web Audio 등을 결합한 텍스트 애니메이션, 키네틱 타이포그래피, UI 쇼케이스, 인포그래픽 및 과학 해설 비주얼 등 전문 모션 그래픽 수준의 연출이 포함되어 있습니다.
3. 브라우저 인터랙티브 미니게임 (Interactive Experiments & Games): Canvas 및 WebGL 기반의 아케이드 상호작용과 조작 가능한 미니게임 프로토타입을 단일 프롬프트로 구현한 사례들입니다.
4. 제품 프로모션 및 시각화 (Product Promotions & Visuals): 제품 광고 연출, 뮤직비디오 비주얼, 데이터 시각화 등 실무 및 상용 디자인 프로젝트에 참고할 수 있는 연출 예시들이 정리되어 있습니다.

클로드 코드와 아티팩트 환경에서의 실전 재현 및 커스터마이징 워크플로우

저장소에 수록된 프롬프트는 클로드 웹 인터페이스의 아티팩트(Artifacts) 기능이나 터미널 기반 에이전트인 클로드 코드(Claude Code)에서 손쉽게 실행할 수 있도록 설계되었습니다.

1. 저장소 프롬프트 탐색: GitHub 저장소 prompts/ 디렉토리나 README, 또는 Skillry 온라인 쇼케이스 페이지에서 원하는 시각적 연출 스타일(3D 씬, 모션 그래픽, 인터랙티브 데모 등)을 선택합니다.
2. 원본 프롬프트 복사: 각 데모에 보존된 원작자의 프롬프트를 원문 그대로 복사합니다.
3. 클로드 환경에 주입: 클로드 오퍼스 5.5 모델이 선택된 대화창이나 클로드 코드 작업 공간에 프롬프트를 입력하고, 단일 HTML 파일로 실행 가능한 형태로 생성하도록 요청합니다.
4. 실시간 렌더링 및 프리뷰: 모델이 생성한 코드를 아티팩트 창이나 브라우저에서 실행하여 시각 완성도를 검증하고, Skillry 쇼케이스에서 원작 영상과 재현 결과물을 비교해 봅니다.
5. 변수 커스터마이징: 생성된 코드 내부의 색상 팔레트, 파티클 및 애니메이션 속도 파라미터 등을 수정하여 목적에 맞는 맞춤형 시각 에셋으로 개작합니다.

별도의 복잡한 영상 편집 툴이나 렌더팜 없이도 프롬프트와 웹 표준 코드만으로 프로페셔널한 인터랙티브 비주얼을 제작할 수 있는 실전 리소스입니다.

원문 출처

• X (Twitter) 원문: @aymenpursue 게시글 (2106725123151794477)
• GitHub 저장소: yihui-dev/awesome-opus5-5-videos
• 온라인 쇼케이스: Skillry Opus 5.5 Showcase