GSAP와 모션 컴포넌트를 활용한 60개 이상의 애니메이션 랜딩 페이지 라이브러리 공개 (무료)

한동안 InstaLanding.ai를 만들고 있었는데, 드디어 라이브러리에 60개가 넘는 완성된 랜딩 페이지가 쌓였다.

그냥 스크린샷이나 피그마 파일 따위가 아니다. 실제로 돌아가는 HTML, CSS, 자바스크립트 코드 그 자체다.

페이지 상당수가 GSAP를 써서 애니메이션을 떡칠했고, 영화 같은 화면 전환, 인터랙티브 요소, 그리고 Rive 없이도 Rive 같은 모션 경험을 구현해 놨다.

랜딩 페이지 말고도 이것저것 더 추가했다:

• 60개 이상의 풀 랜딩 페이지 — 프리미엄 디자인에 화려한 애니메이션까지 다 들어간 반응형 페이지.

• 모션 컴포넌트 — 프로젝트에 바로 갖다 붙일 수 있는 애니메이션 UI 요소, 전환 효과, 타이포그래피, 인터랙티브 경험.

• 풀 디자인 시스템 — 타이포그래피, 컬러, 컴포넌트, 레이아웃, 인터랙션까지 다 갖춘 시각적 기반.

• 싱글 파일 HTML — 복잡한 설정 필요 없이 HTML 파일 하나에 다 때려 박음.

근데 여기서부터가 바이브 코딩(vibe coding)하는 애들한테 제일 흥미로운 부분일 거다.

코딩 에이전트한테 디자인 설명한다고 프롬프트 30개씩 날리지 말고, 그냥 실제 코드를 던져줘라.

마음에 드는 거 골라서 Claude Code, Codex, Cursor든 뭐든 쓰는 툴에 던져주고, 네 프로젝트에 맞게 수정하라고 시키면 끝이다.

심지어 기존 앱의 기능은 그대로 둔 채 디자인만 싹 갈아엎는 것도 가능하다.

**에이전트 모드(Agent Mode)**도 추가했고 MCP도 지원하니까, 이제 에이전트가 알아서 라이브러리 뒤져서 디자인 찾고 소스 코드까지 바로 가져올 수 있다.

전부 무료고 오픈 소스다. 로그인도 필요 없다.

https://instalanding.ai

에이전트가 인터페이스 전체를 이해하고 수정할 수 있는 시대가 됐으니, 이제 코드 자체가 새로운 디자인 영감의 원천이 될 수 있지 않을까 싶어서 이런 시도를 해보는 중이다.

실제로 바이브 코딩으로 프로젝트 돌리는 형들 피드백 좀 듣고 싶다. Dribbble이나 Awwwards 같은 기존 영감 사이트들보다 이렇게 바로 돌아가는 디자인 코드를 주는 게 훨씬 도움 되지 않냐?