popnow
요금로그인지금 만들기

얻을 수 있는 것

  • 헤더, 히어로, 단계 칩, 마퀴가 담긴 완전한 첫 화면 HTML 파일 하나
  • 재사용할 수 있는 파티클 필드 컴포넌트가 있는 타입 지정 React와 Tailwind 블록
  • 구, 고리, 물결, 나선, 이미지 형태를 지원하는 라이브러리 없는 파티클 엔진
  • 따뜻한 종이 톤의 밝은 테마와 어두운 테마 토큰, 팔레트 밖 색을 찾는 검사기
  • 선택: 점들이 만들 PopNow 제품 실루엣, 실행 전에 견적 제공

이럴 때 좋아요

  • SaaS, 앱, 도구의 랜딩 페이지
  • 짧은 아이디어 세 개로 설명할 수 있는 출시
  • 정지된 히어로 이미지를 부드러운 움직임으로 바꾸기

이럴 때는 맞지 않아요

  • 어둡고 에너지가 강한 브랜드
  • 길게 스크롤되는 스토리텔링
  • 이미 큰 사진이나 영상이 주도하는 페이지

사용 방법

Claude·ChatGPT에서

PopNow 스킬 사용: “파티클 애니메이션 히어로”(particle-animation-hero). 할 일: 습관 추적 앱을 위해 내 Next.js 사이트에 히어로를 추가해 주세요. 문구는 'Small steps, kept daily', 아이디어는 Track, Stack, Celebrate입니다.

코딩 에이전트에서

/popnow-particle-animation-hero 습관 추적 앱을 위해 내 Next.js 사이트에 히어로를 추가해 주세요. 문구는 'Small steps, kept daily', 아이디어는 Track, Stack, Celebrate입니다.

이어서 해 보기

세 번째 아이디어는 public/leaf.png의 잎 로고 형태를 만들어 주세요.

대기 명단 페이지에도 쓸 일반 HTML 버전을 주세요.

미리 준비할 것

  • 헤드라인, 한두 문장, 링크 두 개
  • 각각 한 줄 설명이 붙은 짧은 아이디어 세 개
  • 선택: 내 마크나 제품의 투명 PNG, 또는 PopNow API 키

가이드: AI로 랜딩 페이지 만드는 법

비슷한 스킬

전체 보기 →

자주 묻는 질문

무겁지 않나요?

아니요. 2D 캔버스 하나와 수백 줄의 순수 JavaScript이며, WebGL이나 애니메이션 라이브러리는 없습니다. 점의 수는 화면 크기에 따라 정해지고, 숨겨진 탭이나 히어로가 화면을 벗어나면 반복이 멈춥니다.

파티클이 내 로고를 만들 수 있나요?

네. 내가 소유한 것이라면 가능합니다. 굵고 단순한 형태의 투명 PNG를 주면 엔진이 그 모양을 점으로 샘플링합니다. 가격을 확인한 뒤에는 PopNow가 제품의 깔끔한 실루엣도 생성할 수 있습니다.

방문자는 어떻게 조작하나요?

버튼 아래의 단계 칩 세 개를 클릭하거나 화살표 키로 눌러 점들을 바꿉니다. 아무도 고르지 않으면 필드가 몇 초마다 스스로 넘어갑니다.

동작 줄이기 설정을 존중하나요?

네. 동작 줄이기를 켜면 점들은 정지하고, 단계는 트윈 없이 바뀌며, 자동으로 넘어가지 않고 마퀴도 움직이지 않습니다.