Img2Video Studio

Img2Video Studio

v2
by
Y
Yungmax$
Img2Video Studio
Loading...

Img2Video Studio

初期画像をアップロード

ドラッグ＆ドロップまたはクリックして参照

PNG, JPG, WEBP up to 10MB

Preview
アニメーションのプロンプト
app.effect_label
Squish
Animeify
Fire
動画を生成

動画を生成すると、ここに結果が表示されます。

フレームを合成中...

MP4をダウンロード
UIを複製
コンポーネントを抽出中... 0%
レイアウトを編集 コードをエクスポート
localhost:3000
Chart Area Mockup

エクスポートされたReactコード 

import React from 'react';

export default function ExtractedDashboard() {
  return (
    <div className="flex h-screen bg-slate-50">
      {/* Sidebar */}
      <aside className="w-64 bg-white border-r p-6">
        <h1 className="text-xl font-bold text-slate-800">AppLogo</h1>
        <nav className="mt-8 space-y-2">
          <a href="#" className="block px-4 py-2 bg-indigo-50 text-indigo-600 rounded-lg">Dashboard</a>
          <a href="#" className="block px-4 py-2 text-slate-600 hover:bg-slate-50 rounded-lg">Analytics</a>
        </nav>
      </aside>

      {/* Main Content */}
      <main className="flex-1 p-8 overflow-y-auto">
        <header className="flex justify-between items-center mb-8">
          <h2 className="text-2xl font-bold text-slate-800">Overview</h2>
          <button className="bg-indigo-600 text-white px-4 py-2 rounded-lg">New Report</button>
        </header>
        
        {/* Metric Cards */}
        <div className="grid grid-cols-3 gap-6 mb-8">
          {[1, 2, 3].map(i => (
            <div key={i} className="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
              <p className="text-sm text-slate-500">Metric {i}</p>
              <p className="text-2xl font-bold text-slate-800 mt-2">1,234</p>
            </div>
          ))}
        </div>
      </main>
    </div>
  );
}