Potto AI

863 sur 1 594 dans Vidéos

PrécédentSuivant
Yerba mate can scrolls through a drink brand site par per_simmons_
Durée et format
  • 0:41
  • 16:9
Créé avec
  • three.js
  • Canvas
  • SVG

Prompt

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.

D’autres vidéos similaires

Tout voir

Choisissez votre forfait

Un seul solde de crédits pour les vidéos IA et les images IA. Abonnez-vous au mois ou à l’année, ou achetez un pack de crédits une fois.

  • Lite

    20 $US/mois

    Facturé mensuellement

    Choisir Lite

    Images par mois en HD

    En savoir plus
    Nano Banana Pro44 images
    Nano Banana86 images

    Vidéos par mois

    Vidéo démo produit de 30 secondes13 vidéos
    Vidéo explicative de 60 secondes5 vidéos
    • 2 000 crédits par mois
    • Jusqu’à 86 images rapides
    • File standard
    • Aucun filigrane Potto ajouté
    • Traitement par lot avec les outils IA
    • Non répertoriés dans les galeries publiques
  • Pro

    50 $US/mois

    Facturé mensuellement

    Choisir Pro

    Images par mois en HD

    En savoir plus
    Nano Banana Pro111 images
    Nano Banana217 images

    Vidéos par mois

    Vidéo démo produit de 30 secondes33 vidéos
    Vidéo explicative de 60 secondes13 vidéos
    • 5 000 crédits par mois
    • Jusqu’à 217 images rapides
    • File d’attente prioritaire
    • Aucun filigrane Potto ajouté
    • Traitement par lot avec les outils IA
    • Non répertoriés dans les galeries publiques
  • Recommandé

    Max

    100 $US/mois

    Facturé mensuellement

    Choisir Max

    Images par mois en HD

    En savoir plus
    Nano Banana Pro333 images
    Nano Banana652 images

    Vidéos par mois

    Vidéo démo produit de 30 secondes100 vidéos
    Vidéo explicative de 60 secondes40 vidéos
    • 15 000 crédits par mois
    • Jusqu’à 652 images rapides
    • File d’attente haute priorité
    • Aucun filigrane Potto ajouté
    • Traitement par lot avec les outils IA
    • Non répertoriés dans les galeries publiques

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.

FAQ Yerba mate can scrolls through a drink brand site

Comment Yerba mate can scrolls through a drink brand site a été réalisé, ce que dit son prompt et comment créer une vidéo Système visuel semblable avec Potto.

  1. Qu’est-ce que Yerba mate can scrolls through a drink brand site ?

    Yerba mate can scrolls through a drink brand site est une vidéo de motion design Système visuel par per_simmons_. A 41-second motion video showing yerba mate can scrolls moving through a drink brand site.

  2. Comment Yerba mate can scrolls through a drink brand site a-t-il été réalisé ?

    Yerba mate can scrolls through a drink brand site a été réalisé avec three.js, Canvas et SVG. Il fait partie de la collection Système visuel de vidéos de motion design IA sur Potto.

  3. Le prompt de Yerba mate can scrolls through a drink brand site est-il disponible ?

    Oui. Le prompt complet derrière Yerba mate can scrolls through a drink brand site est sur cette page. Copiez-le, ou cliquez sur Utiliser ce prompt pour l’ouvrir dans l’espace de travail Potto.

  4. Quelle est la durée de Yerba mate can scrolls through a drink brand site, et quel est son format ?

    Yerba mate can scrolls through a drink brand site dure 0:41 dans un cadre 16:9.

  5. Puis-je réaliser avec Potto une vidéo Système visuel comme Yerba mate can scrolls through a drink brand site ?

    Oui. Cliquez sur Utiliser ce prompt pour charger le prompt derrière Yerba mate can scrolls through a drink brand site dans l’espace de travail Potto. Potto en rend sa propre version, et vous pouvez modifier le texte et le style avant l’export.

  6. Où puis-je regarder l’original de Yerba mate can scrolls through a drink brand site ?

    Yerba mate can scrolls through a drink brand site a d’abord été publié par son créateur. Cliquez sur Voir l’original pour ouvrir cette publication dans un nouvel onglet.

  7. Où trouver d’autres vidéos Système visuel comme Yerba mate can scrolls through a drink brand site ?

    Parcourez la collection Système visuel sur Potto : 480 vidéos, chacune avec son prompt, ses caractéristiques et sa source.