Motion Skills
← Skills
Premium개발자

코드 쇼케이스

구문 강조 코드 입력, 하이라이트, 터미널 실행.

Claude Code, Codex, Cursor 등 Skill을 지원하는 에이전트에 붙여 넣으세요.

필요 환경: Node.js 22+, FFmpeg, Chrome. API 키 불필요.

다른 테마와 화면 비율

코드 쇼케이스 · 페이퍼 · 9:16
테마: 페이퍼 · 9:16
코드 쇼케이스 · 누아르 · 1:1
테마: 누아르 · 1:1

같은 템플릿을 테마와 화면 비율만 바꿔 렌더링한 마지막 프레임입니다.

테마 5가지

  • 잉크
    ink
  • 페이퍼
    paper
  • 일렉트릭 · 기본
    electric
  • 누아르
    noir
  • 샌드
    sand

프롬프트에 테마 이름을 적으면 바로 바뀝니다. 강조색, 배경색, 글자색을 직접 지정할 수도 있습니다.

설치 프롬프트
https://claude-motion.com/skills/code-showcase/install.md 를 읽고 안내대로 "code-showcase" 스킬을 설치한 다음, 그 스킬로 첫 영상을 만들어 주세요.

Claude Code, Codex, Cursor 등 Skill을 지원하는 에이전트에 붙여 넣으세요.

프롬프트 예시
Use the code-showcase skill with this Python snippet from our README (paste it as `code`), filename "quickstart.py", highlight "3-6", command "python quickstart.py", output "✓ Connected | ✓ 1,204 rows synced", caption "Sync any database in 6 lines".
스타일 프롬프트 (Claude Motion 또는 Opus 5.5)
Make a 14-second 16:9 code demo for [who will watch, e.g. developers], playing [where, e.g. our docs and X]. Use only the code, command and headline I give below; don't change a character. Dark navy background.

A rounded editor window with three dots and a file tab rises in. The code types out character by character with a violet block caret and syntax colors (violet keywords, teal strings, gray italic comments, orange numbers). The key lines then get a translucent violet highlight with a left border while the other lines dim. A terminal below types the command and prints green check lines. End frame: the editor fades and the headline appears.

File name and code: [your snippet, 8 to 12 lines] (e.g. deploy.ts)
Lines to highlight: [e.g. 4–8]
Command: [e.g. "$ npx northwind deploy"]
Headline: [e.g. "From prompt to production in one call"]

설치 불필요: Claude Motion(Team 또는 Enterprise)에 붙여 넣거나 Opus 5.5에 주면 비슷한 스타일이 나옵니다. 결과는 실행마다 달라지며, Skill은 매번 같은 결과를 냅니다.

이 Skill로 만든 작품