All Prompts
All Prompts
uiappdashboardmusictailwindinteractiveanimated
AI Music Generator Window UI
UI окно генератора музыки с темной темой: навигация, поле ввода промпта, кнопки, список треков с волнами. Для современных демо-приложений.
Prompt
<div class="z-30 group/window w-full max-w-6xl mt-16 mr-auto mb-12 ml-auto pr-6 pl-6 relative">
<style>
@keyframes equalizer {
0%,
100% {
height: 20%;
opacity: 0.5;
}
50% {
height: 100%;
opacity: 1;
}
}
.animate-eq {
animation: equalizer 1.2s ease-in-out infinite;
}
.delay-100 {
animation-delay: 0.1s;
}
.delay-200 {
animation-delay: 0.2s;
}
.delay-300 {
animation-delay: 0.3s;
}
.delay-75 {
animation-delay: 0.075s;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
</style>
<!-- Main Window Container -->
<div
class="relative bg-[#0A0A0A]/90 border border-white/[0.08] rounded-2xl backdrop-blur-2xl shadow-[0_20px_60px_-15px_rgba(0,0,0,0.8)] overflow-hidden animate-fade-in transition-all duration-500 hover:border-white/10 ring-1 ring-white/5">
<!-- Ambient Glows -->
<div
class="absolute -top-24 -left-24 w-96 h-96 bg-cyan-500/10 rounded-full blur-[100px] pointer-events-none opacity-40 mix-blend-screen animate-pulse">
</div>
<div
class="absolute -bottom-24 -right-24 w-96 h-96 bg-purple-500/10 rounded-full blur-[100px] pointer-events-none opacity-40 mix-blend-screen animate-pulse"
style="animation-delay: 2s"></div>
<!-- Window Header -->
<div class="relative flex items-center justify-between px-6 py-4 border-b border-white/[0.06] bg-white/[0.02]">
<div class="flex items-center gap-5">
<!-- Window Controls -->
<div class="flex gap-2 group/controls opacity-80 hover:opacity-100 transition-opacity">
<div
class="w-3 h-3 rounded-full bg-[#FF5F57] shadow-sm border border-black/10 group-hover/controls:bg-[#FF5F57] transition-colors relative overflow-hidden">
<div class="absolute inset-0 bg-black/10 opacity-0 group-hover/controls:opacity-100 transition-opacity">
</div>
</div>
<div
class="w-3 h-3 rounded-full bg-[#FEBC2E] shadow-sm border border-black/10 group-hover/controls:bg-[#FEBC2E] transition-colors relative overflow-hidden">
<div class="absolute inset-0 bg-black/10 opacity-0 group-hover/controls:opacity-100 transition-opacity">
</div>
</div>
<div
class="w-3 h-3 rounded-full bg-[#28C840] shadow-sm border border-black/10 group-hover/controls:bg-[#28C840] transition-colors relative overflow-hidden">
<div class="absolute inset-0 bg-black/10 opacity-0 group-hover/controls:opacity-100 transition-opacity">
</div>
</div>
</div>
<div class="h-4 w-[1px] bg-white/10"></div>
<!-- Breadcrumbs -->
<div class="flex items-center gap-2 text-xs font-medium tracking-wide select-none">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-400 font-semibold drop-shadow-sm">Sonai Studio</span>
<span class="text-slate-700">/</span>
<span class="text-slate-300 hover:text-white transition-colors cursor-default">Generator</span>
</div>
</div>
<!-- Status & Version -->
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 px-2.5 py-1 rounded-full bg-emerald-500/5 border border-emerald-500/10">
<div class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
</div>
<span class="text-[10px] uppercase tracking-wider font-bold text-emerald-500/90">Online</span>
</div>
<div class="text-[10px] text-slate-500 font-mono opacity-60">v2.4.0</div>
</div>
</div>
<!-- Main Body -->
<div class="flex flex-col md:flex-row h-[560px]">
<!-- Sidebar -->
<div
class="w-full md:w-64 border-r border-white/[0.06] bg-black/20 p-4 hidden md:flex flex-col gap-1 z-10 backdrop-blur-md">
<div class="text-[10px] font-bold text-slate-600 uppercase tracking-widest mb-4 px-3 mt-2">
Menu
</div>
<!-- Nav Items -->
<a href="#"
class="group flex items-center gap-3 px-3 py-2.5 rounded-lg bg-cyan-500/10 text-cyan-400 text-sm font-medium border border-cyan-500/20 shadow-[0_0_15px_-3px_rgba(6,182,212,0.15)] relative overflow-hidden">
<div
class="absolute inset-0 bg-gradient-to-r from-cyan-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
</div>
<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="wand-2"
class="lucide lucide-wand-2 w-4 h-4 relative z-10">
<path
d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"
class=""></path>
<path d="m14 7 3 3" class=""></path>
<path d="M5 6v4" class=""></path>
<path d="M19 14v4" class=""></path>
<path d="M10 2v2" class=""></path>
<path d="M7 8H3" class=""></path>
<path d="M21 16h-4" class=""></path>
<path d="M11 3H9" class=""></path>
</svg>
<span class="relative z-10">Generator</span>
</a>
<a href="#"
class="group flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:text-slate-100 hover:bg-white/5 transition-all text-sm font-medium">
<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="library"
class="lucide lucide-library w-4 h-4 group-hover:text-cyan-400 transition-colors">
<path d="m16 6 4 14" class=""></path>
<path d="M12 6v14" class=""></path>
<path d="M8 8v12" class=""></path>
<path d="M4 4v16" class=""></path>
</svg>
Library
</a>
<a href="#"
class="group flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:text-slate-100 hover:bg-white/5 transition-all text-sm font-medium">
<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="compass"
class="lucide lucide-compass w-4 h-4 group-hover:text-purple-400 transition-colors">
<path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"
class=""></path>
<circle cx="12" cy="12" r="10" class=""></circle>
</svg>
Discover
</a>
<div class="mt-auto">
<div
class="relative p-4 rounded-xl bg-gradient-to-br from-cyan-900/10 to-blue-900/10 border border-white/5 overflow-hidden group/card transition-all hover:border-white/10 hover:bg-white/5">
<div
class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full group-hover/card:animate-[shimmer_2s_infinite]">
</div>
<div class="relative z-10">
<div class="flex justify-between items-start mb-2">
<div class="text-xs font-semibold text-white tracking-tight">Pro Plan</div>
<div
class="text-[10px] px-1.5 py-0.5 rounded bg-gradient-to-r from-cyan-500 to-blue-500 text-white font-bold tracking-wide shadow-lg shadow-cyan-500/20">
NEW</div>
</div>
<div class="text-[10px] text-slate-400 mb-3 leading-relaxed">
Unlock unlimited generations and stem separation.
</div>
<button class="w-full py-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-white text-[10px] font-semibold transition-all hover:scale-[1.02] active:scale-[0.98] shadow-sm">
Upgrade Now
</button>
</div>
</div>
</div>
</div>
<!-- Content Area -->
<div class="flex-1 flex flex-col relative bg-gradient-to-b from-transparent to-black/20">
<!-- Input Section -->
<div class="p-6 md:p-8">
<h2 class="text-lg font-medium text-white mb-4 tracking-tight flex items-center gap-2">
Create New Track
<span class="text-[10px] flex-none font-semibold text-cyan-400 bg-cyan-500/10 border-cyan-500/20 border rounded-full pt-0.5 pr-2 pb-0.5 pl-2">AI Powered</span>
</h2>
<div class="relative group/input">
<!-- Glowing ring effect on focus -->
<div
class="absolute -inset-[1px] bg-gradient-to-r from-cyan-500 to-purple-500 rounded-xl opacity-0 group-focus-within/input:opacity-50 transition-opacity duration-500 blur-sm">
</div>
<textarea class="relative w-full bg-[#050505] border border-white/10 rounded-xl p-4 text-slate-200 text-sm font-light focus:outline-none focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/20 transition-all resize-none h-32 placeholder:text-slate-600 shadow-inner leading-relaxed" placeholder="Describe your sound (e.g., 'Lo-fi hip hop beat with jazzy piano chords and rain ambience')..."></textarea>
<div class="absolute bottom-3 right-3 flex items-center gap-3">
<span class="text-[10px] text-slate-600 font-medium hidden sm:block">⌘ + Enter to generate</span>
<button class="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-wide shadow-lg shadow-cyan-500/20 transition-all hover:shadow-cyan-500/40 hover:-translate-y-0.5 active:translate-y-0 flex items-center gap-2 group/btn">
<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="sparkles" class="lucide lucide-sparkles w-3.5 h-3.5 group-hover/btn:rotate-12 transition-transform duration-300"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
Generate
</button>
</div>
</div>
<!-- Settings Chips -->
<div class="flex flex-wrap gap-2 mt-4">
<button class="group flex items-center gap-2 px-3 py-1.5 rounded-full border border-white/10 bg-white/5 text-xs text-slate-300 hover:bg-white/10 hover:border-white/20 transition-all whitespace-nowrap active:scale-95">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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.5 h-3.5 text-cyan-400"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
<span class="opacity-70 group-hover:opacity-100 transition-opacity">Duration:</span>
<span class="font-medium text-white">3:00</span>
</button>
<button class="group flex items-center gap-2 px-3 py-1.5 rounded-full border border-white/10 bg-white/5 text-xs text-slate-300 hover:bg-white/10 hover:border-white/20 transition-all whitespace-nowrap active:scale-95">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="music" class="lucide lucide-music w-3.5 h-3.5 text-purple-400"><path d="M9 18V5l12-2v13" class=""></path><circle cx="6" cy="18" r="3" class=""></circle><circle cx="18" cy="16" r="3" class=""></circle></svg>
<span class="opacity-70 group-hover:opacity-100 transition-opacity">Style:</span>
<span class="font-medium text-white">Electronic</span>
</button>
<button class="group flex items-center gap-2 px-3 py-1.5 rounded-full border border-white/10 bg-white/5 text-xs text-slate-300 hover:bg-white/10 hover:border-white/20 transition-all whitespace-nowrap active:scale-95">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="activity" class="lucide lucide-activity w-3.5 h-3.5 text-emerald-400"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" class=""></path></svg>
<span class="opacity-70 group-hover:opacity-100 transition-opacity">BPM:</span>
<span class="font-medium text-white">128</span>
</button>
<button class="group flex items-center gap-2 px-3 py-1.5 rounded-full border border-dashed border-white/10 bg-transparent text-xs text-slate-500 hover:text-slate-300 hover:border-white/30 transition-all whitespace-nowrap">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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 w-3.5 h-3.5"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
Add Parameter
</button>
</div>
</div>
<!-- Recent List -->
<div class="flex-1 border-t border-white/[0.06] bg-black/20 overflow-hidden flex flex-col">
<div
class="px-6 py-3 border-b border-white/[0.04] bg-white/[0.01] backdrop-blur-sm flex justify-between items-center">
<div class="text-[10px] font-bold text-slate-600 uppercase tracking-widest">
Recently Generated
</div>
<button class="text-[10px] text-cyan-500 hover:text-cyan-400 font-medium transition-colors hover:underline decoration-cyan-500/30">View All</button>
</div>
<div class="flex-1 overflow-y-auto p-4 space-y-2 custom-scrollbar">
<!-- Track 1 -->
<div
class="group/track relative flex items-center justify-between p-3 rounded-xl hover:bg-white/[0.03] border border-transparent hover:border-white/[0.05] transition-all duration-300 cursor-pointer overflow-hidden">
<!-- Hover Gradient Background -->
<div
class="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-transparent opacity-0 group-hover/track:opacity-100 transition-opacity duration-500 pointer-events-none">
</div>
<div class="flex items-center gap-4 relative z-10">
<div
class="relative w-12 h-12 rounded-lg bg-slate-800 flex items-center justify-center text-white overflow-hidden shadow-lg group-hover/track:scale-105 transition-transform duration-300 ring-1 ring-white/5">
<div class="absolute inset-0 bg-gradient-to-br from-purple-600 to-blue-600 opacity-80"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
stroke="none"
class="lucide lucide-play w-5 h-5 relative z-10 text-white group-hover/track:scale-110 transition-transform">
<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>
</div>
<div>
<div class="text-sm font-medium text-slate-200 group-hover/track:text-white transition-colors">
Neon Night Drive
</div>
<div class="flex items-center gap-2 mt-0.5">
<span class="text-[10px] px-1.5 py-0.5 rounded bg-purple-500/10 text-purple-400 border border-purple-500/20 shadow-sm shadow-purple-900/20">Synthwave</span>
<span class="text-[10px] text-slate-500">124 BPM</span>
</div>
</div>
</div>
<div class="flex items-center gap-6 relative z-10 text-slate-500">
<!-- Animated Waveform -->
<div
class="hidden sm:flex items-end gap-1 h-6 w-24 opacity-60 group-hover/track:opacity-100 transition-opacity">
<div
class="w-1 bg-cyan-500/50 rounded-full animate-eq delay-75 h-full shadow-[0_0_8px_rgba(6,182,212,0.3)]">
</div>
<div
class="w-1 bg-cyan-500/50 rounded-full animate-eq delay-200 h-2/3 shadow-[0_0_8px_rgba(6,182,212,0.3)]">
</div>
<div
class="w-1 bg-cyan-500/50 rounded-full animate-eq delay-100 h-1/3 shadow-[0_0_8px_rgba(6,182,212,0.3)]">
</div>
<div
class="w-1 bg-cyan-500/50 rounded-full animate-eq delay-300 h-3/4 shadow-[0_0_8px_rgba(6,182,212,0.3)]">
</div>
<div
class="w-1 bg-cyan-500/50 rounded-full animate-eq delay-75 h-1/2 shadow-[0_0_8px_rgba(6,182,212,0.3)]">
</div>
<div
class="w-1 bg-cyan-500/50 rounded-full animate-eq delay-200 h-2/3 shadow-[0_0_8px_rgba(6,182,212,0.3)]">
</div>
<div
class="w-1 bg-cyan-500/50 rounded-full animate-eq delay-100 h-full shadow-[0_0_8px_rgba(6,182,212,0.3)]">
</div>
<div
class="w-1 bg-cyan-500/50 rounded-full animate-eq delay-300 h-1/3 shadow-[0_0_8px_rgba(6,182,212,0.3)]">
</div>
</div>
<span class="text-xs font-mono group-hover/track:text-slate-300 transition-colors">2:45</span>
<button class="p-2 rounded-lg hover:bg-white/10 hover:text-white transition-all transform hover:scale-110 active:scale-95 group/download">
<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="download" class="lucide lucide-download w-4 h-4 group-hover/download:text-cyan-400 transition-colors"><path d="M12 15V3" class=""></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="m7 10 5 5 5-5" class=""></path></svg>
</button>
</div>
</div>
<!-- Track 2 -->
<div
class="group/track relative flex items-center justify-between p-3 rounded-xl hover:bg-white/[0.03] border border-transparent hover:border-white/[0.05] transition-all duration-300 cursor-pointer overflow-hidden">
<!-- Hover Gradient Background -->
<div
class="absolute inset-0 bg-gradient-to-r from-emerald-500/5 to-transparent opacity-0 group-hover/track:opacity-100 transition-opacity duration-500 pointer-events-none">
</div>
<div class="flex items-center gap-4 relative z-10">
<div
class="relative w-12 h-12 rounded-lg bg-slate-800 flex items-center justify-center text-white overflow-hidden shadow-lg group-hover/track:scale-105 transition-transform duration-300 ring-1 ring-white/5">
<div class="absolute inset-0 bg-gradient-to-br from-emerald-600 to-teal-600 opacity-80"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
stroke="none"
class="lucide lucide-play w-5 h-5 relative z-10 text-white group-hover/track:scale-110 transition-transform">
<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>
</div>
<div>
<div class="text-sm font-medium text-slate-200 group-hover/track:text-white transition-colors">
Forest Ambience
</div>
<div class="flex items-center gap-2 mt-0.5">
<span class="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 shadow-sm shadow-emerald-900/20">Nature</span>
<span class="text-[10px] text-slate-500">Ambient</span>
</div>
</div>
</div>
<div class="flex items-center gap-6 relative z-10 text-slate-500">
<!-- Static Waveform -->
<div
class="hidden sm:flex items-center gap-1 h-6 w-24 opacity-30 group-hover/track:opacity-60 transition-opacity">
<div class="w-1 bg-slate-500 rounded-full h-1/3"></div>
<div class="w-1 bg-slate-500 rounded-full h-2/3"></div>
<div class="w-1 bg-slate-500 rounded-full h-1/2"></div>
<div class="w-1 bg-slate-500 rounded-full h-3/4"></div>
<div class="w-1 bg-slate-500 rounded-full h-full"></div>
<div class="w-1 bg-slate-500 rounded-full h-1/2"></div>
<div class="w-1 bg-slate-500 rounded-full h-1/4"></div>
<div class="w-1 bg-slate-500 rounded-full h-1/3"></div>
</div>
<span class="text-xs font-mono group-hover/button class=" p-2="" rounded-lg="" hover:bg-white="" 10="" hover:text-white="" transition-all="" transform="" hover:scale-110="" active:scale-95="" group="" download"="">
<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="download" class="lucide lucide-download w-4 h-4 group-hover/download:text-emerald-400 transition-colors"><path d="M12 15V3" class=""></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="m7 10 5 5 5-5" class=""></path></svg>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>