Originkit — 움직이는 웹 컴포넌트를 슬라이더로 맞춰서 복사해 가는 곳

웹사이트에 붙이는 애니메이션 컴포넌트를 모아둔 무료 라이브러리입니다. 사이트 소개 문구 그대로 "modern websites를 위한 무료 애니메이션 컴포넌트 라이브러리"이고, 지금은 베타로 열려 있습니다. 첫 화면부터 글이 아니라 움직이는 미리보기 타일이 깔립니다.

어떤 점이 다른가

보통 이런 사이트는 완성된 예제를 보여주고 코드를 던져줍니다. 여기는 컴포넌트를 열면 오른쪽에 컨트롤 패널이 붙어 있고, 슬라이더와 색 선택기가 실제 prop과 1:1로 연결돼 있습니다. 블랙홀 컴포넌트라면 입자 수 1000개, 궤도 반경, 기울기 각도, 잔상 길이, 중력 흡입 속도를 화면에서 직접 돌려보고, 마음에 드는 상태 그대로 코드를 복사합니다. 값을 바꾸고 새로고침하고 다시 바꾸는 왕복이 없습니다.

복사 방식이 세 가지인 것도 눈에 띕니다. 코드 그대로 가져가거나, Framer 캔버스에 바로 붙이거나, MCP로 Claude·Cursor·Codex 같은 도구에 연결해 에디터 안으로 바로 불러올 수 있습니다.

이런 걸 다룹니다

• Background 11종 — 파티클 필드, 그리드, 라인 웨이브 같은 화면 전체 배경
• Text 21종 — 글자 단위로 흩어지고 모이는 타이포 모션
• Elements 13종 — 블랙홀, 지구본, 중력 갤러리, 드래그되는 스티커
• Cursor 5종, Animations 5종, Button·Border 등 작은 조각들
• 컴포넌트마다 prop 이름·타입·기본값·설명이 표로 정리된 API 문서

누구에게 권하나

포트폴리오 사이트를 직접 만드는 3D·모션 작업자에게 잘 맞습니다. 릴을 올릴 자리는 있는데 그 주변이 허전할 때, 배경 하나 깔고 제목에 모션을 얹는 것만으로 화면 인상이 달라집니다. 캔버스로 그리는 입자·궤도 계산이라 평소 뷰포트에서 보던 감각이 그대로 통하는 것도 편합니다.

다만 React 기반 코드를 붙여 넣는 구조라 웹 쪽을 전혀 안 만져본 사람에게는 문턱이 있습니다. 대신 MCP 연결을 쓰면 AI 에디터가 붙이는 과정을 대신 해주니, 그쪽부터 시도해보는 편이 빠릅니다.

출처

• Originkit — Free Animated component library for modern websites