# Signup Flow: 가입 양식 애니메이션

커서가 가입 카드의 항목을 하나씩 채우고 Create account를 클릭하면 성공 토스트가 미끄러져 들어옵니다. 동영상 템플릿. Claude용 코드를 복사하거나 Subclip에서 편집하세요.

Canonical URL: https://www.subclip.app/ko/motion-graphics-templates/remotion/signup-flow

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-remotion-remocn-signup-flow.mp4?v=a968a7c10b

shadcn 스타일 가입 카드로, 커서가 이름, 이메일, 비밀번호를 채우고 로딩 상태를 거쳐 제출하면 성공 토스트를 받습니다.

- 프레임워크: Remotion
- 카테고리: UI
- 길이: 13초
- 화면 비율: 16:9 가로
- 코드: 코드 받기(무료 로그인): https://www.subclip.app/ko/motion-graphics-templates/remotion/signup-flow

"Create an account" 카드에 Full Name, Email, Password, Confirm 항목과 Create account 버튼, Sign up with Google 버튼, 로그인 링크가 있습니다. 커서가 위에서 아래로 각 항목을 클릭하면 "John Doe", "m@example.com", 가려진 비밀번호가 입력됩니다. 이어서 Create account 위에 올라가 누르면 버튼에 스피너가 표시되었다가 성공으로 바뀌고, "Account created" 토스트가 미끄러져 들어왔다가 나중에 닫힙니다. 약 11.5초 동안 재생됩니다.

재생 속도와 장면 주변 배경을 조정할 수 있고, 라벨, 값, 색상은 코드에서 편집할 수 있습니다. SaaS 온보딩 데모, "몇 초 만에 가입" 광고, 랜딩 페이지 히어로 영상, 인증 기능 안내에 사용하세요.

## 이럴 때 쓰세요

- SaaS 온보딩 데모
- 빠른 가입 광고
- 랜딩 페이지 히어로 영상
- 인증 기능 안내

## 바꿀 수 있는 항목

- `speed`: 재생 속도 (숫자)
- `stageBackground`: 현장 주변의 배경 (색상)

## 이 템플릿 사용 방법

1. Mac 또는 Windows용 Subclip을 내려받으세요. 이 페이지의 모든 템플릿이 미리 설치되어 있습니다.
2. 템플릿 패널을 열고 Signup Flow을(를) 골라 타임라인에 끌어다 놓으세요.
3. 레이어 설정에서 텍스트, 색상, 타이밍을 바꾸거나 AI 에이전트에게 수정을 맡기세요.
4. 영상을 내보내거나, 코드를 내려받아 내 프로젝트에서 템플릿을 사용하세요.

remocn의 Signup Flow을(를) 바탕으로 제작: https://remocn.dev