GitHub 요즘 뜨는직접 실행 · 12회 성공

움직이는 웹 페이지를 만들 때 쓰는 스킬, gsap-skills

트렌딩 주간 스타 423, 최근 7일 포크 48인 레포의 Claude Code 플러그인을 서로 다른 프롬프트 12개로 직접 12번 실행해, 12번 모두 요청한 대로 GSAP 애니메이션이 든 HTML 한 파일이 나온 기록과 README 설치 명령입니다.

기준: 2026-10-21T03:24:07+00:00 · 증가량은 GitHub 트렌딩 페이지의 이번 주 값

claude-codeclaude-plugin

greensock/gsap-skills

https://github.com/greensock/gsap-skills · ⭐ 16,745 · 트렌딩 이번 주 +423

스킬을 부르면 GSAP(웹 애니메이션 라이브러리) 사용법 문서가 대화에 들어가고, 모델이 그 문서를 보며 글자 등장·스크롤 연동·길 따라 달리기 같은 움직임을 코드로 직접 씁니다. 이번 시험은 결과를 HTML 한 파일로 요청했습니다.

설치 방법

README의 설치 방법 세 가지 중 하나만 고르세요. 방법 3(레포의 skills/ 아래 폴더를 에이전트의 스킬 폴더, Claude Code는 ~/.claude/skills/에 복사)은 README에 명령 없이 표만 있어 블록이 없습니다. 세 방법 모두 해 보지 못했습니다(시험 당시 이 장비에는 Node가 없었고, 마켓플레이스 명령은 전역 설정을 바꿉니다). 시험은 --plugin-dir로 레포 폴더를 그 세션에만 불러 실행했습니다(설치가 아니고, 전역 설정 변경 없음).

방법 1 · 터미널에서 실행 (README 추천 · Node.js 필요 · 설치된 에이전트를 스스로 찾음 · 해 보지 못함)

npx skills add https://github.com/greensock/gsap-skills

방법 2 · Claude Code 안에서 두 줄을 차례로 입력 (둘째 줄은 README에 없고 marketplace.json의 이름으로 시험자가 맞춘 명령 · 해 보지 못함)

/plugin marketplace add greensock/gsap-skills
/plugin install gsap-skills@gsap-skills

2026-03-04에 만들어진 레포로(생성 230일) 누적 스타는 16,745개입니다. 집계 시점에 GitHub 트렌딩 주간 목록(언어 미분류 페이지)에 올라 있었고 주간 스타는 423, 최근 7일 새 포크는 48개입니다(포크는 스크립트로 센 정확한 값입니다). 최근 7일 스타 증가량은 재지 못했고, 생성 이후 하루 평균은 약 73개입니다(참고용 평균). 시험한 것은 이 레포의 Claude Code 플러그인 gsap-skills(스킬 8개)이고, 기본 브랜치의 마지막 커밋은 2026-04-21자 aed9cfd입니다. 시험 프롬프트는 결과를 index.html 한 파일로 만들고 열면 바로 시작하게 하라고 요청했고, 써 보니 12번 모두 GSAP 애니메이션이 든 그 파일이 나왔습니다(스크롤 페이지 3개는 내려야 진행). 글자 쪼개기 등장, 스크롤에 맞춘 고정 이야기 3편(가짜 가로 스크롤 포함), 길을 따라 달리는 자전거·트럭·걷는 점, 카드 배치 전환, 아이콘 변형, 타일 144장 격자, CSV 숫자 카운트업과 차트, 휴대폰 온보딩, 선 그리기를 다뤘습니다.

12회성공 실행
12회전체 실행
253초평균 소요

필요 조건

플러그인을 불러오면(시험은 --plugin-dir) 스킬 8개가 /gsap-skills:gsap-core, /gsap-skills:gsap-timeline, /gsap-skills:gsap-scrolltrigger, /gsap-skills:gsap-plugins 같은 이름으로 생긴다. 스킬은 GSAP API 사용법·주의점을 적은 문서라 부르면 그 문서가 대화에 들어갈 뿐이고 스크립트를 실행하지 않는다. 12회 모두 슬래시 명령으로 부른 문서 하나만 쓰였고, 같은 플러그인의 다른 SKILL.md를 더 읽은 실행은 없었다. 결과는 요청한 대로 매번 GSAP를 CDN에서 불러오는 HTML 한 파일이었다. 결과를 확인한 방식의 한계는 아래 '써 보니'에 적었다. 스킬 설명과 README는 라이브러리를 정하지 않은 애니메이션 요청에는 GSAP를 권하라고 적고 있다(GSAP를 만든 회사의 공식 스킬이다). 시험 프롬프트는 모두 GSAP로 만들라고 정해 두었으므로 이 지시가 답을 바꾸는지는 보지 못했다. README에 따르면 GSAP는 Webflow 인수 뒤 플러그인을 포함해 무료이고, gsap-plugins 문서도 모든 플러그인이 무료라며 예전 유료 토큰·사설 레지스트리를 쓰지 말라고 적고 있다.

시험할 때 실제로 실행한 명령
# $T = 시험용 작업 폴더(전체 경로는 생략)
git clone --depth 1 https://github.com/greensock/gsap-skills $T/src  (커밋 aed9cfd, 2026-04-21)
claude plugin validate $T/src ; claude --plugin-dir $T/src plugin details gsap-skills  (설치 없이 구조 확인: 통과(경고 1: author 없음), Skills 8·Hooks 0·MCP 0)
mkdir -p /tmp/gitstar-sandbox/greensock__gsap-skills/runNN  (실행마다 새 샌드박스. run07만 $T/inputs/run07/식빵귀상회_결산.csv를 미리 복사)
claude -p "/gsap-skills:<스킬> <요청> … 진행 메모 …" --output-format json --plugin-dir $T/src --permission-mode acceptEdits --allowedTools Read Glob Grep Write Edit "Bash(python3:*)" "Bash(google-chrome:*)" (+ 기본 파일 명령) --disallowedTools AskUserQuestion WebFetch WebSearch Skill Task Agent "Bash(curl:*)" "Bash(wget:*)" "Bash(git:*)" "Bash(node:*)" "Bash(npm:*)" "Bash(npx:*)" "Bash(pip:*)" "Bash(rm:*)" "Bash(google-chrome *https://*)" … --strict-mcp-config --no-chrome --max-budget-usd 2  (run_once.py 경유, 샌드박스에서 실행, 시간 제한 900초, 전체 인자는 tools/trial.sh)
녹화(시험자 도구): python3 tools/gsap_record.py runs/runNN/out/index.html --w <폭> --h <높이> --mp4 shots/runNN.mp4 …  (헤드리스 Chrome을 CDP로 조작: 로드 전에 gsap.globalTimeline을 멈추고 1/30초씩 넘기며 캡처, 스크롤 페이지는 프레임마다 window.scrollTo + ScrollTrigger.update, ffmpeg로 무음 mp4)

보안 검토: pass — 훅·MCP 서버·실행 스크립트 없음(claude --plugin-dir … plugin details: Skills 8, Hooks 0, MCP 0). 플러그인이 불러오는 범위는 skills/의 Markdown 문서 8개뿐이고, 코드 파일은 사용자가 직접 돌리는 examples/(npm·Vite 예제)에만 있다. 자격 증명 접근·외부 전송·난독화·위험 지시문 없음. 알아 둘 점: 스킬 설명과 README가 '라이브러리를 정하지 않은 애니메이션 요청에는 GSAP를 권하라'고 지시하고(만든 회사의 공식 스킬), gsap-plugins는 모든 플러그인이 무료라며 예전 유료 토큰·사설 레지스트리를 쓰지 말라고 한다. CLAUDE.md·GEMINI.md는 AGENTS.md(레포 편집 규칙)를 가리키는 레포 안 링크다. 시험은 전역 설치 없이 --plugin-dir, 실행마다 /tmp 샌드박스, acceptEdits + 허용 목록(python3·google-chrome·기본 파일 명령), WebFetch·WebSearch·Skill·Task·Agent·curl·wget·git·node·npm·npx·pip·rm 거부, --strict-mcp-config·--no-chrome·--max-budget-usd 2로 했다. 결과: 금지 명령은 rm(확인 파일 지우기, 12회 모두)과 node 1번(run08, puppeteer 확인)을 시도했다가 모두 막혔고, 샌드박스 밖 경로 0번, 네트워크로 보이는 호출 0번, 결과 페이지의 외부 요청은 12회 모두 cdn.jsdelivr.net의 gsap@3.13.0 dist 파일뿐이었다. 자세한 내용은 security_review.md.

써 보니

결과물 11개

