Claude Motion 템플릿: 24가지 모션 스타일

각 스타일의 사양

Paper Editorial

추천 용도: 에세이, 설명 영상, 칼럼. 따뜻한 종이 질감, 세리프 제목, 러스트색 포인트 하나. 매거진 특집처럼 느긋합니다.

레이아웃: 넓은 왼쪽 여백, 왼쪽 위에 제목, 섹션 라벨 위에 가는 선. 막대는 평평한 블록입니다.

모션: 28px 위로 천천히 올라오며 페이드, 0.8s, power2.out. 한 번에 요소 하나만 움직입니다. 바운스 없음.

Blueprint

추천 용도: 아키텍처, 시스템, 기술 설명 영상. 짙은 남색 그리드에 시안색 선화. 모든 요소가 윤곽선으로 그려지고 플로터처럼 쓸려 나타납니다.

레이아웃: 배경에 은은한 60px 그리드. 상자와 막대는 윤곽선만 쓰고 채우지 않습니다. 라벨은 작은 대문자 모노 서체입니다.

모션: 왼쪽에서 오른쪽으로 닦아내는 와이프(clip-path), 0.9s, power1.inOut. 라벨은 도형을 따라 나타납니다. 페이드나 바운스는 없습니다.

Kinetic Poster

추천 용도: 런칭, 프로모션, 소셜 컷. 검은 무대, 포스터 크기의 좁은 서체, 강렬한 형광색 하나. 단어가 빠르고 세게 꽂힙니다.

레이아웃: 좁은 대문자 제목이 촘촘한 행간으로 화면을 가득 채웁니다. 장면당 아이디어 하나.

모션: 하드 컷: 요소가 118% 크기에서 0.32s, expo.out으로 튀어 들어오며 0.07s 간격으로 이어집니다. 떠다니는 움직임은 없습니다.

Quiet Keynote

추천 용도: 제품 스토리, 투자자 업데이트. 밝은 무대, 넉넉한 여백, 흰 카드 위의 차분한 숫자. 프레임마다 수치 하나가 주인공입니다.

레이아웃: 중앙 정렬. 은은한 그림자가 있는 흰 카드. 장면당 12단어 이하.

모션: 92%에서 100%로 부드럽게 커지며 페이드, 0.7s, power3.out. 숫자는 1.2s 동안 카운트업됩니다.

Chalk Lesson

추천 용도: 강의, 튜토리얼, 코스 모듈. 손글씨 제목과 노란 형광펜이 있는 초록 칠판. 단계가 하나씩 쓰여 나옵니다.

레이아웃: 손글씨 제목, 왼쪽에 번호 매긴 단계. 핵심 용어에는 노란 밑줄이 그어집니다.

모션: 글씨를 쓰듯 왼쪽에서 오른쪽으로 닦아내는 와이프, 0.7s, power1.out, 줄 사이 간격 0.22s.

Ledger

추천 용도: 보고서, 지표 리뷰, 금융. 흰 페이지, 모노 서체 수치, 성장을 나타내는 초록색 하나. 차트가 잘 읽히도록 설계했습니다.

레이아웃: 모든 제목 아래에 가는 선. 수치는 모노 서체. 그라디언트, 그림자, 3D 없음.

모션: 16px씩 빠르게 올라오며 0.45s, power2.out, 0.08s 간격. 막대는 기준선에서 자라고 라벨이 뒤따릅니다.

Terminal

추천 용도: 개발 도구, 변경 내역, CLI 데모. 초록색 프롬프트가 있는 차콜색 모노 서체 터미널 창. 실제 출력처럼 줄이 단계별로 찍힙니다.

레이아웃: 모든 요소가 제목 표시줄이 있는 창 하나 안에 들어갑니다. 제목은 프롬프트로 시작합니다. 강조색은 변경된 줄을 표시합니다.

모션: 타이핑하듯 읽히는 단계별 와이프: 0.6s 동안 16단계, 줄 사이 0.2s. 이징 곡선은 쓰지 않습니다.

Sunrise

추천 용도: 브랜드 릴, 공지, 이벤트 오프닝. 코랄에서 바이올렛으로 번지는 배경에 둥근 흰색 서체. 친근하고 밝으며 통통 튀며 등장합니다.

레이아웃: 그라디언트는 화면을 가득 채우는 자식 요소에 적용합니다. 라벨은 알약 모양입니다. 막대와 단계는 반투명 흰색에 큰 둥근 모서리입니다.

모션: 86% 크기에서 통통 튀어 나오며 0.55s, back.out(1.6), 0.09s 간격. 배경은 움직이지 않습니다.

Glass

