Originkit 정리 — 무료 React 애니메이션 컴포넌트 100종, 복붙으로 모션 붙이기

레이아웃도 잡았고 카피도 넣었는데 사이트가 밋밋할 때가 있습니다. 뭔가 하나쯤은 눈길을 잡아야 하는데, 히어로에 GSAP 타임라인을 직접 짜자니 반나절이 날아갑니다.

이럴 때 쓰라고 있는 게 컴포넌트 라이브러리입니다. Originkit은 그중에서도 모션에만 집중한 React 컴포넌트 모음입니다. 약 100종이 무료이고, 사이트 자체가 그 효과들을 돌려보는 쇼케이스로 되어 있습니다.

이 글은 사이트를 직접 둘러보고 구성을 확인한 기록입니다. 실제 프로덕션 프로젝트에 넣어 장기간 운용해본 것은 아니므로, 성능·라이선스 관련 판단은 도입 전에 직접 확인하시기 바랍니다.

무엇이 들어 있나

카테고리별로 나뉘어 있고, 개수는 확인 시점 기준입니다.

카테고리	개수	대표 효과
Text	21	Scramble Text, Glitch Text, Dust Text Reveal, Scroll Text Reveal
Image Gallery	16	Coverflow, Gravity Gallery, Draggable Grid, Round Carousel
Elements	13	카드·리스트 계열 인터랙션
Background	11	Line Ripple, Pulse Lines, Prism Grid
Image	8	Fluid Image Reveal, Liquid Distortion, Pixelate Image
Cursor	5	커서 추적·변형
Animations	5	범용 진입 애니메이션
Button / Border	3	Electric Border 등

눈에 띄는 건 Black Hole, Particle Sphere, Particle Tunnel, Globe, Chromatic Waves 같은 무거운 효과들입니다. 캔버스나 WebGL 기반으로 보이며, 히어로 한 곳에 쓰면 그 자체로 시선을 끄는 종류입니다.

어떻게 쓰나

React 프로젝트에 컴포넌트를 복사하거나 CLI로 추가하는 방식입니다. shadcn/ui 계열에서 익숙한 패턴이죠. 전역으로 GSAP이나 Framer Motion을 물리지 않고 컴포넌트마다 자체 구현을 들고 있는 구조로 보입니다.

이 구조의 장점은 분명합니다.

• 필요한 것 하나만 가져오면 됩니다. 라이브러리 전체를 번들에 넣지 않아도 됩니다
• 코드가 내 프로젝트 안에 들어오므로 색·속도·트리거를 직접 고칠 수 있습니다
• 버전 업그레이드에 끌려다니지 않습니다

단점도 같은 자리에서 나옵니다. 코드를 가져온 순간부터 유지보수는 내 몫입니다. 원본이 개선돼도 자동으로 따라오지 않습니다.

사이트 자체도 레퍼런스입니다

Originkit은 컴포넌트를 쓰지 않더라도 볼 가치가 있습니다. 문서·도구 사이트를 만들 때 참고할 만한 구성이거든요.

• 폰트: Roboto Mono 전면 사용. 개발자용 도구라는 인상을 폰트 하나로 만듭니다
• 컬러: 다크 #1E1E1F 바탕에 흰색/#B8B8B8 텍스트, 그리고 오렌지 #FA7319 딱 한 색만 액센트로
• UX: Ctrl+K 커맨드 팔레트, 좌측 카테고리 사이드바 — 컴포넌트 사이트의 표준 문법

액센트를 한 색으로 제한하는 전략은 여러 잘 만든 사이트에서 반복해서 보이는 패턴입니다. 색을 아끼면 그 색이 강해집니다.

실무에서 쓸 때 지킬 것

페이지당 시그니처 효과는 1~2개까지. 이게 가장 중요합니다. 화려한 컴포넌트를 여러 개 붙이면 사이트가 무거워지고, 무엇보다 어디를 봐야 할지 모르게 됩니다. 파티클 배경 + 텍스트 스크램블 + 커서 효과 + 이미지 왜곡을 한 화면에 다 넣으면 아무것도 강조되지 않습니다.

모바일에서 먼저 확인하세요. WebGL·캔버스 효과는 데스크톱에서 멀쩡해도 중저가 안드로이드에서 프레임이 무너지는 경우가 흔합니다. 모바일에서는 정적 대체안으로 바꾸는 분기를 두는 편이 안전합니다.

prefers-reduced-motion을 존중하세요. 사용자가 시스템에서 모션 최소화를 켰다면 애니메이션을 꺼야 합니다. 접근성 문제이자, 어지럼증을 겪는 사용자에게는 실제 불편입니다.

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

점수: 8.5

좋은 점

• 모션 컴포넌트만 100종 가까이, 무료입니다. 이 카테고리에서 선택지가 이 정도인 곳은 드뭅니다
• 사이트에서 바로 돌려보고 고를 수 있습니다. 문서만 보고 상상할 필요가 없습니다
• 컴포넌트를 내 코드로 가져오는 방식이라 커스터마이징이 자유롭습니다
• 쇼케이스 사이트 자체가 다크+모노스페이스 톤의 좋은 레퍼런스입니다

아쉬운 점

• BETA 단계입니다. 컴포넌트가 계속 추가·변경되는 중이라 안정성을 장담하기 어렵습니다
• 상업적 사용 조건을 반드시 확인해야 합니다. “무료”라고 표기돼 있지만 고객사 납품물에 넣기 전에는 라이선스 문구를 직접 읽어보세요
• React 전용입니다. 순수 HTML/CSS 프로젝트에는 그대로 못 씁니다
• 화려한 효과일수록 성능 부담이 큽니다. 저사양 기기 대응은 직접 해야 합니다

이럴 때 쓰세요: React로 만드는 랜딩·포트폴리오에서 히어로 한 곳에 임팩트가 필요할 때. 반대로 정보 전달이 목적인 페이지(문서, 대시보드, 커머스 상세)라면 이런 효과는 방해가 됩니다.

함께 쓰면 좋은 것

레이아웃·타이포는 다른 도구로 잡고 모션만 여기서 가져오는 조합이 현실적입니다. 만약 스크롤 연동 모션이 필요하다면 컴포넌트를 쓰기보다 GSAP + Lenis 조합을 직접 배선하는 편이 제어가 쉽습니다. 이 사이트의 컴포넌트는 국소적인 효과에 강하고, 페이지 전체를 관통하는 스크롤 연출에는 별도 설계가 필요합니다.