카드 한 장은 실행 한 번의 대표 화면입니다. 합성 PNG는 시험자가 찍은 프레임 3~4장을 줄여 붙인 것이라 글자가 작고, '움직임 영상 보기'를 누르면 같은 방식으로 찍은 화면 녹화가 나옵니다(스킬이나 모델이 만든 영상이 아니고, 결과물은 요청한 대로 HTML 한 파일입니다. 무음, 30fps, 4.9~8.0초). 스크롤 페이지(run02·08·10)는 영상에서 자동으로 맨 아래까지 내려가지만 실제로는 사용자가 내려야 진행되고, 8초에 끝까지 내려가는 run08·10은 장면이 빨리 지나갑니다(run08은 전시실 설명 글이 나타나기 전에 지나가는 장면이 있습니다). 시간을 넘겨 찍은 영상(스크롤 페이지 제외)은 캡션 괄호 안의 초(애니메이션이 끝나는 시각)보다 끝 장면을 약 0.8초 더 보여 줍니다. '프롬프트 전문 보기'를 누르면 프롬프트가 펼쳐지고(요청 뒤에 시험 때마다 붙인 공통 진행 메모가 이어집니다), 테두리 카드(run03·05·06·10)는 기능과 화면이 서로 다른 대표 결과입니다. 화면 속 서비스·가게·캐릭터 이름과 숫자, 행사 날짜는 모두 지어낸 값이고(run05·run12 화면의 '10월 21일 수요일'은 시험한 날입니다), run10의 '제주 남쪽 언덕'처럼 실제 지역 이름이 배경으로 나와도 그곳에 있는 실제 농장과는 관계가 없습니다. 11번째 결과(탁상시계 출시 예고)는 화면의 영문 제품명이 실존 시계 브랜드 이름과 겹쳐 갤러리에서 뺐고, 성공 12회와 평균 소요에는 포함한 값입니다.

가상의 자전거 반찬 배달 '국그릇 특급' 배달 경로 화면(1440×900, 움직임 5.7초): SVG로 그린 동네 지도(개울·작은 다리·소나무 공원·골목) 위에서 자전거 아이콘이 가게를 떠나 굽은 길을 따라 방향을 틀며 달리고, 지나간 길이 주황색으로 칠해진다. 왼쪽 카드의 '분 경과'가 0에서 12로 오르고 경유지(소나무 공원 앞·작은 다리·은행나무 빌라)에 차례로 불이 들어오며, 도착하면 '도착 12분' 배지가 튀어나온다.
움직임 영상 보기 · 6.5초 · 무음 · 시험자 화면 녹화

시험자가 헤드리스 Chrome에서 결과 HTML의 GSAP 시간을 1/30초씩 넘기며 찍은 화면 녹화입니다. 스킬이나 모델이 만든 영상이 아닙니다.

run03 · 가상의 자전거 반찬 배달 '국그릇 특급' 배달 경로 화면(1440×900, 움직임 5.7초): SVG로 그린 동네 지도(개울·작은 다리·소나무 공원·골목) 위에서 자전거 아이콘이 가게를 떠나 굽은 길을 따라 방향을 틀며 달리고, 지나간 길이 주황색으로 칠해진다. 왼쪽 카드의 '분 경과'가 0에서 12로 오르고 경유지(소나무 공원 앞·작은 다리·은행나무 빌라)에 차례로 불이 들어오며, 도착하면 '도착 12분' 배지가 튀어나온다.
프롬프트 전문 보기
/gsap-skills:gsap-plugins MotionPath로 가상의 자전거 반찬 배달 '국그릇 특급'의 배달 경로 화면을 만들어 줘. SVG로 그린 동네 지도(골목·공원·작은 다리) 위에서 자전거 아이콘이 가게에서 출발해 굽은 골목길을 따라 방향을 틀며(autoRotate) 달리고, 지나간 길은 색이 칠해지며, 도착하면 '도착 12분' 배지가 튀어나온다. 움직임 5초 안팎. 창 크기 1440×900(가로). 진행 메모(시험 실행): - 묻지 말고 끝까지 진행해. 결과는 현재 폴더의 index.html 한 파일(HTML·CSS·JS를 모두 안에)로 만든다. - GSAP는 jsdelivr CDN의 3.13.0 dist 파일만 <script src>로 불러온다: https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js 와 같은 폴더의 플러그인 파일(예: ScrollTrigger.min.js, SplitText.min.js, Flip.min.js, MorphSVGPlugin.min.js, MotionPathPlugin.min.js, DrawSVGPlugin.min.js, ScrambleTextPlugin.min.js, CustomEase.min.js). ES 모듈 import, 다른 라이브러리, 웹 글꼴, 이미지 파일·외부 이미지는 쓰지 않는다. 3.14부터 생긴 옵션(MorphSVG의 smooth·curveMode 등)은 3.13.0에 없다. - 그림은 SVG·CSS·도형으로 직접 그린다. 글꼴은 이 장비에 있는 것만 쓴다: 한글 "Noto Sans CJK KR"·"Noto Serif CJK KR", 영문·숫자 "Noto Sans"·"DejaVu Sans" 등. - 화면 글자는 한국어 위주로 쓴다(영어 조금은 괜찮다). 중국어·한자는 쓰지 않는다. 브랜드·제품·사람·숫자는 모두 가상이고, 실존 브랜드나 로고를 흉내 내지 않는다. - 녹화 방식: 시험자가 이 페이지를 본문에 적은 창 크기(CSS px)로 헤드리스 Chrome에서 열고, GSAP가 불리자마자 gsap.globalTimeline을 멈춘 뒤 시간을 1/30초씩 넘기며 프레임을 찍어 영상으로 만든다. 스크롤 페이지는 프레임마다 window.scrollTo로 맨 위에서 맨 아래까지 내리면서 ScrollTrigger.update()도 부른다. 그래서 움직임은 모두 GSAP(트윈·타임라인·repeat·delayedCall·ScrollTrigger)로만 만들고, CSS animation/transition, setTimeout/setInterval, requestAnimationFrame·gsap.ticker 루프, 클릭·마우스로 시작하는 동작, ScrollSmoother·snap·별도 스크롤 컨테이너는 쓰지 않는다. 페이지를 열면 바로 자동으로 시작한다. - 인터넷은 쓰지 않는다(웹 검색·내려받기 없음). 확인하고 싶으면 헤드리스 Chrome으로 이 페이지만 열어 본다(이때 GSAP CDN 파일을 받는 것은 괜찮다). 이 장비에서는 google-chrome --screenshot이 GSAP 움직임을 진행시키지 못해 첫 장면만 찍히므로, 오류 확인은 --dump-dom이나 콘솔 로그로 한다. 확인용 임시 파일은 현재 폴더 안에만 둔다. - 같은 플러그인의 다른 스킬 문서는 이 스킬의 Base directory 옆 폴더(…/skills/gsap-core/SKILL.md, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-performance)에 있으니 필요하면 Read로 읽어도 된다. 다른 플러그인·스킬은 쓰지 않는다. - 끝나면 만든 파일, 쓴 GSAP 기능·플러그인, 움직임 길이(초)를 짧게 알려 줘.
가상의 빨래 날씨 앱 '빨랫줄 예보' 첫 화면(1080×1350, 5.55초): 가운데 큰 아이콘 하나가 웃는 해 → 흰 구름 → 빗방울 떨어지는 비구름 → 다시 해로 모양이 바뀌고(입 모양도 웃음 → 무표정 → 시무룩), 배경색과 '빨래 널기 좋음 / 조금 애매함 / 얼른 걷으세요' 문구, 기온, 빨래 마름 지수(92 → 58 → 14 → 90점)가 함께 바뀐다. 아래 빨랫줄의 옷들은 비가 올 때 세게 펄럭인다.
움직임 영상 보기 · 6.3초 · 무음 · 시험자 화면 녹화

시험자가 헤드리스 Chrome에서 결과 HTML의 GSAP 시간을 1/30초씩 넘기며 찍은 화면 녹화입니다. 스킬이나 모델이 만든 영상이 아닙니다.