추천 용도: 제품 스토리, 프리미엄 런칭. 공기 중에 부드러운 색이 감도는 밝은 무대와 서리 낀 듯한 흰 패널. 차분하고 고급스러우며 여백이 넉넉합니다.

레이아웃: 배경에 흐릿한 색 영역 두 개. 패널은 밝은 테두리와 깊고 부드러운 그림자가 있는 반투명 흰색입니다.

모션: 92%에서 시작해 페이드와 함께 천천히 부드럽게 커집니다. 0.8초, power3.out. 패널은 동시에 나타나지 않고 하나씩 차례로 등장합니다.

Midnight

추천 용도: 개발자 제품, 로드맵, 변경 내역. 거의 검은 캔버스, 헤어라인 테두리, 촘촘한 글자, 라벤더 빛 하나. 정확하고 차분합니다.

레이아웃: 콘텐츠 뒤에 은은한 빛 하나. 모든 패널에 2px 헤어라인 테두리를 적용합니다. 제목은 촘촘하고 크지 않습니다.

모션: 14px만 짧게 올라오며, 0.5초, power3.out, 0.07초 간격으로 촘촘하게 이어집니다. 빠르고 정확하며 오버슈트가 없습니다.

Pixel

추천 용도: 기술 설명 영상, 재미있는 데이터 스토리. 따뜻한 크림색 바탕에 주황에서 노랑으로 이어지는 블록과 직각 모서리. 픽셀이 켜지듯 모든 요소가 단계별로 나타납니다.

레이아웃: 모든 모서리가 직각입니다. 막대는 따뜻한 색 블록을 쌓아 만듭니다. 각 제목 아래에는 작은 정사각형이 한 줄로 놓입니다.

모션: 8단계로 끊어지는 와이프, 0.5초 동안 0.14초 간격. 부드러운 이징은 전혀 없이 요소가 켜지듯 바뀝니다.

Aubergine

추천 용도: 팀 소식, 사내 커뮤니케이션, 온보딩. 짙은 보라색에 따뜻한 노랑, 채팅 말풍선 모양 패널. 동료가 보낸 메시지처럼 친근하고 대화하듯 편안합니다.

레이아웃: 각 단계는 한쪽 모서리만 직각인 말풍선입니다. 라벨은 알약 모양입니다. 문장은 짧고 말하듯 씁니다.

모션: 말풍선이 86%에서 살짝 넘치듯 튀어나옵니다. 0.5초, back.out(1.4), 0.16초 간격으로 메시지가 도착하는 느낌을 줍니다.

Graph Paper

추천 용도: 기술 문서, 엔지니어링 업데이트, 벤치마크. 은은한 기술적 격자, 모노 글꼴, 중요한 결과에만 쓰는 초록색 하나. 꼼꼼한 실험 노트처럼 읽힙니다.

레이아웃: 배경에 촘촘한 48px 격자. 2px 테두리의 흰색 패널. 제목은 절제하고 데이터를 돋보이게 합니다.

모션: 왼쪽에서 오른쪽으로 와이프, 0.55초, power2.out, 0.1초 간격. 선은 페이드가 아니라 그려지듯 나타납니다.

Pastel Shapes

추천 용도: 워크숍, 크리에이티브 브리프, 커뮤니티 게시물. 크림색 종이, 경쾌한 파스텔 도형, 둥근 모양과 네모 모양의 조합. 함께 만드는 느낌에 살짝 격자를 벗어난 분위기입니다.

레이아웃: 각 막대와 단계는 파스텔 색을 차례로 하나씩 받습니다. 모서리는 둥근 것과 직각이 번갈아 나옵니다.

모션: 86%에서 통통 튀며 나타납니다. 0.5초, back.out(1.8), 0.1초 간격. 도형을 손으로 올려놓은 듯한 느낌입니다.

Signal

추천 용도: 공지, 장애 회고, 강한 메시지. 깊은 검정 바탕에 가로지르는 빨간 띠와 굵은 흰색 글자. 긴박해서 그냥 넘기기 어렵습니다.

레이아웃: 대각선 빨간 띠가 배경을 가로지릅니다. 제목은 아주 촘촘합니다. 장면마다 빨간 요소는 하나만 씁니다.

모션: 118% 크기에서 바로 전환되는 하드 컷. 0.3초, expo.out, 0.06초 간격. 모든 장면이 비트에 맞춰 시작됩니다.

Harbor

추천 용도: 재무, 가격, 비즈니스 리뷰. 밝은 바탕에 짙은 네이비 글자와 확신 있는 인디고 하나. 위쪽에 부드러운 그라데이션이 있어 믿음직하고 깔끔합니다.

