Potto AI

動画 863/1,594

前へ次へ
Yerba mate can scrolls through a drink brand site 作者 per_simmons_
長さと比率
  • 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 画像で使える、一つのクレジット残高です。月額または年額で登録するか、クレジットパックを一度だけ購入できます。

  • Lite

    $20/月

    月額請求

    Lite を選ぶ

    月あたりの生成枚数(HD)

    詳しく見る
    Nano Banana Pro44 枚
    Nano Banana86 枚

    月あたりの動画本数

    30 秒の製品デモ動画13 本
    60 秒の解説動画5 本
    • 月 2,000 クレジット
    • 高速生成は最大 86 枚
    • 標準キュー
    • Potto のウォーターマークを追加しません
    • AI ツールの一括処理
    • 公開ギャラリーには掲載されません
  • Pro

    $50/月

    月額請求

    Pro を選ぶ

    月あたりの生成枚数(HD)

    詳しく見る
    Nano Banana Pro111 枚
    Nano Banana217 枚

    月あたりの動画本数

    30 秒の製品デモ動画33 本
    60 秒の解説動画13 本
    • 月 5,000 クレジット
    • 高速生成は最大 217 枚
    • 優先キュー
    • Potto のウォーターマークを追加しません
    • AI ツールの一括処理
    • 公開ギャラリーには掲載されません
  • おすすめ

    Max

    $100/月

    月額請求

    Max を選ぶ

    月あたりの生成枚数(HD)

    詳しく見る
    Nano Banana Pro333 枚
    Nano Banana652 枚

    月あたりの動画本数

    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 で同じような ビジュアルの共通設定 動画を作る方法。

  1. 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.

  2. Yerba mate can scrolls through a drink brand site はどう作られましたか?

    Yerba mate can scrolls through a drink brand site は three.js、Canvas、SVG で制作されました。Potto の ビジュアルの共通設定 に含まれる AI モーショングラフィックス動画です。

  3. Yerba mate can scrolls through a drink brand site のプロンプトは見られますか?

    はい。Yerba mate can scrolls through a drink brand site のプロンプト全文がこのページにあります。コピーするか、「このプロンプトを使う」をクリックして Potto のワークスペースで開いてください。

  4. Yerba mate can scrolls through a drink brand site の長さとアスペクト比は?

    Yerba mate can scrolls through a drink brand site の長さは 0:41、フレームは 16:9 です。

  5. Potto で Yerba mate can scrolls through a drink brand site のような ビジュアルの共通設定 動画を作れますか?

    はい。「このプロンプトを使う」をクリックすると、Yerba mate can scrolls through a drink brand site のプロンプトが Potto のワークスペースに読み込まれます。Potto が独自のバージョンをレンダリングし、書き出す前に文字とスタイルを変えられます。

  6. Yerba mate can scrolls through a drink brand site のオリジナルはどこで見られますか?

    Yerba mate can scrolls through a drink brand site は作成者が最初に投稿しました。「オリジナルを見る」をクリックすると、その投稿が新しいタブで開きます。

  7. Yerba mate can scrolls through a drink brand site のような ビジュアルの共通設定 動画はどこで見つかりますか?

    Potto の ビジュアルの共通設定 コレクションを見てください。480 本あり、それぞれにプロンプト、仕様、出典が付いています。