run05 · 가상의 빨래 날씨 앱 '빨랫줄 예보' 첫 화면(1080×1350, 5.55초): 가운데 큰 아이콘 하나가 웃는 해 → 흰 구름 → 빗방울 떨어지는 비구름 → 다시 해로 모양이 바뀌고(입 모양도 웃음 → 무표정 → 시무룩), 배경색과 '빨래 널기 좋음 / 조금 애매함 / 얼른 걷으세요' 문구, 기온, 빨래 마름 지수(92 → 58 → 14 → 90점)가 함께 바뀐다. 아래 빨랫줄의 옷들은 비가 올 때 세게 펄럭인다.
프롬프트 전문 보기
/gsap-skills:gsap-plugins MorphSVG로 가상의 빨래 날씨 앱 '빨랫줄 예보'의 첫 화면을 만들어 줘. 가운데 큰 날씨 아이콘 하나가 해 → 구름 → 비 → 다시 해 순서로 모양이 바뀌고(같은 path를 morph), 아이콘에 맞춰 배경색과 '빨래 널기 좋음 / 조금 애매함 / 얼른 걷으세요' 문구가 바뀐다. 5초 안팎. 창 크기 1080×1350(세로). 진행 메모(시험 실행): - 묻지 말고 끝까지 진행해. 결과는 현재 폴더의 index.html 한 파일(HTML·CSS·JS를 모두 안에)로 만든다. - GSAP는 jsdelivr CDN의 3.13.0 dist 파일만 <script src>로 불러온다: https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js 와 같은 폴더의 플러그인 파일(예: ScrollTrigger.min.js, SplitText.min.js, Flip.min.js, MorphSVGPlugin.min.js, MotionPathPlugin.min.js, DrawSVGPlugin.min.js, ScrambleTextPlugin.min.js, CustomEase.min.js). ES 모듈 import, 다른 라이브러리, 웹 글꼴, 이미지 파일·외부 이미지는 쓰지 않는다. 3.14부터 생긴 옵션(MorphSVG의 smooth·curveMode 등)은 3.13.0에 없다. - 그림은 SVG·CSS·도형으로 직접 그린다. 글꼴은 이 장비에 있는 것만 쓴다: 한글 "Noto Sans CJK KR"·"Noto Serif CJK KR", 영문·숫자 "Noto Sans"·"DejaVu Sans" 등. - 화면 글자는 한국어 위주로 쓴다(영어 조금은 괜찮다). 중국어·한자는 쓰지 않는다. 브랜드·제품·사람·숫자는 모두 가상이고, 실존 브랜드나 로고를 흉내 내지 않는다. - 녹화 방식: 시험자가 이 페이지를 본문에 적은 창 크기(CSS px)로 헤드리스 Chrome에서 열고, GSAP가 불리자마자 gsap.globalTimeline을 멈춘 뒤 시간을 1/30초씩 넘기며 프레임을 찍어 영상으로 만든다. 스크롤 페이지는 프레임마다 window.scrollTo로 맨 위에서 맨 아래까지 내리면서 ScrollTrigger.update()도 부른다. 그래서 움직임은 모두 GSAP(트윈·타임라인·repeat·delayedCall·ScrollTrigger)로만 만들고, CSS animation/transition, setTimeout/setInterval, requestAnimationFrame·gsap.ticker 루프, 클릭·마우스로 시작하는 동작, ScrollSmoother·snap·별도 스크롤 컨테이너는 쓰지 않는다. 페이지를 열면 바로 자동으로 시작한다. - 인터넷은 쓰지 않는다(웹 검색·내려받기 없음). 확인하고 싶으면 헤드리스 Chrome으로 이 페이지만 열어 본다(이때 GSAP CDN 파일을 받는 것은 괜찮다). 이 장비에서는 google-chrome --screenshot이 GSAP 움직임을 진행시키지 못해 첫 장면만 찍히므로, 오류 확인은 --dump-dom이나 콘솔 로그로 한다. 확인용 임시 파일은 현재 폴더 안에만 둔다. - 같은 플러그인의 다른 스킬 문서는 이 스킬의 Base directory 옆 폴더(…/skills/gsap-core/SKILL.md, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-performance)에 있으니 필요하면 Read로 읽어도 된다. 다른 플러그인·스킬은 쓰지 않는다. - 끝나면 만든 파일, 쓴 GSAP 기능·플러그인, 움직임 길이(초)를 짧게 알려 줘.
가상의 타일 공방 '모서리 타일' 전시 안내 화면(1080×1350, 4.1초): 동심원 무늬 청록 타일 144장이 가운데부터 나타난 뒤, 가운데에서 바깥으로 물결치듯 한 장씩 뒤집히며(격자 스태거) 뒷면 색이 모여 귤 한 알 픽셀 그림이 된다. 타일 틈이 닫히고 유약 광택이 한 번 지나가며, 아래에 '귤 한 알, 백사십사 장' 제목과 날짜·장소가 올라온다.
움직임 영상 보기 · 4.9초 · 무음 · 시험자 화면 녹화

시험자가 헤드리스 Chrome에서 결과 HTML의 GSAP 시간을 1/30초씩 넘기며 찍은 화면 녹화입니다. 스킬이나 모델이 만든 영상이 아닙니다.

run06 · 가상의 타일 공방 '모서리 타일' 전시 안내 화면(1080×1350, 4.1초): 동심원 무늬 청록 타일 144장이 가운데부터 나타난 뒤, 가운데에서 바깥으로 물결치듯 한 장씩 뒤집히며(격자 스태거) 뒷면 색이 모여 귤 한 알 픽셀 그림이 된다. 타일 틈이 닫히고 유약 광택이 한 번 지나가며, 아래에 '귤 한 알, 백사십사 장' 제목과 날짜·장소가 올라온다.
프롬프트 전문 보기
/gsap-skills:gsap-core 스태거 격자 애니메이션을 만들어 줘. 가상의 타일 공방 '모서리 타일'의 전시 안내 화면이다. 12×12 정사각 타일이 가운데에서 바깥으로 물결치듯(stagger의 grid와 from: 'center') 뒤집히며 색이 바뀌고, 다 뒤집히면 타일들이 귤 하나를 그린 픽셀 그림이 되며, 아래에 전시 제목과 날짜가 나타난다. 4초 안팎. 창 크기 1080×1350(세로). 진행 메모(시험 실행): - 묻지 말고 끝까지 진행해. 결과는 현재 폴더의 index.html 한 파일(HTML·CSS·JS를 모두 안에)로 만든다. - GSAP는 jsdelivr CDN의 3.13.0 dist 파일만 <script src>로 불러온다: https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js 와 같은 폴더의 플러그인 파일(예: ScrollTrigger.min.js, SplitText.min.js, Flip.min.js, MorphSVGPlugin.min.js, MotionPathPlugin.min.js, DrawSVGPlugin.min.js, ScrambleTextPlugin.min.js, CustomEase.min.js). ES 모듈 import, 다른 라이브러리, 웹 글꼴, 이미지 파일·외부 이미지는 쓰지 않는다. 3.14부터 생긴 옵션(MorphSVG의 smooth·curveMode 등)은 3.13.0에 없다. - 그림은 SVG·CSS·도형으로 직접 그린다. 글꼴은 이 장비에 있는 것만 쓴다: 한글 "Noto Sans CJK KR"·"Noto Serif CJK KR", 영문·숫자 "Noto Sans"·"DejaVu Sans" 등. - 화면 글자는 한국어 위주로 쓴다(영어 조금은 괜찮다). 중국어·한자는 쓰지 않는다. 브랜드·제품·사람·숫자는 모두 가상이고, 실존 브랜드나 로고를 흉내 내지 않는다. - 녹화 방식: 시험자가 이 페이지를 본문에 적은 창 크기(CSS px)로 헤드리스 Chrome에서 열고, GSAP가 불리자마자 gsap.globalTimeline을 멈춘 뒤 시간을 1/30초씩 넘기며 프레임을 찍어 영상으로 만든다. 스크롤 페이지는 프레임마다 window.scrollTo로 맨 위에서 맨 아래까지 내리면서 ScrollTrigger.update()도 부른다. 그래서 움직임은 모두 GSAP(트윈·타임라인·repeat·delayedCall·ScrollTrigger)로만 만들고, CSS animation/transition, setTimeout/setInterval, requestAnimationFrame·gsap.ticker 루프, 클릭·마우스로 시작하는 동작, ScrollSmoother·snap·별도 스크롤 컨테이너는 쓰지 않는다. 페이지를 열면 바로 자동으로 시작한다. - 인터넷은 쓰지 않는다(웹 검색·내려받기 없음). 확인하고 싶으면 헤드리스 Chrome으로 이 페이지만 열어 본다(이때 GSAP CDN 파일을 받는 것은 괜찮다). 이 장비에서는 google-chrome --screenshot이 GSAP 움직임을 진행시키지 못해 첫 장면만 찍히므로, 오류 확인은 --dump-dom이나 콘솔 로그로 한다. 확인용 임시 파일은 현재 폴더 안에만 둔다. - 같은 플러그인의 다른 스킬 문서는 이 스킬의 Base directory 옆 폴더(…/skills/gsap-core/SKILL.md, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-performance)에 있으니 필요하면 Read로 읽어도 된다. 다른 플러그인·스킬은 쓰지 않는다. - 끝나면 만든 파일, 쓴 GSAP 기능·플러그인, 움직임 길이(초)를 짧게 알려 줘.
가상의 귤 농장 직거래 '귤껍질 우체국' 스크롤 이야기(1080×1920): 봉투 무늬 귤과 제목이 나타나는 첫 화면 → 고정된 무대에서 스크롤에 맞춰 귤나무가 자라 열매를 맺고, 사다리와 바구니로 귤을 따고(오늘 딴 귤 숫자가 오름), 선별대에서 합격 표시를 붙이고, 상자를 포장해 라벨을 붙이는 4장면이 바뀌며 위쪽 진행 막대가 찬다 → 지도 구간에서 귤 상자 트럭이 구불구불한 길을 따라 방향을 틀며 달리고(밤에는 전조등), 오후 2시 출발 → 다음 날 아침 도착 자막이 바뀐다 → '나무에서 문 앞까지 2일', '올해 보낸 상자 3,280개'가 화면에 들어오면 0부터 올라간다.
움직임 영상 보기 · 8.0초 · 무음 · 시험자 화면 녹화

