Potto AI

863 de 1594 en Videos

AnteriorSiguiente
Yerba mate can scrolls through a drink brand site por per_simmons_
Duración y proporción
  • 0:41
  • 16:9
Hecho con
  • 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.

Más videos como este

Ver todos

Elige tu plan

Un solo saldo de créditos para videos de IA e imágenes de IA. Suscríbete por mes o por año, o compra un paquete de créditos una vez.

  • Lite

    20 US$/mes

    Facturación mensual

    Elegir Lite

    Imágenes al mes en HD

    Más información
    Nano Banana Pro44 imágenes
    Nano Banana86 imágenes

    Videos al mes

    Video demostrativo de producto de 30 segundos13 videos
    Video explicativo de 60 segundos5 videos
    • 2000 créditos al mes
    • Hasta 86 imágenes rápidas
    • Cola estándar
    • Sin marca de agua de Potto añadida
    • Procesamiento por lotes con las herramientas de IA
    • Sin publicación en galerías públicas
  • Pro

    50 US$/mes

    Facturación mensual

    Elegir Pro

    Imágenes al mes en HD

    Más información
    Nano Banana Pro111 imágenes
    Nano Banana217 imágenes

    Videos al mes

    Video demostrativo de producto de 30 segundos33 videos
    Video explicativo de 60 segundos13 videos
    • 5000 créditos al mes
    • Hasta 217 imágenes rápidas
    • Cola con prioridad
    • Sin marca de agua de Potto añadida
    • Procesamiento por lotes con las herramientas de IA
    • Sin publicación en galerías públicas
  • Recomendado

    Max

    100 US$/mes

    Facturación mensual

    Elegir Max

    Imágenes al mes en HD

    Más información
    Nano Banana Pro333 imágenes
    Nano Banana652 imágenes

    Videos al mes

    Video demostrativo de producto de 30 segundos100 videos
    Video explicativo de 60 segundos40 videos
    • 15.000 créditos al mes
    • Hasta 652 imágenes rápidas
    • Cola con máxima prioridad
    • Sin marca de agua de Potto añadida
    • Procesamiento por lotes con las herramientas de IA
    • Sin publicación en galerías públicas

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.

Preguntas frecuentes de Yerba mate can scrolls through a drink brand site

Cómo se hizo Yerba mate can scrolls through a drink brand site, qué dice su prompt y cómo crear un vídeo Sistema visual parecido con Potto.

  1. ¿Qué es Yerba mate can scrolls through a drink brand site?

    Yerba mate can scrolls through a drink brand site es un video de motion graphics de Sistema visual de per_simmons_. A 41-second motion video showing yerba mate can scrolls moving through a drink brand site.

  2. ¿Cómo se hizo Yerba mate can scrolls through a drink brand site?

    Yerba mate can scrolls through a drink brand site se hizo con three.js, Canvas y SVG. Forma parte de la colección Sistema visual de videos de motion graphics con IA en Potto.

  3. ¿Está disponible el prompt de Yerba mate can scrolls through a drink brand site?

    Sí. El prompt completo de Yerba mate can scrolls through a drink brand site está en esta página. Cópialo o haz clic en Usar este prompt para abrirlo en el espacio de trabajo de Potto.

  4. ¿Cuánto dura Yerba mate can scrolls through a drink brand site y cuál es su relación de aspecto?

    Yerba mate can scrolls through a drink brand site dura 0:41 en un marco 16:9.

  5. ¿Puedo hacer con Potto un video de Sistema visual como Yerba mate can scrolls through a drink brand site?

    Sí. Haz clic en Usar este prompt para cargar el prompt de Yerba mate can scrolls through a drink brand site en el espacio de trabajo de Potto. Potto renderiza su propia versión, y puedes cambiar el texto y el estilo antes de exportar.

  6. ¿Dónde puedo ver el original de Yerba mate can scrolls through a drink brand site?

    Yerba mate can scrolls through a drink brand site lo publicó primero su creador. Haz clic en Ver original para abrir esa publicación en una pestaña nueva.

  7. ¿Dónde encuentro más videos de Sistema visual como Yerba mate can scrolls through a drink brand site?

    Explora la colección Sistema visual en Potto: 480 videos, cada uno con su prompt, especificaciones y fuente.