Potto AI

14/1.594 trong Video

TrướcSau
One shape morphs through a dozen UI states on beat bởi twoclipping
Độ dài và tỷ lệ
  • 0:14
  • 1:1
Tạo bằng
  • FFmpeg
  • HTML
  • NumPy
  • Playwright
  • SVG

prompt

<inputs> Ask me for: 8 to 12 UI states I want the shape to become (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), pure black and white or one accent color, and a royalty-free song around 120 BPM (e.g. Mixkit, free for commercial use). </inputs> <direction> Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black and white components, one clean UI font (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame is the first frame, so it loops. Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template. </direction> <structure> 120 BPM, 7 bars, something happens on every beat. Button → loader → check → dynamic island → music player with a play/pause morph → scrub the progress bar → it becomes a volume slider that stretches when dragged past max → a toggle flips on the beat → the knob becomes a liquid tab indicator → the tabs open into a chart that draws itself, with a tooltip on hover → it collapses into ⌘K → type to filter → enter → toast → back to the button. </structure> <build> 1. One HTML file, square 1440x1440. Every style is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames. 2. Springs are closed-form step responses. A value that changes target many times is the sum of one spring per change, so it stays a pure function of time. 3. The tab indicator's two edges ride different springs, so the leading edge stretches ahead of the trailing one. Same trick for the toggle knob. 4. Drags are direct manipulation: while the cursor is held, the value is computed from its position. On release it springs back from wherever it was. 5. Analyze the song with numpy for the beat grid and start on a downbeat. Place every UI sound by its measured peak. 6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps. 7. Render one frame per beat before the full render. Fix anything off the grid, cramped or hard to read. </build> <gotchas> Never put will-change on anything the camera scales or the text renders blurry. Text that swaps inside a morphing container needs its own enter and exit timing or it overlaps. Make the last frame identical to the first, cursor position and speed included, or the loop stutters. </gotchas> <start> Ask me for the inputs, then show me the state list on the beat grid before you write any code. </start>

Thêm video tương tự

Xem tất cả

Chọn gói của bạn

Một số dư credit cho video AI và ảnh AI. Đăng ký theo tháng hoặc theo năm, hoặc mua gói credit một lần.

  • Lite

    20 US$/tháng

    Thanh toán hằng tháng

    Chọn Lite

    Số ảnh mỗi tháng ở HD

    Xem thêm
    Nano Banana Pro44 ảnh
    Nano Banana86 ảnh

    Số video mỗi tháng

    Video demo sản phẩm 30 giây13 video
    Video giải thích 60 giây5 video
    • 2.000 credit mỗi tháng
    • Tối đa 86 ảnh tốc độ nhanh
    • Hàng đợi tiêu chuẩn
    • Không thêm watermark Potto
    • Xử lý hàng loạt với công cụ AI
    • Không được liệt kê trong thư viện công khai
  • Pro

    50 US$/tháng

    Thanh toán hằng tháng

    Chọn Pro

    Số ảnh mỗi tháng ở HD

    Xem thêm
    Nano Banana Pro111 ảnh
    Nano Banana217 ảnh

    Số video mỗi tháng

    Video demo sản phẩm 30 giây33 video
    Video giải thích 60 giây13 video
    • 5.000 credit mỗi tháng
    • Tối đa 217 ảnh tốc độ nhanh
    • Hàng đợi ưu tiên
    • Không thêm watermark Potto
    • Xử lý hàng loạt với công cụ AI
    • Không được liệt kê trong thư viện công khai
  • Đề xuất

    Max

    100 US$/tháng

    Thanh toán hằng tháng

    Chọn Max

    Số ảnh mỗi tháng ở HD

    Xem thêm
    Nano Banana Pro333 ảnh
    Nano Banana652 ảnh

    Số video mỗi tháng

    Video demo sản phẩm 30 giây100 video
    Video giải thích 60 giây40 video
    • 15.000 credit mỗi tháng
    • Tối đa 652 ảnh tốc độ nhanh
    • Hàng đợi ưu tiên cao nhất
    • Không thêm watermark Potto
    • Xử lý hàng loạt với công cụ AI
    • Không được liệt kê trong thư viện công khai

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.

Câu hỏi thường gặp về One shape morphs through a dozen UI states on beat

One shape morphs through a dozen UI states on beat được làm thế nào, prompt nói gì và cách làm video Hệ thống ảnh tương tự bằng Potto.

  1. One shape morphs through a dozen UI states on beat là gì?

    One shape morphs through a dozen UI states on beat là video motion graphics thuộc Hệ thống ảnh của twoclipping. A single shape morphs through twelve UI states on the beat in a looping black-and-white motion piece.

  2. One shape morphs through a dozen UI states on beat được làm thế nào?

    One shape morphs through a dozen UI states on beat được làm bằng FFmpeg, HTML, NumPy, Playwright và SVG. Video này nằm trong bộ sưu tập Hệ thống ảnh của video Motion graphics AI trên Potto.

  3. Có xem được prompt của One shape morphs through a dozen UI states on beat không?

    Có. Prompt đầy đủ của One shape morphs through a dozen UI states on beat nằm trên trang này. Hãy sao chép, hoặc bấm Dùng prompt này để mở trong không gian làm việc Potto.

  4. One shape morphs through a dozen UI states on beat dài bao lâu và tỷ lệ khung hình là gì?

    One shape morphs through a dozen UI states on beat dài 0:14, khung hình 1:1.

  5. Tôi có thể dùng Potto làm video Hệ thống ảnh giống One shape morphs through a dozen UI states on beat không?

    Có. Bấm Dùng prompt này để tải prompt của One shape morphs through a dozen UI states on beat vào không gian làm việc Potto. Potto dựng phiên bản của riêng mình, và bạn có thể đổi chữ cùng phong cách trước khi xuất.

  6. Xem bản gốc One shape morphs through a dozen UI states on beat ở đâu?

    One shape morphs through a dozen UI states on beat được tác giả đăng lần đầu. Nhấp Xem bản gốc để mở bài đăng đó trong tab mới.

  7. Tìm thêm video Hệ thống ảnh giống One shape morphs through a dozen UI states on beat ở đâu?

    Xem bộ sưu tập Hệ thống ảnh trên Potto: 480 video, mỗi video có prompt, thông số và nguồn.