시험자가 헤드리스 Chrome에서 결과 HTML의 GSAP 시간을 1/30초씩 넘기며 찍은 화면 녹화입니다. 스킬이나 모델이 만든 영상이 아닙니다.

run10 · 가상의 귤 농장 직거래 '귤껍질 우체국' 스크롤 이야기(1080×1920): 봉투 무늬 귤과 제목이 나타나는 첫 화면 → 고정된 무대에서 스크롤에 맞춰 귤나무가 자라 열매를 맺고, 사다리와 바구니로 귤을 따고(오늘 딴 귤 숫자가 오름), 선별대에서 합격 표시를 붙이고, 상자를 포장해 라벨을 붙이는 4장면이 바뀌며 위쪽 진행 막대가 찬다 → 지도 구간에서 귤 상자 트럭이 구불구불한 길을 따라 방향을 틀며 달리고(밤에는 전조등), 오후 2시 출발 → 다음 날 아침 도착 자막이 바뀐다 → '나무에서 문 앞까지 2일', '올해 보낸 상자 3,280개'가 화면에 들어오면 0부터 올라간다.
프롬프트 전문 보기
/gsap-skills:gsap-scrolltrigger 가상의 귤 농장 직거래 '귤껍질 우체국' 소개 페이지를 스크롤 이야기로 만들어 줘. 요구 사항: 1) 첫 화면: 큰 제목과 '아래로 내려 보세요' 안내. 2) 고정(pin)된 무대 하나에서 스크롤에 맞춰(scrub) 귤나무 → 귤 따기 → 고르기 → 상자 포장 4장면이 바뀌고, 위쪽 진행 막대가 차오른다. 3) 이어지는 지도 구간: 귤 상자를 실은 트럭 아이콘이 SVG 길을 따라 스크롤한 만큼 이동한다(MotionPath를 scrub 타임라인에 넣기). 4) 마지막 구간: '나무에서 문 앞까지 2일', '올해 보낸 상자 3,280개' 숫자가 화면에 들어오면 카운트업. 5) 모든 그림은 SVG·CSS로 직접 그린다. 창 크기 1080×1920(세로). 진행 메모(시험 실행): - 묻지 말고 끝까지 진행해. 결과는 현재 폴더의 index.html 한 파일(HTML·CSS·JS를 모두 안에)로 만든다. - GSAP는 jsdelivr CDN의 3.13.0 dist 파일만 <script src>로 불러온다: https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js 와 같은 폴더의 플러그인 파일(예: ScrollTrigger.min.js, SplitText.min.js, Flip.min.js, MorphSVGPlugin.min.js, MotionPathPlugin.min.js, DrawSVGPlugin.min.js, ScrambleTextPlugin.min.js, CustomEase.min.js). ES 모듈 import, 다른 라이브러리, 웹 글꼴, 이미지 파일·외부 이미지는 쓰지 않는다. 3.14부터 생긴 옵션(MorphSVG의 smooth·curveMode 등)은 3.13.0에 없다. - 그림은 SVG·CSS·도형으로 직접 그린다. 글꼴은 이 장비에 있는 것만 쓴다: 한글 "Noto Sans CJK KR"·"Noto Serif CJK KR", 영문·숫자 "Noto Sans"·"DejaVu Sans" 등. - 화면 글자는 한국어 위주로 쓴다(영어 조금은 괜찮다). 중국어·한자는 쓰지 않는다. 브랜드·제품·사람·숫자는 모두 가상이고, 실존 브랜드나 로고를 흉내 내지 않는다. - 녹화 방식: 시험자가 이 페이지를 본문에 적은 창 크기(CSS px)로 헤드리스 Chrome에서 열고, GSAP가 불리자마자 gsap.globalTimeline을 멈춘 뒤 시간을 1/30초씩 넘기며 프레임을 찍어 영상으로 만든다. 스크롤 페이지는 프레임마다 window.scrollTo로 맨 위에서 맨 아래까지 내리면서 ScrollTrigger.update()도 부른다. 그래서 움직임은 모두 GSAP(트윈·타임라인·repeat·delayedCall·ScrollTrigger)로만 만들고, CSS animation/transition, setTimeout/setInterval, requestAnimationFrame·gsap.ticker 루프, 클릭·마우스로 시작하는 동작, ScrollSmoother·snap·별도 스크롤 컨테이너는 쓰지 않는다. 페이지를 열면 바로 자동으로 시작한다. - 인터넷은 쓰지 않는다(웹 검색·내려받기 없음). 확인하고 싶으면 헤드리스 Chrome으로 이 페이지만 열어 본다(이때 GSAP CDN 파일을 받는 것은 괜찮다). 이 장비에서는 google-chrome --screenshot이 GSAP 움직임을 진행시키지 못해 첫 장면만 찍히므로, 오류 확인은 --dump-dom이나 콘솔 로그로 한다. 확인용 임시 파일은 현재 폴더 안에만 둔다. - 같은 플러그인의 다른 스킬 문서는 이 스킬의 Base directory 옆 폴더(…/skills/gsap-core/SKILL.md, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-performance)에 있으니 필요하면 Read로 읽어도 된다. 다른 플러그인·스킬은 쓰지 않는다. - 끝나면 만든 파일, 쓴 GSAP 기능·플러그인, 움직임 길이(초)를 짧게 알려 줘.
가상의 동네 벼룩시장 '양말 짝꿍 장터' 포스터 첫 화면(1080×1350, 움직임 4.2초): 배경 원이 튀어나오고 빨랫줄이 그려진 뒤 양말 세 짝이 떨어져 흔들리며 매달리고, 제목 여섯 글자가 한 글자씩 아래에서 튀어 올라 찌그러졌다 자리 잡는다. 이어서 문구와 날짜·시간·장소 줄이 단어 단위로 나타나고, 마지막에 '입장 무료' 도장이 찍히며 포스터가 살짝 흔들린다.
움직임 영상 보기 · 5.0초 · 무음 · 시험자 화면 녹화

시험자가 헤드리스 Chrome에서 결과 HTML의 GSAP 시간을 1/30초씩 넘기며 찍은 화면 녹화입니다. 스킬이나 모델이 만든 영상이 아닙니다.

