---
title: "Yerba mate can scrolls through a drink brand site"
description: "A 41-second motion video showing yerba mate can scrolls moving through a drink brand site."
canonical: "https://potto.ai/zh/videos/yerba-mate-can-scrolls-through-a-drink-brand-site"
language: "zh-CN"
datePublished: "2026-09-24"
---

# Yerba mate can scrolls through a drink brand site

A 41-second motion video showing yerba mate can scrolls moving through a drink brand site.

Yerba mate can scrolls move through a drink brand site in this 41-second motion video. The visuals are built with threejs, canvas, and svg.

- [视觉体系](https://potto.ai/zh/videos/visual-system.md)
- 由 per_simmons_
- 时长与比例: 0:41 · 16:9
- 制作工具: three.js, Canvas, SVG
- 发布于 2026年9月24日
- 查看原片: https://x.com/per_simmons_/status/2103208157308944727

## 提示词

```text
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.
```

## 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 支视频，每支都附有提示词、规格和来源。