레이아웃: 위쪽 가장자리를 가로지르는 비스듬한 색 띠. 은은한 그림자가 있는 흰색 패널. 숫자는 크고 네이비 색입니다.

모션: 22px씩 고르게 올라옵니다. 0.6초, power2.out, 0.1초 간격. 안정적이고 예측 가능하며 장난스러움은 없습니다.

Newsprint

추천 용도: 발표, 공공 보고서, 스토리. 밝은 흰색 종이, 검은 세리프 제목, 붉은 줄 하나. 신문 1면처럼 읽힙니다.

레이아웃: 각 제목 위에는 굵은 검정 줄, 아래에는 가는 줄이 들어갑니다. 모서리는 모두 각져 있습니다.

모션: 살짝 크게 시작해 0.45초 만에 자리 잡으며, 페이지를 탁 내려놓는 느낌을 줍니다. 튕김은 없습니다.

Botanical

추천 용도: 웰빙, 지속가능성, 교육. 크림색 종이, 세이지 그린, 여유로운 세리프체. 수채화 이미지와 어우러진 차분한 분위기입니다.

레이아웃: 넓은 여백과 둥근 패널. 각 라벨 위에는 작은 리프 그린 줄이 놓입니다.

모션: 20px씩 천천히 떠오르며 길게 페이드되고, 0.9초 동안 0.16초 간격으로 이어집니다. 빠르게 등장하는 요소는 없습니다.

Neon Night

추천 용도: 이벤트, 음악, 게임, 나이트라이프. 마젠타 빛이 도는 미드나이트 블루. 강렬한 제목과 빛나는 가장자리로 어두운 공간에 맞춰 만들었습니다.

레이아웃: 패널에 가는 발광 테두리가 있습니다. 강조된 막대와 숫자는 마젠타색으로 빛납니다.

모션: 86%에서 시작해 살짝 넘쳤다 자리 잡으며, 0.5초 동안 0.09초 간격으로 나타납니다. 흔들림 없이 생동감 있습니다.

Clay

추천 용도: 온보딩, 제품 투어, 친근한 설명 영상. 테라코타와 부드러운 둥근 도형이 어우러진 따뜻한 베이지. 유치하지 않으면서 친근합니다.

레이아웃: 아주 둥근 패널 아래에 부드러운 그림자를 깔았습니다. 번호 배지는 원형입니다.

모션: 살짝 넘쳤다가 돌아오는 부드러운 팝 효과, 0.6초, 0.12초 간격. 무언가를 내려놓는 느낌입니다.

Riso Print

추천 용도: 독립 잡지, 문화, 디자인 리뷰. 따뜻한 흰 종이에 파랑과 형광 분홍으로 인쇄한 느낌입니다. 굵고 좁은 제목을 쓰고, 일부러 약간 거칠게 처리했습니다.

레이아웃: 파란색의 좁은 대문자 제목에 분홍 하이라이트를 더했습니다. 라벨은 분홍색 블록입니다.

모션: 118%에서 빠르고 단단하게 자리 잡습니다. 0.4초. 요소가 도장처럼 찍힙니다.

보드룸

추천 용도: 전략, 컨설팅, 이사회 자료. 흰색, 네이비, 로열 블루 한 가지를 씁니다. 결론부터 쓰는 제목과 깔끔한 패널로, 컨설턴트가 페이지를 구성하는 방식 그대로입니다.

레이아웃: 각 제목 왼쪽에 파란 세로선이 있습니다. 패널은 플랫하고 가는 테두리를 두릅니다.

모션: 16px만 짧게 올라옵니다. 0.5초, 0.08초 간격. 빠르고 일정하며 장식적이지 않습니다.

Ink Brush

추천 용도: 에세이, 철학, 브랜드 스토리. 한지, 먹색, 작은 붉은 낙관. 여백을 일부러 넉넉히 두었습니다.

레이아웃: 텍스트는 왼쪽 3분의 2에 두고 주변에 여유를 둡니다. 라벨은 작은 빨간 사각 낙관입니다.

모션: 왼쪽에서 천천히 와이프됩니다. 1초, 0.2초 간격. 붓이 지나가는 듯한 느낌입니다.

Sticker

추천 용도: 어린이, 교실, 소셜 게시물, 가벼운 소식. 화사한 노랑, 굵은 검은 외곽선, 핫핑크. 모든 패널이 스티커처럼 보입니다.

레이아웃: 굵은 검은 외곽선과 어긋나게 놓인 단단한 그림자를 가진 흰색 패널. 노트에 붙인 스티커 같습니다.

모션: 확실하게 넘쳤다가 돌아오는 통통 튀는 팝 효과, 0.45초, 0.1초 간격. 일부러 장난스럽게 만들었습니다.