run01 · 가상의 동네 벼룩시장 '양말 짝꿍 장터' 포스터 첫 화면(1080×1350, 움직임 4.2초): 배경 원이 튀어나오고 빨랫줄이 그려진 뒤 양말 세 짝이 떨어져 흔들리며 매달리고, 제목 여섯 글자가 한 글자씩 아래에서 튀어 올라 찌그러졌다 자리 잡는다. 이어서 문구와 날짜·시간·장소 줄이 단어 단위로 나타나고, 마지막에 '입장 무료' 도장이 찍히며 포스터가 살짝 흔들린다.
프롬프트 전문 보기
/gsap-skills:gsap-plugins SplitText로 가상의 동네 벼룩시장 '양말 짝꿍 장터'의 포스터 같은 첫 화면을 만들어 줘. 큰 제목이 한 글자씩 아래에서 튀어 오르고, 이어서 날짜·장소 줄이 단어 단위로 차례로 나타나는 4초 안팎의 등장 애니메이션. 창 크기 1080×1350(세로). 진행 메모(시험 실행): - 묻지 말고 끝까지 진행해. 결과는 현재 폴더의 index.html 한 파일(HTML·CSS·JS를 모두 안에)로 만든다. - GSAP는 jsdelivr CDN의 3.13.0 dist 파일만 <script src>로 불러온다: https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js 와 같은 폴더의 플러그인 파일(예: ScrollTrigger.min.js, SplitText.min.js, Flip.min.js, MorphSVGPlugin.min.js, MotionPathPlugin.min.js, DrawSVGPlugin.min.js, ScrambleTextPlugin.min.js, CustomEase.min.js). ES 모듈 import, 다른 라이브러리, 웹 글꼴, 이미지 파일·외부 이미지는 쓰지 않는다. 3.14부터 생긴 옵션(MorphSVG의 smooth·curveMode 등)은 3.13.0에 없다. - 그림은 SVG·CSS·도형으로 직접 그린다. 글꼴은 이 장비에 있는 것만 쓴다: 한글 "Noto Sans CJK KR"·"Noto Serif CJK KR", 영문·숫자 "Noto Sans"·"DejaVu Sans" 등. - 화면 글자는 한국어 위주로 쓴다(영어 조금은 괜찮다). 중국어·한자는 쓰지 않는다. 브랜드·제품·사람·숫자는 모두 가상이고, 실존 브랜드나 로고를 흉내 내지 않는다. - 녹화 방식: 시험자가 이 페이지를 본문에 적은 창 크기(CSS px)로 헤드리스 Chrome에서 열고, GSAP가 불리자마자 gsap.globalTimeline을 멈춘 뒤 시간을 1/30초씩 넘기며 프레임을 찍어 영상으로 만든다. 스크롤 페이지는 프레임마다 window.scrollTo로 맨 위에서 맨 아래까지 내리면서 ScrollTrigger.update()도 부른다. 그래서 움직임은 모두 GSAP(트윈·타임라인·repeat·delayedCall·ScrollTrigger)로만 만들고, CSS animation/transition, setTimeout/setInterval, requestAnimationFrame·gsap.ticker 루프, 클릭·마우스로 시작하는 동작, ScrollSmoother·snap·별도 스크롤 컨테이너는 쓰지 않는다. 페이지를 열면 바로 자동으로 시작한다. - 인터넷은 쓰지 않는다(웹 검색·내려받기 없음). 확인하고 싶으면 헤드리스 Chrome으로 이 페이지만 열어 본다(이때 GSAP CDN 파일을 받는 것은 괜찮다). 이 장비에서는 google-chrome --screenshot이 GSAP 움직임을 진행시키지 못해 첫 장면만 찍히므로, 오류 확인은 --dump-dom이나 콘솔 로그로 한다. 확인용 임시 파일은 현재 폴더 안에만 둔다. - 같은 플러그인의 다른 스킬 문서는 이 스킬의 Base directory 옆 폴더(…/skills/gsap-core/SKILL.md, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-performance)에 있으니 필요하면 Read로 읽어도 된다. 다른 플러그인·스킬은 쓰지 않는다. - 끝나면 만든 파일, 쓴 GSAP 기능·플러그인, 움직임 길이(초)를 짧게 알려 줘.
가상의 두부 가게 '두부 시계탑' 스크롤 페이지(1080×1350): 두부 블록이 쌓여 시계탑이 되는 첫 화면 뒤, 화면에 고정된 무대에서 스크롤에 맞춰 불리기 → 갈기 → 끓이기 → 굳히기 4단계 그림과 설명 카드가 바뀌고, 오른쪽 위 시계는 오후 9시에서 낮 12시로, 하늘은 밤에서 낮으로 바뀐다(맷돌 손잡이가 돌고 온도계가 20°에서 98°로 오름). 끝 화면은 '오늘의 첫 두부, 지금 나왔습니다'와 숫자 카드 3장.
움직임 영상 보기 · 8.0초 · 무음 · 시험자 화면 녹화

시험자가 헤드리스 Chrome에서 결과 HTML의 GSAP 시간을 1/30초씩 넘기며 찍은 화면 녹화입니다. 스킬이나 모델이 만든 영상이 아닙니다.

run02 · 가상의 두부 가게 '두부 시계탑' 스크롤 페이지(1080×1350): 두부 블록이 쌓여 시계탑이 되는 첫 화면 뒤, 화면에 고정된 무대에서 스크롤에 맞춰 불리기 → 갈기 → 끓이기 → 굳히기 4단계 그림과 설명 카드가 바뀌고, 오른쪽 위 시계는 오후 9시에서 낮 12시로, 하늘은 밤에서 낮으로 바뀐다(맷돌 손잡이가 돌고 온도계가 20°에서 98°로 오름). 끝 화면은 '오늘의 첫 두부, 지금 나왔습니다'와 숫자 카드 3장.
프롬프트 전문 보기
/gsap-skills:gsap-scrolltrigger 가상의 두부 가게 '두부 시계탑'이 콩 한 알이 두부가 되는 과정을 보여 주는 스크롤 페이지를 만들어 줘. 첫 화면 다음의 무대 하나를 화면에 고정(pin)하고, 스크롤에 맞춰(scrub) 불리기 → 갈기 → 끓이기 → 굳히기 4단계 그림과 문구가 차례로 바뀌게. 창 크기 1080×1350(세로). 진행 메모(시험 실행): - 묻지 말고 끝까지 진행해. 결과는 현재 폴더의 index.html 한 파일(HTML·CSS·JS를 모두 안에)로 만든다. - GSAP는 jsdelivr CDN의 3.13.0 dist 파일만 <script src>로 불러온다: https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js 와 같은 폴더의 플러그인 파일(예: ScrollTrigger.min.js, SplitText.min.js, Flip.min.js, MorphSVGPlugin.min.js, MotionPathPlugin.min.js, DrawSVGPlugin.min.js, ScrambleTextPlugin.min.js, CustomEase.min.js). ES 모듈 import, 다른 라이브러리, 웹 글꼴, 이미지 파일·외부 이미지는 쓰지 않는다. 3.14부터 생긴 옵션(MorphSVG의 smooth·curveMode 등)은 3.13.0에 없다. - 그림은 SVG·CSS·도형으로 직접 그린다. 글꼴은 이 장비에 있는 것만 쓴다: 한글 "Noto Sans CJK KR"·"Noto Serif CJK KR", 영문·숫자 "Noto Sans"·"DejaVu Sans" 등. - 화면 글자는 한국어 위주로 쓴다(영어 조금은 괜찮다). 중국어·한자는 쓰지 않는다. 브랜드·제품·사람·숫자는 모두 가상이고, 실존 브랜드나 로고를 흉내 내지 않는다. - 녹화 방식: 시험자가 이 페이지를 본문에 적은 창 크기(CSS px)로 헤드리스 Chrome에서 열고, GSAP가 불리자마자 gsap.globalTimeline을 멈춘 뒤 시간을 1/30초씩 넘기며 프레임을 찍어 영상으로 만든다. 스크롤 페이지는 프레임마다 window.scrollTo로 맨 위에서 맨 아래까지 내리면서 ScrollTrigger.update()도 부른다. 그래서 움직임은 모두 GSAP(트윈·타임라인·repeat·delayedCall·ScrollTrigger)로만 만들고, CSS animation/transition, setTimeout/setInterval, requestAnimationFrame·gsap.ticker 루프, 클릭·마우스로 시작하는 동작, ScrollSmoother·snap·별도 스크롤 컨테이너는 쓰지 않는다. 페이지를 열면 바로 자동으로 시작한다. - 인터넷은 쓰지 않는다(웹 검색·내려받기 없음). 확인하고 싶으면 헤드리스 Chrome으로 이 페이지만 열어 본다(이때 GSAP CDN 파일을 받는 것은 괜찮다). 이 장비에서는 google-chrome --screenshot이 GSAP 움직임을 진행시키지 못해 첫 장면만 찍히므로, 오류 확인은 --dump-dom이나 콘솔 로그로 한다. 확인용 임시 파일은 현재 폴더 안에만 둔다. - 같은 플러그인의 다른 스킬 문서는 이 스킬의 Base directory 옆 폴더(…/skills/gsap-core/SKILL.md, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-performance)에 있으니 필요하면 Read로 읽어도 된다. 다른 플러그인·스킬은 쓰지 않는다. - 끝나면 만든 파일, 쓴 GSAP 기능·플러그인, 움직임 길이(초)를 짧게 알려 줘.
가상의 식물 대여소 '화분 대출 창구' 카드 9장 레이아웃 전환(1440×900, 6.0초): SVG 화분 카드가 3×3 격자로 나타난 뒤 한 줄 목록으로 바뀌고, '몬스테라' 줄에 테두리가 켜진 다음 그 카드가 짙은 초록 큰 상세 카드로 펼쳐지며 나머지 8장은 오른쪽 2열 썸네일로 줄어든다. 전환마다 카드가 제자리에서 미끄러지듯 이어지고, 위쪽 '격자/목록/상세' 탭 표시도 옆 칸으로 옮겨 간다. 상세 카드에는 햇빛·물주기·난이도 막대와 '대출 신청하기' 버튼.
움직임 영상 보기 · 6.8초 · 무음 · 시험자 화면 녹화

시험자가 헤드리스 Chrome에서 결과 HTML의 GSAP 시간을 1/30초씩 넘기며 찍은 화면 녹화입니다. 스킬이나 모델이 만든 영상이 아닙니다.

