

- 길이와 비율
- 0:41
- 16:9
- 제작 도구
- three.js
- Canvas
- SVG
프롬프트
Rebuild https://en.manayerbamate.com/ as closely as you can, using the cloning methodology in ./clone-skill/. Context you should know: this is going into a video watched by a large audience, your build is put on screen next to the real site against two other frontier models doing the same task, and your work will be credited to you by name. Every model gets this identical prompt and the identical target. The comparison is literal, so anything you skip will be visible. This is an evaluation exercise, not a site to ship. It is never published as the brand's own site. **Read the methodology first.** `./clone-skill/SKILL.md` and `references/00-contract.md` before you do anything else, then each stage reference as you reach it. `references/stage-prompts.md` and `references/tooling.md` are worth reading early. The contract defines the workspace layout, the artifact filenames, the stage inputs and outputs, the verification gate and the convergence loop. Follow it. `scripts/assert-styles.mjs` is the gate. Two overrides that win where they conflict with the skill: - **Ignore the stop-and-check-in gate.** That skill was written for an interactive session with a human. You are running unattended. Do not stop between stages, do not ask for approval, do not ask questions. Run the whole pipeline start to finish and report only when it is done. - **Use your own browser automation** — headless Playwright or Puppeteer, installed and driven by you — anywhere the skill says to use the Claude Chrome extension. The contract's real rule is unchanged and it is the one that matters: **computed styles read off the live page are ground truth.** Read them through the CSSOM. Screenshots are visual reference only; never build the gate on a pixel diff. Requirements: 1. **Recon every view before you write code.** Every route, every breakpoint, every interactive state: hover, focus, active, open menus, modals, scroll-triggered states, loading and transition states, the language switcher. What you miss in recon you will not build. 2. **Extract, do not guess.** Pull real computed values off the live page: the full type scale, the colour palette with exact values, spacing, radii, shadows, borders, grid and container widths, breakpoints, easing curves and durations, font families and weights. Never read a value off a screenshot. 3. **Rebuild it.** Every section, every component, every state, at every breakpoint. The motion is part of the clone: scroll behaviour, page transitions, hover choreography, entrance animations, any canvas or WebGL work. A static skin over a site whose identity is motion is a failed clone. 4. **No lifted assets.** Do not hotlink from the original and do not download its images, video or fonts. Regenerate imagery in code, substitute freely-licensed equivalents, or author placeholders that match the original's role, aspect and colour. Fonts come from an open CDN, matching the metrics as closely as you can. List every substitution in the README. 5. **Prove the match.** Run the verification gate: read your clone's computed styles, compare them to the extracted design tokens with `scripts/assert-styles.mjs`, and iterate the convergence loop until there are zero style-assertion failures and the project builds clean. Then eyeball your clone against the real site at the same viewport, at every breakpoint, and fix what your eye catches that the assertions did not. 6. **Ship it runnable.** A real project that installs and runs with a documented command, plus a README naming what you substituted and your final assertion results. 7. **Depth over breadth if you have to choose.** One page cloned to a genuinely indistinguishable standard beats five that are approximately right.
비슷한 영상 더 보기
모두 보기요금제 선택
AI 영상과 AI 이미지에 함께 쓰는 하나의 크레딧 잔액입니다. 월간 또는 연간으로 구독하거나, 크레딧 팩을 한 번 구매할 수 있습니다.
2,000 크레딧
한 번 결제 · 구독 없음
팩당 동영상
- 2,000 크레딧, 한 번만 지급
- 빠른 이미지 최대 86장
- Potto 워터마크 추가 없음
- 동영상과 이미지 도구가 공유
5,000 크레딧
한 번 결제 · 구독 없음
팩당 동영상
- 5,000 크레딧, 한 번만 지급
- 빠른 이미지 최대 217장
- Potto 워터마크 추가 없음
- 동영상과 이미지 도구가 공유
15,000 크레딧
한 번 결제 · 구독 없음
팩당 동영상
- 15,000 크레딧, 한 번만 지급
- 빠른 이미지 최대 652장
- Potto 워터마크 추가 없음
- 동영상과 이미지 도구가 공유
Lite
Lite 선택US$20/월월 단위 결제
월 영상 수
30초 제품 데모 영상13개60초 설명 영상5개- 매월 2,000크레딧
- 빠른 이미지 최대 86장
- 표준 대기열
- Potto 워터마크 추가 없음
- AI 도구 일괄 처리
- 공개 갤러리에 표시되지 않음
Pro
Pro 선택US$50/월월 단위 결제
월 영상 수
30초 제품 데모 영상33개60초 설명 영상13개- 매월 5,000크레딧
- 빠른 이미지 최대 217장
- 우선 대기열
- Potto 워터마크 추가 없음
- AI 도구 일괄 처리
- 공개 갤러리에 표시되지 않음
- 추천
Max
Max 선택US$100/월월 단위 결제
월 영상 수
30초 제품 데모 영상100개60초 설명 영상40개- 매월 15,000크레딧
- 빠른 이미지 최대 652장
- 최우선 대기열
- Potto 워터마크 추가 없음
- AI 도구 일괄 처리
- 공개 갤러리에 표시되지 않음
Lite
-20%Lite 선택US$20US$16/월연 단위 결제 · 연 US$240 → US$192
월 영상 수
30초 제품 데모 영상13개60초 설명 영상5개- 매월 2,000크레딧
- 빠른 이미지 최대 86장
- 표준 대기열
- Potto 워터마크 추가 없음
- AI 도구 일괄 처리
- 공개 갤러리에 표시되지 않음
Pro
-20%Pro 선택US$50US$40/월연 단위 결제 · 연 US$600 → US$480
월 영상 수
30초 제품 데모 영상33개60초 설명 영상13개- 매월 5,000크레딧
- 빠른 이미지 최대 217장
- 우선 대기열
- Potto 워터마크 추가 없음
- AI 도구 일괄 처리
- 공개 갤러리에 표시되지 않음
- 추천
Max
-20%Max 선택US$100US$80/월연 단위 결제 · 연 US$1,200 → US$960
월 영상 수
30초 제품 데모 영상100개60초 설명 영상40개- 매월 15,000크레딧
- 빠른 이미지 최대 652장
- 최우선 대기열
- Potto 워터마크 추가 없음
- AI 도구 일괄 처리
- 공개 갤러리에 표시되지 않음
Videos use credits when you export, and starting one needs a balance that covers its export. Counts assume a 30-second product demo and a 60-second explainer with narration and 3 illustrations.
Yerba mate can scrolls through a drink brand site 자주 묻는 질문
Yerba mate can scrolls through a drink brand site의 제작 방식, 프롬프트 내용, 그리고 Potto로 비슷한 비주얼 시스템 동영상을 만드는 방법.
Yerba mate can scrolls through a drink brand site이란?
Yerba mate can scrolls through a drink brand site은 per_simmons_가 만든 비주얼 시스템 모션그래픽 영상입니다. A 41-second motion video showing yerba mate can scrolls moving through a drink brand site.
Yerba mate can scrolls through a drink brand site은 어떻게 만들었나요?
Yerba mate can scrolls through a drink brand site은 three.js, Canvas 및 SVG로 만들었습니다. Potto의 비주얼 시스템 AI 모션그래픽 영상 모음에 포함되어 있습니다.
Yerba mate can scrolls through a drink brand site의 프롬프트를 볼 수 있나요?
네. Yerba mate can scrolls through a drink brand site의 전체 프롬프트가 이 페이지에 있습니다. 복사하거나, 「이 프롬프트 사용」을 눌러 Potto 작업 공간에서 여세요.
Yerba mate can scrolls through a drink brand site의 길이와 화면 비율은 어떻게 되나요?
Yerba mate can scrolls through a drink brand site의 길이는 0:41이고, 프레임은 16:9입니다.
Potto로 Yerba mate can scrolls through a drink brand site 같은 비주얼 시스템 영상을 만들 수 있나요?
네. 「이 프롬프트 사용」을 누르면 Yerba mate can scrolls through a drink brand site의 프롬프트가 Potto 작업 공간에 불러와집니다. Potto가 자체 버전을 렌더링하며, 내보내기 전에 글과 스타일을 바꿀 수 있습니다.
Yerba mate can scrolls through a drink brand site 원본은 어디서 보나요?
Yerba mate can scrolls through a drink brand site 은 제작자가 처음 게시했습니다. 「원본 보기」를 클릭하면 해당 게시물이 새 탭에서 열립니다.
Yerba mate can scrolls through a drink brand site 같은 비주얼 시스템 영상은 어디서 더 찾나요?
Potto의 비주얼 시스템 모음을 둘러보세요. 영상 480개가 있으며, 각각 프롬프트, 사양, 출처가 있습니다.