design-landing-motion

name	design-landing-motion
description	기억에 남는 다이나믹 랜딩 페이지를 만듭니다. 브리프에서 컨셉 스파인을 뽑고, 시그니처 효과를 하나만 골라 끝까지 완성하며, 화면에 들어갈 비주얼은 Higgsfield로 생성해 브랜드 팔레트에 잠급니다. 스크롤 스크럽·시차 레이어·WebGL 디스플레이스먼트·파티클·마스크 리빌·수평 레일·키네틱 타이포 등을 다루고, React/Next(R3F·Framer Motion·GSAP)와 정적 사이트(바닐라 three.js·GSAP) 양쪽으로 냅니다. 다음과 같은 요청 시 사용하세요: - "랜딩 페이지 만들어 줘", "히어로 인상적으로" - "스크롤에 반응하는 사이트", "스크롤하면 영상이 재생되는" - "three.js 넣어 줘", "WebGL 효과", "3D로 보이게" - "패럴랙스", "마우스 따라 움직이는", "파티클" - "어워드 받을 만한 사이트", "밋밋해 보여" 호스팅·배포·도메인·DB는 범위 밖입니다. 코드는 사용자 프로젝트 안에 만들며 외부 호스팅에 올리지 않습니다. 브랜드 이미지 한 장만 필요하면 design-brand-visual을 쓰세요.
version	1.1.1

design-landing-motion — 다이나믹 랜딩 제작

moai-designer | 컨셉 → 효과 1개 → 에셋 킷 → 구현 → 게이트 (생성 실행: moai-media)

개요

밋밋한 랜딩과 기억에 남는 랜딩을 가르는 건 효과의 개수가 아니라 하나를 끝까지 완성했는지다. 이 스킬은 효과를 여러 개 뿌리는 것을 막고, 컨셉에 맞는 시그니처 효과 하나를 골라 초기 렌더·모바일·저감모션까지 완결시킨다.

두 번째 축은 비주얼이다. AI가 만든 랜딩이 싸구려로 보이는 가장 흔한 이유는 stock 이미지나 CSS 그라디언트로 때우기 때문이다. 이 스킬은 화면에 들어갈 이미지를 브랜드 팔레트에 잠근 채 생성한다.

하지 않는 것

• 호스팅·배포·도메인·DB·시크릿 관리 안 함 — 코드는 사용자 프로젝트 안에 만든다. 외부 호스팅 제품에 올리지 않는다.
• 이미지 생성 실행·모델 선택·크레딧 고지 안 함 — moai-media:media-higgsfield-core 계약에 위임한다.
• 디자인 토큰 정의 안 함 — 프로젝트의 디자인 시스템을 읽어 쓸 뿐 새로 만들지 않는다.
• 사용자에게 직접 질문 안 함 — 슬롯이 비면 blocker를 반환한다.

트리거 키워드

랜딩 페이지, 랜딩, 히어로, 스크롤 효과, 스크롤 스크럽, 패럴랙스, 시차, three.js, threejs, WebGL, R3F, GSAP, ScrollTrigger, 파티클, 마스크 리빌, 키네틱 타이포, 인터랙션, 다이나믹, 어워드, 모션 사이트

참조 파일