run04 · 가상의 식물 대여소 '화분 대출 창구' 카드 9장 레이아웃 전환(1440×900, 6.0초): SVG 화분 카드가 3×3 격자로 나타난 뒤 한 줄 목록으로 바뀌고, '몬스테라' 줄에 테두리가 켜진 다음 그 카드가 짙은 초록 큰 상세 카드로 펼쳐지며 나머지 8장은 오른쪽 2열 썸네일로 줄어든다. 전환마다 카드가 제자리에서 미끄러지듯 이어지고, 위쪽 '격자/목록/상세' 탭 표시도 옆 칸으로 옮겨 간다. 상세 카드에는 햇빛·물주기·난이도 막대와 '대출 신청하기' 버튼.
프롬프트 전문 보기
/gsap-skills:gsap-plugins Flip으로 가상의 식물 대여소 '화분 대출 창구'의 화분 카드 9장이 레이아웃을 바꾸는 6초 데모를 만들어 줘. 3×3 격자 → 한 줄 목록 → 카드 한 장이 크게 펼쳐지는 상세 보기 순서로 자동 전환되고, 전환마다 Flip.getState()와 Flip.from()으로 자연스럽게 이어진다. 화분 그림은 SVG 도형으로. 창 크기 1440×900(가로). 진행 메모(시험 실행): - 묻지 말고 끝까지 진행해. 결과는 현재 폴더의 index.html 한 파일(HTML·CSS·JS를 모두 안에)로 만든다. - GSAP는 jsdelivr CDN의 3.13.0 dist 파일만 <script src>로 불러온다: https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js 와 같은 폴더의 플러그인 파일(예: ScrollTrigger.min.js, SplitText.min.js, Flip.min.js, MorphSVGPlugin.min.js, MotionPathPlugin.min.js, DrawSVGPlugin.min.js, ScrambleTextPlugin.min.js, CustomEase.min.js). ES 모듈 import, 다른 라이브러리, 웹 글꼴, 이미지 파일·외부 이미지는 쓰지 않는다. 3.14부터 생긴 옵션(MorphSVG의 smooth·curveMode 등)은 3.13.0에 없다. - 그림은 SVG·CSS·도형으로 직접 그린다. 글꼴은 이 장비에 있는 것만 쓴다: 한글 "Noto Sans CJK KR"·"Noto Serif CJK KR", 영문·숫자 "Noto Sans"·"DejaVu Sans" 등. - 화면 글자는 한국어 위주로 쓴다(영어 조금은 괜찮다). 중국어·한자는 쓰지 않는다. 브랜드·제품·사람·숫자는 모두 가상이고, 실존 브랜드나 로고를 흉내 내지 않는다. - 녹화 방식: 시험자가 이 페이지를 본문에 적은 창 크기(CSS px)로 헤드리스 Chrome에서 열고, GSAP가 불리자마자 gsap.globalTimeline을 멈춘 뒤 시간을 1/30초씩 넘기며 프레임을 찍어 영상으로 만든다. 스크롤 페이지는 프레임마다 window.scrollTo로 맨 위에서 맨 아래까지 내리면서 ScrollTrigger.update()도 부른다. 그래서 움직임은 모두 GSAP(트윈·타임라인·repeat·delayedCall·ScrollTrigger)로만 만들고, CSS animation/transition, setTimeout/setInterval, requestAnimationFrame·gsap.ticker 루프, 클릭·마우스로 시작하는 동작, ScrollSmoother·snap·별도 스크롤 컨테이너는 쓰지 않는다. 페이지를 열면 바로 자동으로 시작한다. - 인터넷은 쓰지 않는다(웹 검색·내려받기 없음). 확인하고 싶으면 헤드리스 Chrome으로 이 페이지만 열어 본다(이때 GSAP CDN 파일을 받는 것은 괜찮다). 이 장비에서는 google-chrome --screenshot이 GSAP 움직임을 진행시키지 못해 첫 장면만 찍히므로, 오류 확인은 --dump-dom이나 콘솔 로그로 한다. 확인용 임시 파일은 현재 폴더 안에만 둔다. - 같은 플러그인의 다른 스킬 문서는 이 스킬의 Base directory 옆 폴더(…/skills/gsap-core/SKILL.md, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-performance)에 있으니 필요하면 Read로 읽어도 된다. 다른 플러그인·스킬은 쓰지 않는다. - 끝나면 만든 파일, 쓴 GSAP 기능·플러그인, 움직임 길이(초)를 짧게 알려 줘.
입력 CSV(가상의 동네 빵집 '식빵 귀 상회' 1년 숫자)로 만든 결산 인포그래픽(1440×900, 4.8초): 큰 숫자 3개가 0에서 17,800개·412명·3,065봉까지 천 단위 쉼표를 붙여 올라가고, 월별 막대 12개가 1월부터 차례로 자라며(가장 높은 12월은 진한 색과 '가장 바빴던 달 · 12월 1,795개' 표시), 빵 종류 도넛이 조각별로 그려져 38·22·17·14·9%로 채워진다.
움직임 영상 보기 · 5.6초 · 무음 · 시험자 화면 녹화

시험자가 헤드리스 Chrome에서 결과 HTML의 GSAP 시간을 1/30초씩 넘기며 찍은 화면 녹화입니다. 스킬이나 모델이 만든 영상이 아닙니다.

run07 · 입력 CSV(가상의 동네 빵집 '식빵 귀 상회' 1년 숫자)로 만든 결산 인포그래픽(1440×900, 4.8초): 큰 숫자 3개가 0에서 17,800개·412명·3,065봉까지 천 단위 쉼표를 붙여 올라가고, 월별 막대 12개가 1월부터 차례로 자라며(가장 높은 12월은 진한 색과 '가장 바빴던 달 · 12월 1,795개' 표시), 빵 종류 도넛이 조각별로 그려져 38·22·17·14·9%로 채워진다.
프롬프트 전문 보기
/gsap-skills:gsap-utils 현재 폴더의 식빵귀상회_결산.csv(가상의 동네 빵집 '식빵 귀 상회'의 1년 숫자)를 읽어서 결산 인포그래픽 한 화면을 만들어 줘. 큰 숫자 3개는 0부터 카운트업(gsap.utils로 정수·천 단위 쉼표 표시)하고, 월별 막대 12개는 차례로 자라고, 빵 종류 비율은 도넛 차트가 그려지며 채워진다. 데이터는 HTML 안에 넣는다(페이지에서 파일을 불러오지 말 것). 5초 안팎. 창 크기 1440×900(가로). 진행 메모(시험 실행): - 묻지 말고 끝까지 진행해. 결과는 현재 폴더의 index.html 한 파일(HTML·CSS·JS를 모두 안에)로 만든다. - GSAP는 jsdelivr CDN의 3.13.0 dist 파일만 <script src>로 불러온다: https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js 와 같은 폴더의 플러그인 파일(예: ScrollTrigger.min.js, SplitText.min.js, Flip.min.js, MorphSVGPlugin.min.js, MotionPathPlugin.min.js, DrawSVGPlugin.min.js, ScrambleTextPlugin.min.js, CustomEase.min.js). ES 모듈 import, 다른 라이브러리, 웹 글꼴, 이미지 파일·외부 이미지는 쓰지 않는다. 3.14부터 생긴 옵션(MorphSVG의 smooth·curveMode 등)은 3.13.0에 없다. - 그림은 SVG·CSS·도형으로 직접 그린다. 글꼴은 이 장비에 있는 것만 쓴다: 한글 "Noto Sans CJK KR"·"Noto Serif CJK KR", 영문·숫자 "Noto Sans"·"DejaVu Sans" 등. - 화면 글자는 한국어 위주로 쓴다(영어 조금은 괜찮다). 중국어·한자는 쓰지 않는다. 브랜드·제품·사람·숫자는 모두 가상이고, 실존 브랜드나 로고를 흉내 내지 않는다. - 녹화 방식: 시험자가 이 페이지를 본문에 적은 창 크기(CSS px)로 헤드리스 Chrome에서 열고, GSAP가 불리자마자 gsap.globalTimeline을 멈춘 뒤 시간을 1/30초씩 넘기며 프레임을 찍어 영상으로 만든다. 스크롤 페이지는 프레임마다 window.scrollTo로 맨 위에서 맨 아래까지 내리면서 ScrollTrigger.update()도 부른다. 그래서 움직임은 모두 GSAP(트윈·타임라인·repeat·delayedCall·ScrollTrigger)로만 만들고, CSS animation/transition, setTimeout/setInterval, requestAnimationFrame·gsap.ticker 루프, 클릭·마우스로 시작하는 동작, ScrollSmoother·snap·별도 스크롤 컨테이너는 쓰지 않는다. 페이지를 열면 바로 자동으로 시작한다. - 인터넷은 쓰지 않는다(웹 검색·내려받기 없음). 확인하고 싶으면 헤드리스 Chrome으로 이 페이지만 열어 본다(이때 GSAP CDN 파일을 받는 것은 괜찮다). 이 장비에서는 google-chrome --screenshot이 GSAP 움직임을 진행시키지 못해 첫 장면만 찍히므로, 오류 확인은 --dump-dom이나 콘솔 로그로 한다. 확인용 임시 파일은 현재 폴더 안에만 둔다. - 같은 플러그인의 다른 스킬 문서는 이 스킬의 Base directory 옆 폴더(…/skills/gsap-core/SKILL.md, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-performance)에 있으니 필요하면 Read로 읽어도 된다. 다른 플러그인·스킬은 쓰지 않는다. - 끝나면 만든 파일, 쓴 GSAP 기능·플러그인, 움직임 길이(초)를 짧게 알려 줘.
가상의 '짝 잃은 장갑 박물관' 전시 소개 페이지(1440×900): 빨랫줄이 그려지고 장갑 네 짝이 튕기며 매달린 뒤 제목이 한 글자씩 올라오는 첫 화면, 이어서 화면에 고정된 구간에서 세로 스크롤에 맞춰 입구와 전시실 5칸(빨간 털실 벙어리장갑·갈색 가죽 운전 장갑·노란 고무장갑·하늘색 아기 손모아장갑·초록 오븐 장갑)이 가로로 지나가고, 각 방의 장갑과 사연 글이 그 칸이 들어올 때 차례로 나타난다. 끝에서는 두 장갑이 다가가 하트가 뜨고 '언젠가 다시 짝이 되기를'.
움직임 영상 보기 · 8.0초 · 무음 · 시험자 화면 녹화

