Scrolltide란 무엇인가
Scrolltide는 AI로 웹사이트를 만드는 워크플로를 위한 소재 라이브러리입니다. 핵심은 Figma 파일 더미가 아니라, AI에 그대로 넣을 수 있는 프롬프트입니다. 프롬프트를 복사해 Claude나 Cursor, 또는 다른 코딩 AI에 붙여 넣으면 스크롤에 반응하는 모션이 이미 붙어 있는 완성된 페이지가 결과물로 나옵니다.
공식 슬로건은 아주 직설적입니다. "당신의 웹사이트가 AI가 만든 것처럼 보이지 않게." 실제로 있는 문제입니다. AI가 뽑아낸 랜딩 페이지는 대부분 가운데 정렬된 큰 제목에 카드 세 장으로 끝나는데, Scrolltide는 바로 그 지점을 겨냥합니다.
라이브러리에 담긴 것
현재 사이트는 세 갈래로 나뉩니다.
- 페이지 템플릿: 143종. Hero Section, 완성형 랜딩 페이지, 포트폴리오, 이커머스, 3D 웹사이트 배경 같은 상황을 아우르며, 대부분 Premium으로 표시되어 있습니다.
- 컴포넌트: 85종. 글래스모피즘 탭, 모핑 내비게이션 바, 카드 아코디언, 파티클 지구본, 글로우 링 버튼처럼 기존 프로젝트에 골라 넣을 수 있는 단위입니다.
- 셰이더: 55종의 GPU 애니메이션 배경. 그라데이션, 오로라, 리퀴드 메탈, 불꽃 같은 스타일을 MP4, 스틸 컷, 삽입 가능한 컴포넌트 형태로 제공합니다.
모든 항목에 실시간 프리뷰가 붙어 있어서, 구매 전에 모션을 먼저 확인하고 결정할 수 있습니다.
기술 스택과 전달 방식
템플릿은 React, Vite, Next.js, Tailwind CSS 기반이고, 모션 레이어는 Framer Motion, GSAP, Lenis로 부드러운 스크롤을 구현합니다. 3D와 배경 파트는 Three.js, WebGL, 커스텀 셰이더가 담당합니다. 구매 후 받는 것은 압축된 블랙박스가 아니라 읽을 수 있는 소스 코드입니다.
이런 사람에게 맞습니다
"제대로 만든 느낌"의 마케팅 페이지를 빠르게 내놓아야 하지만 애니메이션 곡선을 처음부터 조정하고 싶지는 않은 1인 개발자, 디자인 엔지니어, 외주 작업을 하는 팀에 맞습니다. 정적인 페이지만 만든다거나 프로젝트의 성능 예산이 아주 빡빡하다면, 이런 스크롤 모션이 치를 비용을 직접 따져봐야 합니다.
