All Prompts
All Prompts
dashboardeditoranimationtimelinetailwinduipanelcanvasresponsiveprototype
Motion Design Animation Editor Dashboard
Интерактивный дашборд редактора анимации. UI для создания моушн-дизайна с библиотекой, таймлайном и предпросмотром. Создан на Tailwind CSS.
Prompt
<div class="max-w-7xl md:px-6 -mb-8 mr-auto ml-auto pr-4 pl-4">
<div class="relative w-full overflow-hidden bg-white/[0.04] border border-white/10 rounded-2xl shadow-2xl backdrop-blur-xl">
<!-- Topbar -->
<div class="flex items-center justify-between border-b border-white/10 px-3 py-2">
<div class="flex items-center gap-2">
<span class="h-3 w-3 rounded-full bg-red-500/80"></span>
<span class="h-3 w-3 rounded-full bg-yellow-400/80"></span>
<span class="h-3 w-3 rounded-full bg-green-500/80"></span>
<div class="ml-3 hidden items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-2 py-1 text-xs text-slate-300 sm:flex font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play-circle" class="lucide lucide-play-circle h-3.5 w-3.5 text-blue-400"><path d="M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
Quantum Studio — Project: Motion Design
</div>
</div>
<div class="flex items-center gap-2">
<button class="hidden rounded-md border border-white/10 bg-white/5 p-1.5 text-slate-200 hover:bg-white/10 sm:inline-flex">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="save" class="lucide lucide-save h-4 w-4"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" class=""></path><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" class=""></path><path d="M7 3v4a1 1 0 0 0 1 1h7" class=""></path></svg>
</button>
<button class="hidden rounded-md border border-white/10 bg-white/5 p-1.5 text-slate-200 hover:bg-white/10 sm:inline-flex">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="share-2" class="lucide lucide-share-2 h-4 w-4"><circle cx="18" cy="5" r="3" class=""></circle><circle cx="6" cy="12" r="3" class=""></circle><circle cx="18" cy="19" r="3" class=""></circle><line x1="8.59" x2="15.42" y1="13.51" y2="17.49" class=""></line><line x1="15.41" x2="8.59" y1="6.51" y2="10.49" class=""></line></svg>
</button>
<button class="rounded-md bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-500 font-geist">Export</button>
</div>
</div>
<!-- Editor body -->
<div class="grid grid-cols-1 md:grid-cols-12">
<!-- Left panel - Elements -->
<aside class="hidden md:block md:col-span-3 bg-black/30 border-white/10 border-r pt-3 pr-3 pb-3 pl-3">
<div class="mb-3 flex items-center justify-between">
<div class="inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs font-medium text-slate-300 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="layers" class="lucide lucide-layers h-3.5 w-3.5"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" class=""></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class=""></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class=""></path></svg>
Elements
</div>
<button class="rounded-md border border-white/10 bg-white/5 p-1 text-slate-300 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus h-4 w-4"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
</div>
<div class="space-y-1 text-slate-300 h-[520px] flex flex-col">
<!-- Element Categories -->
<div class="flex gap-1 mb-3">
<button class="px-2 py-1 text-xs bg-blue-600 text-white rounded font-geist">Elements</button>
<button class="px-2 py-1 text-xs bg-white/5 text-slate-400 hover:bg-white/10 rounded font-geist">Assets</button>
<button class="px-2 py-1 text-xs bg-white/5 text-slate-400 hover:bg-white/10 rounded font-geist">Media</button>
</div>
<!-- Element Library -->
<div class="bg-white/5 rounded-lg p-2 mb-3">
<div class="text-xs text-slate-400 mb-2 font-geist">Components</div>
<div class="grid grid-cols-3 gap-1">
<button class="p-2 rounded border border-white/10 bg-white/5 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-blue-400 mx-auto"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect></svg>
</button>
<button class="p-2 rounded border border-white/10 bg-white/5 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-cyan-400 mx-auto"><circle cx="12" cy="12" r="10" class=""></circle></svg>
</button>
<button class="p-2 rounded border border-white/10 bg-white/5 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-emerald-400 mx-auto"><path d="M12 4v16" class=""></path><path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" class=""></path><path d="M9 20h6" class=""></path></svg>
</button>
<button class="p-2 rounded border border-white/10 bg-white/5 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-pink-400 mx-auto"><rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect><circle cx="9" cy="9" r="2" class=""></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" class=""></path></svg>
</button>
<button class="p-2 rounded border border-white/10 bg-white/5 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-orange-400 mx-auto"><path d="M12 20h9" class=""></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" class=""></path></svg>
</button>
<button class="p-2 rounded border border-white/10 bg-white/5 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-purple-400 mx-auto"><path d="M7.5 4.21l4.5 2.6 4.5-2.6L21 6v10l-4.5 2.6-4.5-2.6L7.5 18.6 3 16V6l4.5-1.79z" class=""></path><path d="M12 12v5" class=""></path><path d="m9 9 3 3 3-3" class=""></path></svg>
</button>
</div>
</div>
<!-- Current Elements -->
<div class="bg-white/5 rounded-lg p-2 flex-1">
<div class="text-xs text-slate-400 mb-2 font-geist">Scene Elements</div>
<ul class="space-y-1 text-xs">
<li class="flex items-center gap-2 rounded-md bg-blue-500/20 px-2 py-1 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="square" class="lucide lucide-square h-3.5 w-3.5 text-blue-400"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect></svg>
Hero Card
<div class="ml-auto flex items-center gap-1">
<button class="w-3 h-3 rounded-full bg-blue-400"></button>
<button class="w-3 h-3 rounded-sm border border-white/20">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-2 h-2 text-slate-400"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
</button>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="circle" class="lucide lucide-circle h-3.5 w-3.5 text-cyan-400"><circle cx="12" cy="12" r="10" class=""></circle></svg>
Background Orb
<div class="ml-auto flex items-center gap-1">
<button class="w-3 h-3 rounded-full bg-orange-400"></button>
<button class="w-3 h-3 rounded-sm border border-white/20">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-2 h-2 text-slate-400"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
</button>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="type" class="lucide lucide-type h-3.5 w-3.5 text-emerald-400"><path d="M12 4v16" class=""></path><path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" class=""></path><path d="M9 20h6" class=""></path></svg>
Title Text
<div class="ml-auto flex items-center gap-1">
<button class="w-3 h-3 rounded-full bg-emerald-400"></button>
<button class="w-3 h-3 rounded-sm border border-white/20">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-2 h-2 text-slate-400"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
</button>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="image" class="lucide lucide-image h-3.5 w-3.5 text-pink-400"><rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect><circle cx="9" cy="9" r="2" class=""></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" class=""></path></svg>
Feature Icons
<div class="ml-auto flex items-center gap-1">
<button class="w-3 h-3 rounded-full bg-purple-400"></button>
<button class="w-3 h-3 rounded-sm border border-white/20">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-2 h-2 text-slate-400"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
</button>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5 font-geist opacity-60">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 text-yellow-400"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" class=""></rect><path d="M12 18h.01" class=""></path></svg>
Mobile View
<div class="ml-auto">
<span class="text-xs text-slate-500 font-geist">Hidden</span>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 text-red-400"><rect width="7" height="7" x="3" y="3" rx="1" class=""></rect><rect width="7" height="7" x="14" y="3" rx="1" class=""></rect><rect width="7" height="7" x="14" y="14" rx="1" class=""></rect><rect width="7" height="7" x="3" y="14" rx="1" class=""></rect></svg>
Button Group
<div class="ml-auto flex items-center gap-1">
<button class="w-3 h-3 rounded-full bg-red-400"></button>
<button class="w-3 h-3 rounded-sm border border-white/20">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-2 h-2 text-slate-400"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
</button>
</div>
</li>
</ul>
</div>
<!-- Timeline Section -->
<div class="bg-white/5 rounded-lg p-2 mt-3">
<div class="mb-1 flex items-center justify-between">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock h-4 w-4 text-blue-400"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
<span class="text-xs font-medium font-geist">Timeline</span>
</div>
<div class="flex gap-1">
<button class="p-1 rounded border border-white/10 bg-white/5 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-slate-400"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
<button class="p-1 rounded border border-white/10 bg-white/5 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-slate-400"><path d="M5 12h14" class=""></path></svg>
</button>
</div>
</div>
<div class="space-y-1">
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-3 h-2 bg-blue-500 rounded-sm"></div>
<span class="text-slate-300 font-geist text-[10px]">Hero: 0s-1.2s</span>
<div class="ml-auto text-[10px] text-slate-500">Fade In</div>
</div>
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-4 h-2 bg-cyan-500 rounded-sm"></div>
<span class="text-slate-300 font-geist text-[10px]">Orb: 0.5s-2.1s</span>
<div class="ml-auto text-[10px] text-slate-500">Scale</div>
</div>
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-5 h-2 bg-emerald-500 rounded-sm"></div>
<span class="text-slate-300 font-geist text-[10px]">Text: 1s-3s</span>
<div class="ml-auto text-[10px] text-slate-500">Slide Up</div>
</div>
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-3 h-2 bg-purple-400 rounded-sm"></div>
<span class="text-slate-300 font-geist text-[10px]">Icons: 1.5s-2.8s</span>
<div class="ml-auto text-[10px] text-slate-500">Bounce</div>
</div>
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-4 h-2 bg-red-400 rounded-sm"></div>
<span class="text-slate-300 font-geist text-[10px]">Buttons: 2s-3.2s</span>
<div class="ml-auto text-[10px] text-slate-500">Stagger</div>
</div>
</div>
</div>
</div>
</aside>
<!-- Canvas -->
<main class="relative md:col-span-6 bg-black/20">
<div class="flex items-center gap-2 border-b border-white/10 px-3 py-2 text-xs text-slate-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play h-4 w-4 text-blue-400"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
<span class="font-geist">Preview Mode</span>
<div class="text-slate-500">•</div>
<span class="font-geist text-slate-400">1920×1080</span>
<div class="ml-auto flex items-center gap-1">
<div class="text-xs text-slate-500 font-geist">2.3s /</div>
<div class="text-xs text-slate-400 font-geist">3.0s</div>
<div class="h-4 w-px bg-white/10 mx-2"></div>
<button class="rounded-md border border-white/10 bg-white/5 p-1 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="skip-back" class="lucide lucide-skip-back h-4 w-4"><path d="M17.971 4.285A2 2 0 0 1 21 6v12a2 2 0 0 1-3.029 1.715l-9.997-5.998a2 2 0 0 1-.003-3.432z" class=""></path><path d="M3 20V4" class=""></path></svg>
</button>
<button class="rounded-md border border-white/10 bg-blue-600 p-1 hover:bg-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play h-4 w-4"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
</button>
<button class="rounded-md border border-white/10 bg-white/5 p-1 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="skip-forward" class="lucide lucide-skip-forward h-4 w-4"><path d="M21 4v16" class=""></path><path d="M6.029 4.285A2 2 0 0 0 3 6v12a2 2 0 0 0 3.029 1.715l9.997-5.998a2 2 0 0 0 .003-3.432z" class=""></path></svg>
</button>
</div>
</div>
<!-- Canvas Toolbar -->
<div class="flex items-center justify-between border-b border-white/10 px-3 py-2 bg-black/10">
<div class="flex items-center gap-2">
<button class="p-1 rounded border border-white/10 bg-blue-600 text-white hover:bg-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="M12 20h9" class=""></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" class=""></path></svg>
</button>
<button class="p-1 rounded border border-white/10 bg-white/5 text-slate-300 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="M7 7h.01" class=""></path><path d="M17 7h.01" class=""></path><path d="M7 17h.01" class=""></path><path d="M17 17h.01" class=""></path><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect></svg>
</button>
<div class="h-4 w-px bg-white/10"></div>
<div class="flex items-center gap-1">
<span class="text-xs text-slate-400 font-geist">Zoom:</span>
<button class="px-2 py-0.5 rounded border border-white/10 bg-white/5 text-xs text-slate-300 hover:bg-white/10 font-geist">75%</button>
</div>
</div>
<div class="flex items-center gap-2">
<button class="px-2 py-1 rounded border border-white/10 bg-white/5 text-xs text-slate-300 hover:bg-white/10 font-geist">Desktop</button>
<button class="px-2 py-1 rounded border border-white/10 bg-white/5 text-xs text-slate-400 hover:bg-white/10 font-geist">Tablet</button>
<button class="px-2 py-1 rounded border border-white/10 bg-white/5 text-xs text-slate-400 hover:bg-white/10 font-geist">Mobile</button>
</div>
</div>
<div class="p-4 sm:p-6">
<div class="relative overflow-hidden rounded-xl border border-white/10 bg-neutral-900/50 ring-1 ring-white/10 min-h-[400px] sm:min-h-[450px]">
<!-- Animated Elements -->
<div class="absolute top-6 left-6 right-6">
<div class="max-w-xl rounded-xl border border-white/10 bg-black/40 p-4 backdrop-blur animate-pulse">
<h3 class="text-2xl sm:text-3xl font-geist font-light tracking-tighter" style="">Interactive Animations</h3>
<p class="mt-1 text-sm text-slate-300 font-geist">Create engaging motion experiences with our visual timeline editor.</p>
<div class="mt-3 flex items-center gap-2">
<button class="inline-flex items-center gap-2 rounded-md bg-blue-600 px-3 py-1.5 text-xs font-medium text-white font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap h-3 w-3"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
Auto-animate
</button>
<button class="inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-medium text-slate-200 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="settings" class="lucide lucide-settings h-3 w-3"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
Customize
</button>
</div>
</div>
</div>
<!-- Floating Animation Elements -->
<div class="absolute bottom-20 left-8 w-12 h-12 bg-cyan-500 rounded-lg opacity-40 animate-pulse"></div>
<div class="absolute bottom-32 right-20 w-8 h-8 bg-emerald-500 rounded-full opacity-70 animate-ping"></div>
<!-- Additional animated elements -->
<div class="absolute bottom-40 left-20 w-6 h-6 bg-purple-400 rounded opacity-50 animate-bounce" style="animation-delay: 0.5s;"></div>
<!-- Canvas Grid (subtle) -->
<!-- Selection indicators -->
<div class="absolute top-6 left-6 w-2 h-2 border-2 border-blue-400 bg-blue-400/20 rounded-full"></div>
<div class="absolute top-6 right-6 w-2 h-2 border-2 border-blue-400 bg-transparent rounded-full"></div>
<div class="absolute bottom-6 left-6 w-2 h-2 border-2 border-blue-400 bg-transparent rounded-full"></div>
<div class="absolute bottom-6 right-6 w-2 h-2 border-2 border-blue-400 bg-transparent rounded-full"></div>
</div>
<!-- Timeline Scrubber -->
<div class="mt-4 p-3 bg-white/5 border border-white/10 rounded-lg">
<div class="flex items-center gap-3 mb-2">
<span class="text-xs text-slate-400 font-geist">0s</span>
<div class="flex-1 relative">
<div class="h-2 bg-white/10 rounded-full">
<div class="h-2 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full w-3/4"></div>
</div>
<!-- Multiple keyframe markers -->
<div class="absolute top-0 left-0 w-1 h-2 bg-blue-500 rounded-full"></div>
<div class="absolute top-0 left-1/6 w-1 h-2 bg-cyan-500 rounded-full"></div>
<div class="absolute top-0 left-1/3 w-1 h-2 bg-emerald-500 rounded-full"></div>
<div class="absolute top-0 left-1/2 w-1 h-2 bg-purple-500 rounded-full"></div>
<div class="absolute top-0 left-2/3 w-1 h-2 bg-red-500 rounded-full"></div>
<!-- Playhead -->
<div class="absolute top-0 left-3/4 w-4 h-4 bg-blue-500 rounded-full -mt-1 border-2 border-white shadow-lg"></div>
</div>
<span class="text-xs text-slate-400 font-geist">3s</span>
</div>
<div class="flex items-center justify-between text-xs text-slate-400">
<div class="flex items-center gap-2">
<span class="font-geist">Current: 2.3s</span>
<div class="h-3 w-px bg-white/20"></div>
<span class="font-geist text-slate-500">FPS: 60</span>
</div>
<div class="flex items-center gap-1">
<button class="px-2 py-0.5 rounded bg-white/5 hover:bg-white/10 text-[10px] font-geist">Loop</button>
<button class="px-2 py-0.5 rounded bg-blue-600 text-white text-[10px] font-geist">Live</button>
</div>
</div>
</div>
</div>
</main>
<!-- Right panel - Animation Properties -->
<aside class="hidden md:block md:col-span-3 bg-black/30 border-white/10 border-l pt-3 pr-3 pb-3 pl-3">
<div class="mb-3 flex items-center justify-between">
<div class="inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs font-medium text-slate-300 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sliders-horizontal" class="lucide lucide-sliders-horizontal h-3.5 w-3.5"><line x1="21" x2="14" y1="4" y2="4" class=""></line><line x1="10" x2="3" y1="4" y2="4" class=""></line><line x1="21" x2="12" y1="12" y2="12" class=""></line><line x1="8" x2="3" y1="12" y2="12" class=""></line><line x1="21" x2="16" y1="20" y2="20" class=""></line><line x1="12" x2="3" y1="20" y2="20" class=""></line><line x1="14" x2="14" y1="2" y2="6" class=""></line><line x1="8" x2="8" y1="10" y2="14" class=""></line><line x1="16" x2="16" y1="18" y2="22" class=""></line></svg>
Properties
</div>
<div class="flex gap-1">
<button class="rounded-md border border-white/10 bg-white/5 p-1 text-slate-300 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path><path d="M21 3v5h-5" class=""></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path><path d="M8 16H3v5" class=""></path></svg>
</button>
<button class="rounded-md border border-white/10 bg-white/5 p-1 text-slate-300 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="more-horizontal" class="lucide lucide-more-horizontal h-3 w-3"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
</button>
</div>
</div>
<!-- Property Tabs -->
<div class="flex gap-1 mb-3">
<button class="px-2 py-1 text-xs bg-blue-600 text-white rounded font-geist">Animation</button>
<button class="px-2 py-1 text-xs bg-white/5 text-slate-400 hover:bg-white/10 rounded font-geist">Style</button>
<button class="px-2 py-1 text-xs bg-white/5 text-slate-400 hover:bg-white/10 rounded font-geist">Events</button>
</div>
<div class="space-y-3 h-[480px] overflow-y-auto">
<!-- Selected Element Info -->
<div class="bg-white/5 rounded-lg p-3">
<div class="flex items-center justify-between mb-2">
<span class="text-xs text-slate-300 font-geist">Selected Element</span>
<span class="text-xs text-blue-400 font-geist">Hero Card</span>
</div>
<div class="text-[10px] text-slate-500 space-y-1 font-geist">
<div class="flex justify-between">
<span>Position:</span>
<span>24, 24</span>
</div>
<div class="flex justify-between">
<span>Size:</span>
<span>400 × 160</span>
</div>
<div class="flex justify-between">
<span>Opacity:</span>
<span>100%</span>
</div>
</div>
</div>
<!-- Animation Type -->
<div class="bg-white/5 rounded-lg p-3 space-y-3">
<div class="mb-2 flex items-center justify-between text-xs">
<span class="text-slate-300 font-geist">Animation Type</span>
<span class="rounded-md bg-white/5 px-2 py-0.5 text-[10px] text-blue-400 font-geist">Fade In</span>
</div>
<div class="grid grid-cols-2 gap-2 text-[11px]">
<button class="rounded-md border border-white/10 bg-blue-600 px-2 py-1 text-white font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="eye" class="lucide lucide-eye mr-1 inline h-3 w-3"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>Fade
</button>
<button class="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300 hover:bg-white/10 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="move" class="lucide lucide-move mr-1 inline h-3 w-3"><path d="M12 2v20" class=""></path><path d="m15 19-3 3-3-3" class=""></path><path d="m19 9 3 3-3 3" class=""></path><path d="M2 12h20" class=""></path><path d="m5 9-3 3 3 3" class=""></path><path d="m9 5 3-3 3 3" class=""></path></svg>Slide
</button>
<button class="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300 hover:bg-white/10 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="rotate-cw" class="lucide lucide-rotate-cw mr-1 inline h-3 w-3"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" class=""></path><path d="M21 3v5h-5" class=""></path></svg>Rotate
</button>
<button class="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300 hover:bg-white/10 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="zoom-in" class="lucide lucide-zoom-in mr-1 inline h-3 w-3"><circle cx="11" cy="11" r="8" class=""></circle><line x1="21" x2="16.65" y1="21" y2="16.65" class=""></line><line x1="11" x2="11" y1="8" y2="14" class=""></line><line x1="8" x2="14" y1="11" y2="11" class=""></line></svg>Scale
</button>
</div>
<!-- Direction controls for slide -->
<div class="text-[10px]">
<div class="text-slate-400 mb-1 font-geist">Direction</div>
<div class="flex gap-1">
<button class="p-1 rounded border border-white/10 bg-white/5 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><path d="m18 15-6-6-6 6" class=""></path></svg>
</button>
<button class="p-1 rounded border border-white/10 bg-white/5 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><path d="m6 9 6 6 6-6" class=""></path></svg>
</button>
<button class="p-1 rounded border border-white/10 bg-white/5 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><path d="m15 18-6-6 6-6" class=""></path></svg>
</button>
<button class="p-1 rounded border border-white/10 bg-white/5 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><path d="m9 18 6-6-6-6" class=""></path></svg>
</button>
</div>
</div>
</div>
<!-- Timing -->
<div class="bg-white/5 rounded-lg p-3 space-y-3">
<div class="mb-2 flex items-center justify-between text-xs">
<span class="text-slate-300 font-geist">Timing</span>
<button class="text-[10px] text-blue-400 hover:text-blue-300 font-geist">Reset</button>
</div>
<div class="space-y-3">
<div class="space-y-1">
<div class="flex items-center justify-between text-xs">
<span class="text-slate-300 font-geist">Duration</span>
<div class="flex items-center gap-1">
<input type="range" class="w-16 h-1 bg-white/10 rounded-full appearance-none slider" value="60" min="0" max="100">
<span class="text-slate-400 font-geist w-8 text-[10px]">1.2s</span>
</div>
</div>
</div>
<div class="space-y-1">
<div class="flex items-center justify-between text-xs">
<span class="text-slate-300 font-geist">Delay</span>
<div class="flex items-center gap-1">
<input type="range" class="w-16 h-1 bg-white/10 rounded-full appearance-none slider" value="15" min="0" max="100">
<span class="text-slate-400 font-geist w-8 text-[10px]">0.3s</span>
</div>
</div>
</div>
<div class="space-y-1">
<div class="flex items-center justify-between text-xs">
<span class="text-slate-300 font-geist">Easing</span>
<select class="bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] text-slate-400 font-geist">
<option>Ease Out</option>
<option>Ease In</option>
<option>Ease In Out</option>
<option>Linear</option>
<option>Bounce</option>
<option>Elastic</option>
</select>
</div>
</div>
</div>
</div>
<!-- Transform Properties -->
<div class="bg-white/5 rounded-lg p-3 space-y-3">
<div class="mb-2 flex items-center justify-between text-xs">
<span class="text-slate-300 font-geist">Transform</span>
<button class="text-[10px] text-slate-500 hover:text-slate-400 font-geist">Lock</button>
</div>
<div class="space-y-2">
<div class="grid grid-cols-2 gap-2 text-[10px]">
<div>
<div class="text-slate-400 mb-1 font-geist">X Position</div>
<input type="number" class="w-full bg-white/5 border border-white/10 rounded px-2 py-1 text-slate-300 font-geist" value="0">
</div>
<div class="">
<div class="text-slate-400 mb-1 font-geist">Y Position</div>
<input type="number" class="w-full bg-white/5 border border-white/10 rounded px-2 py-1 text-slate-300 font-geist" value="0">
</div>
</div>
<div class="grid grid-cols-2 gap-2 text-[10px]">
<div>
<div class="text-slate-400 mb-1 font-geist">Scale X</div>
<input type="number" class="w-full bg-white/5 border border-white/10 rounded px-2 py-1 text-slate-300 font-geist" value="1" step="0.1">
</div>
<div class="">
<div class="text-slate-400 mb-1 font-geist">Scale Y</div>
<input type="number" class="w-full bg-white/5 border border-white/10 rounded px-2 py-1 text-slate-300 font-geist" value="1" step="0.1">
</div>
</div>
<div class="text-[10px]">
<div class="text-slate-400 mb-1 font-geist">Rotation</div>
<div class="flex items-center gap-2">
<input type="range" class="flex-1 h-1 bg-white/10 rounded-full appearance-none slider" value="0" min="-180" max="180">
<span class="text-slate-400 font-geist w-8">0°</span>
</div>
</div>
</div>
</div>
<!-- Triggers -->
<div class="bg-white/5 rounded-lg p-3 space-y-3">
<div class="mb-2 flex items-center justify-between text-xs">
<span class="text-slate-300 font-geist">Triggers</span>
<div class="flex items-center gap-1">
<span class="rounded-md bg-white/5 px-2 py-0.5 text-[10px] text-slate-400 font-geist">2</span>
<button class="w-4 h-4 rounded border border-white/10 bg-white/5 hover:bg-white/10 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-2 h-2"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
</div>
</div>
<div class="space-y-2 text-[11px]">
<div class="flex items-center justify-between p-2 bg-white/5 rounded border border-white/10">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="mouse-pointer" class="lucide lucide-mouse-pointer w-3 h-3 text-blue-400"><path d="M12.586 12.586 19 19" class=""></path><path d="M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z" class=""></path></svg>
<span class="text-slate-300 font-geist">On Scroll</span>
</div>
<div class="flex items-center gap-1">
<input type="number" class="w-8 bg-white/5 border border-white/10 rounded px-1 text-slate-400 text-[9px] font-geist" value="50">
<span class="text-slate-500 text-[9px] font-geist">%</span>
<button class="w-3 h-3 rounded border border-red-500/50 bg-red-500/10 hover:bg-red-500/20 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-2 h-2 text-red-400"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
</button>
</div>
</div>
<div class="flex items-center justify-between p-2 bg-white/5 rounded border border-white/10">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock w-3 h-3 text-emerald-400"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
<span class="text-slate-300 font-geist">Auto Play</span>
</div>
<div class="flex items-center gap-1">
<select class="bg-white/5 border border-white/10 rounded px-1 text-[9px] text-slate-400 font-geist">
<option>On Load</option>
<option>After Delay</option>
<option>Manual</option>
</select>
<button class="w-3 h-3 rounded border border-red-500/50 bg-red-500/10 hover:bg-red-500/20 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-2 h-2 d=" m18="" 6="" 18"=""><path d="m6 6 12 12" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Advanced Options -->
<div class="bg-white/5 rounded-lg p-3 space-y-3">
<div class="mb-2 flex items-center justify-between text-xs">
<span class="text-slate-300 font-geist">Advanced</span>
<button class="text-[10px] text-slate-500 hover:text-slate-400 font-geist">Collapse</button>
</div>
<div class="space-y-2 text-[10px]">
<div class="flex items-center justify-between">
<span class="text-slate-400 font-geist">Loop Animation</span>
<button class="w-8 h-4 bg-white/10 rounded-full relative">
<div class="w-3 h-3 bg-white rounded-full absolute left-0.5 top-0.5 transition-transform"></div>
</button>
</div>
<div class="flex items-center justify-between">
<span class="text-slate-400 font-geist">Reverse on Complete</span>
<button class="w-8 h-4 bg-blue-600 rounded-full relative">
<div class="w-3 h-3 bg-white rounded-full absolute right-0.5 top-0.5 transition-transform"></div>
</button>
</div>
<div class="flex items-center justify-between">
<span class="text-slate-400 font-geist">Fill Mode</span>
<select class="bg-white/5 border border-white/10 rounded px-2 py-1 text-slate-400 font-geist">
<option>Forwards</option>
<option>Backwards</option>
<option>Both
</option></select>
</div>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="mt-4 flex gap-2">
<button class="flex-1 px-3 py-2 bg-blue-600 text-white rounded text-xs font-medium hover:bg-blue-500 font-geist">Apply Changes</button>
<button class="px-3 py-2 bg-white/5 text-slate-300 rounded text-xs font-medium border border-white/10 hover:bg-white/10 font-geist">Preview</button>
</div>
</aside>
</div>
</div>
</div>