시험자가 헤드리스 Chrome에서 결과 HTML의 GSAP 시간을 1/30초씩 넘기며 찍은 화면 녹화입니다. 스킬이나 모델이 만든 영상이 아닙니다.

run08 · 가상의 '짝 잃은 장갑 박물관' 전시 소개 페이지(1440×900): 빨랫줄이 그려지고 장갑 네 짝이 튕기며 매달린 뒤 제목이 한 글자씩 올라오는 첫 화면, 이어서 화면에 고정된 구간에서 세로 스크롤에 맞춰 입구와 전시실 5칸(빨간 털실 벙어리장갑·갈색 가죽 운전 장갑·노란 고무장갑·하늘색 아기 손모아장갑·초록 오븐 장갑)이 가로로 지나가고, 각 방의 장갑과 사연 글이 그 칸이 들어올 때 차례로 나타난다. 끝에서는 두 장갑이 다가가 하트가 뜨고 '언젠가 다시 짝이 되기를'.
프롬프트 전문 보기
/gsap-skills:gsap-scrolltrigger 가상의 '짝 잃은 장갑 박물관' 전시 소개 페이지를 만들어 줘. 첫 화면 다음 구간을 고정하고, 세로로 스크롤하면 전시실 5칸이 가로로 지나가는 가짜 가로 스크롤(containerAnimation, ease: 'none')로 만든다. 각 전시실 안의 장갑 그림과 설명은 그 칸이 화면에 들어올 때 containerAnimation 기준 ScrollTrigger로 등장한다. 창 크기 1440×900(가로). 진행 메모(시험 실행): - 묻지 말고 끝까지 진행해. 결과는 현재 폴더의 index.html 한 파일(HTML·CSS·JS를 모두 안에)로 만든다. - GSAP는 jsdelivr CDN의 3.13.0 dist 파일만 <script src>로 불러온다: https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js 와 같은 폴더의 플러그인 파일(예: ScrollTrigger.min.js, SplitText.min.js, Flip.min.js, MorphSVGPlugin.min.js, MotionPathPlugin.min.js, DrawSVGPlugin.min.js, ScrambleTextPlugin.min.js, CustomEase.min.js). ES 모듈 import, 다른 라이브러리, 웹 글꼴, 이미지 파일·외부 이미지는 쓰지 않는다. 3.14부터 생긴 옵션(MorphSVG의 smooth·curveMode 등)은 3.13.0에 없다. - 그림은 SVG·CSS·도형으로 직접 그린다. 글꼴은 이 장비에 있는 것만 쓴다: 한글 "Noto Sans CJK KR"·"Noto Serif CJK KR", 영문·숫자 "Noto Sans"·"DejaVu Sans" 등. - 화면 글자는 한국어 위주로 쓴다(영어 조금은 괜찮다). 중국어·한자는 쓰지 않는다. 브랜드·제품·사람·숫자는 모두 가상이고, 실존 브랜드나 로고를 흉내 내지 않는다. - 녹화 방식: 시험자가 이 페이지를 본문에 적은 창 크기(CSS px)로 헤드리스 Chrome에서 열고, GSAP가 불리자마자 gsap.globalTimeline을 멈춘 뒤 시간을 1/30초씩 넘기며 프레임을 찍어 영상으로 만든다. 스크롤 페이지는 프레임마다 window.scrollTo로 맨 위에서 맨 아래까지 내리면서 ScrollTrigger.update()도 부른다. 그래서 움직임은 모두 GSAP(트윈·타임라인·repeat·delayedCall·ScrollTrigger)로만 만들고, CSS animation/transition, setTimeout/setInterval, requestAnimationFrame·gsap.ticker 루프, 클릭·마우스로 시작하는 동작, ScrollSmoother·snap·별도 스크롤 컨테이너는 쓰지 않는다. 페이지를 열면 바로 자동으로 시작한다. - 인터넷은 쓰지 않는다(웹 검색·내려받기 없음). 확인하고 싶으면 헤드리스 Chrome으로 이 페이지만 열어 본다(이때 GSAP CDN 파일을 받는 것은 괜찮다). 이 장비에서는 google-chrome --screenshot이 GSAP 움직임을 진행시키지 못해 첫 장면만 찍히므로, 오류 확인은 --dump-dom이나 콘솔 로그로 한다. 확인용 임시 파일은 현재 폴더 안에만 둔다. - 같은 플러그인의 다른 스킬 문서는 이 스킬의 Base directory 옆 폴더(…/skills/gsap-core/SKILL.md, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-performance)에 있으니 필요하면 Read로 읽어도 된다. 다른 플러그인·스킬은 쓰지 않는다. - 끝나면 만든 파일, 쓴 GSAP 기능·플러그인, 움직임 길이(초)를 짧게 알려 줘.
가상의 물 마시기 앱 '컵 세는 거북이' 온보딩 소개(1080×1920, 6.76초): 휴대폰 틀 안에서 거북이 캐릭터 '토토'가 인사하는 화면 → 컵 6개가 차례로 채워지며 0잔에서 6잔(0~1,200ml)으로 올라가고 '목표 달성!' 배지 → 알림 토글 두 개가 켜지고 알림 시각 6개와 알림 배너가 내려오는 화면으로 넘어간다. 휴대폰 위 장면 번호가 1/3 → 2/3 → 3/3으로 바뀐다. 마스터 타임라인 하나에 장면별 하위 타임라인과 라벨(intro·greet·cups·alarm·end)을 넣었다.
움직임 영상 보기 · 7.6초 · 무음 · 시험자 화면 녹화

시험자가 헤드리스 Chrome에서 결과 HTML의 GSAP 시간을 1/30초씩 넘기며 찍은 화면 녹화입니다. 스킬이나 모델이 만든 영상이 아닙니다.

run09 · 가상의 물 마시기 앱 '컵 세는 거북이' 온보딩 소개(1080×1920, 6.76초): 휴대폰 틀 안에서 거북이 캐릭터 '토토'가 인사하는 화면 → 컵 6개가 차례로 채워지며 0잔에서 6잔(0~1,200ml)으로 올라가고 '목표 달성!' 배지 → 알림 토글 두 개가 켜지고 알림 시각 6개와 알림 배너가 내려오는 화면으로 넘어간다. 휴대폰 위 장면 번호가 1/3 → 2/3 → 3/3으로 바뀐다. 마스터 타임라인 하나에 장면별 하위 타임라인과 라벨(intro·greet·cups·alarm·end)을 넣었다.
프롬프트 전문 보기
/gsap-skills:gsap-timeline 가상의 물 마시기 앱 '컵 세는 거북이'의 온보딩 소개 영상 같은 페이지를 만들어 줘. 요구 사항: 1) 화면 가운데 휴대폰 틀(SVG·CSS) 안에서 화면 3장이 차례로 바뀐다: 거북이 캐릭터 인사 → 오늘 마신 컵 수(0잔에서 6잔까지 채우기) → 알림 설정 토글이 켜짐. 2) 마스터 타임라인 하나에 장면별 하위 타임라인을 넣고 addLabel로 장면 이름을 붙인다. 위치 매개변수(<, -=0.2 등)로 장면을 겹쳐 잇는다. 3) 휴대폰 밖 위쪽에 장면 번호(1/3, 2/3, 3/3)가 장면에 맞춰 바뀐다. 4) 타임라인 defaults로 기본 길이·이징을 정한다. 5) 전체 7초 안쪽, 마지막 장면에서 멈춘다. 창 크기 1080×1920(세로). 진행 메모(시험 실행): - 묻지 말고 끝까지 진행해. 결과는 현재 폴더의 index.html 한 파일(HTML·CSS·JS를 모두 안에)로 만든다. - GSAP는 jsdelivr CDN의 3.13.0 dist 파일만 <script src>로 불러온다: https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js 와 같은 폴더의 플러그인 파일(예: ScrollTrigger.min.js, SplitText.min.js, Flip.min.js, MorphSVGPlugin.min.js, MotionPathPlugin.min.js, DrawSVGPlugin.min.js, ScrambleTextPlugin.min.js, CustomEase.min.js). ES 모듈 import, 다른 라이브러리, 웹 글꼴, 이미지 파일·외부 이미지는 쓰지 않는다. 3.14부터 생긴 옵션(MorphSVG의 smooth·curveMode 등)은 3.13.0에 없다. - 그림은 SVG·CSS·도형으로 직접 그린다. 글꼴은 이 장비에 있는 것만 쓴다: 한글 "Noto Sans CJK KR"·"Noto Serif CJK KR", 영문·숫자 "Noto Sans"·"DejaVu Sans" 등. - 화면 글자는 한국어 위주로 쓴다(영어 조금은 괜찮다). 중국어·한자는 쓰지 않는다. 브랜드·제품·사람·숫자는 모두 가상이고, 실존 브랜드나 로고를 흉내 내지 않는다. - 녹화 방식: 시험자가 이 페이지를 본문에 적은 창 크기(CSS px)로 헤드리스 Chrome에서 열고, GSAP가 불리자마자 gsap.globalTimeline을 멈춘 뒤 시간을 1/30초씩 넘기며 프레임을 찍어 영상으로 만든다. 스크롤 페이지는 프레임마다 window.scrollTo로 맨 위에서 맨 아래까지 내리면서 ScrollTrigger.update()도 부른다. 그래서 움직임은 모두 GSAP(트윈·타임라인·repeat·delayedCall·ScrollTrigger)로만 만들고, CSS animation/transition, setTimeout/setInterval, requestAnimationFrame·gsap.ticker 루프, 클릭·마우스로 시작하는 동작, ScrollSmoother·snap·별도 스크롤 컨테이너는 쓰지 않는다. 페이지를 열면 바로 자동으로 시작한다. - 인터넷은 쓰지 않는다(웹 검색·내려받기 없음). 확인하고 싶으면 헤드리스 Chrome으로 이 페이지만 열어 본다(이때 GSAP CDN 파일을 받는 것은 괜찮다). 이 장비에서는 google-chrome --screenshot이 GSAP 움직임을 진행시키지 못해 첫 장면만 찍히므로, 오류 확인은 --dump-dom이나 콘솔 로그로 한다. 확인용 임시 파일은 현재 폴더 안에만 둔다. - 같은 플러그인의 다른 스킬 문서는 이 스킬의 Base directory 옆 폴더(…/skills/gsap-core/SKILL.md, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-performance)에 있으니 필요하면 Read로 읽어도 된다. 다른 플러그인·스킬은 쓰지 않는다. - 끝나면 만든 파일, 쓴 GSAP 기능·플러그인, 움직임 길이(초)를 짧게 알려 줘.
가상의 걷기 기록 앱 '약수터 왕복 일지' 오늘 기록 화면(1080×1350, 6.0초): 등고선 뒷산 지도 위에 출발 → 솔매봉 정상(286m) → 약수터 → 도착으로 오늘 걸은 길이 그려지고, 사람 점이 그 길을 따라 정상까지 갔다가 돌아온다. 아래 고도 그래프 선이 같은 속도로 그려지고 걸음 수·거리·시간이 0에서 6,482걸음·4.62km·1:18:40까지 올라가며, 오른쪽 위 상태 문구가 '정상으로 오르는 중 → 약수터로 내려가는 중 → 집으로 돌아가는 중 → 왕복 완료!'로 바뀐다. 흠: 마지막에 찍히는 '왕복 완료' 도장이 지도 칸 아래에 걸려 윗부분만 보인다(5초 이후 끝까지).
움직임 영상 보기 · 6.8초 · 무음 · 시험자 화면 녹화

시험자가 헤드리스 Chrome에서 결과 HTML의 GSAP 시간을 1/30초씩 넘기며 찍은 화면 녹화입니다. 스킬이나 모델이 만든 영상이 아닙니다.

run12 · 가상의 걷기 기록 앱 '약수터 왕복 일지' 오늘 기록 화면(1080×1350, 6.0초): 등고선 뒷산 지도 위에 출발 → 솔매봉 정상(286m) → 약수터 → 도착으로 오늘 걸은 길이 그려지고, 사람 점이 그 길을 따라 정상까지 갔다가 돌아온다. 아래 고도 그래프 선이 같은 속도로 그려지고 걸음 수·거리·시간이 0에서 6,482걸음·4.62km·1:18:40까지 올라가며, 오른쪽 위 상태 문구가 '정상으로 오르는 중 → 약수터로 내려가는 중 → 집으로 돌아가는 중 → 왕복 완료!'로 바뀐다. 흠: 마지막에 찍히는 '왕복 완료' 도장이 지도 칸 아래에 걸려 윗부분만 보인다(5초 이후 끝까지).
프롬프트 전문 보기
/gsap-skills:gsap-plugins 가상의 걷기 기록 앱 '약수터 왕복 일지'의 오늘 기록 화면을 만들어 줘. 등고선이 있는 뒷산 지도 위에 오늘 걸은 길이 DrawSVG로 그려지고, 동시에 사람 점이 MotionPath로 그 길을 따라 정상까지 갔다가 돌아온다. 아래에는 고도 그래프 선이 같은 속도로 그려지고 걸음 수·거리·시간 숫자가 카운트업된다. 5초 안팎. 창 크기 1080×1350(세로). 진행 메모(시험 실행): - 묻지 말고 끝까지 진행해. 결과는 현재 폴더의 index.html 한 파일(HTML·CSS·JS를 모두 안에)로 만든다. - GSAP는 jsdelivr CDN의 3.13.0 dist 파일만 <script src>로 불러온다: https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js 와 같은 폴더의 플러그인 파일(예: ScrollTrigger.min.js, SplitText.min.js, Flip.min.js, MorphSVGPlugin.min.js, MotionPathPlugin.min.js, DrawSVGPlugin.min.js, ScrambleTextPlugin.min.js, CustomEase.min.js). ES 모듈 import, 다른 라이브러리, 웹 글꼴, 이미지 파일·외부 이미지는 쓰지 않는다. 3.14부터 생긴 옵션(MorphSVG의 smooth·curveMode 등)은 3.13.0에 없다. - 그림은 SVG·CSS·도형으로 직접 그린다. 글꼴은 이 장비에 있는 것만 쓴다: 한글 "Noto Sans CJK KR"·"Noto Serif CJK KR", 영문·숫자 "Noto Sans"·"DejaVu Sans" 등. - 화면 글자는 한국어 위주로 쓴다(영어 조금은 괜찮다). 중국어·한자는 쓰지 않는다. 브랜드·제품·사람·숫자는 모두 가상이고, 실존 브랜드나 로고를 흉내 내지 않는다. - 녹화 방식: 시험자가 이 페이지를 본문에 적은 창 크기(CSS px)로 헤드리스 Chrome에서 열고, GSAP가 불리자마자 gsap.globalTimeline을 멈춘 뒤 시간을 1/30초씩 넘기며 프레임을 찍어 영상으로 만든다. 스크롤 페이지는 프레임마다 window.scrollTo로 맨 위에서 맨 아래까지 내리면서 ScrollTrigger.update()도 부른다. 그래서 움직임은 모두 GSAP(트윈·타임라인·repeat·delayedCall·ScrollTrigger)로만 만들고, CSS animation/transition, setTimeout/setInterval, requestAnimationFrame·gsap.ticker 루프, 클릭·마우스로 시작하는 동작, ScrollSmoother·snap·별도 스크롤 컨테이너는 쓰지 않는다. 페이지를 열면 바로 자동으로 시작한다. - 인터넷은 쓰지 않는다(웹 검색·내려받기 없음). 확인하고 싶으면 헤드리스 Chrome으로 이 페이지만 열어 본다(이때 GSAP CDN 파일을 받는 것은 괜찮다). 이 장비에서는 google-chrome --screenshot이 GSAP 움직임을 진행시키지 못해 첫 장면만 찍히므로, 오류 확인은 --dump-dom이나 콘솔 로그로 한다. 확인용 임시 파일은 현재 폴더 안에만 둔다. - 같은 플러그인의 다른 스킬 문서는 이 스킬의 Base directory 옆 폴더(…/skills/gsap-core/SKILL.md, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-performance)에 있으니 필요하면 Read로 읽어도 된다. 다른 플러그인·스킬은 쓰지 않는다. - 끝나면 만든 파일, 쓴 GSAP 기능·플러그인, 움직임 길이(초)를 짧게 알려 줘.