All Prompts
All Prompts
herosectionuitailwindinteractivebackground
Workflow Canvas Hero with AI Generator UI
Интерактивный UI-компонент "Workflow Canvas Hero" с генератором изображений на базе AI. Демонстрирует процесс создания изображений с помощью промптов и предпросмотра. Идеально для интерактивных демо.
Prompt
<div class="canvas"
style="--bg-canvas: #0d0e11; --bg-dot: #25262a; --panel-base: #1a1c20; --panel-elevated: #222429; --panel-inset: #131417; --border-subtle: #2d2f34; --text-primary: #e2e4e9; --text-secondary: #8b8e96; --text-tertiary: #5b5c61; --accent-green: #8cf1b4; --accent-blue: #60a5fa; --accent-pink: #ff629a; --accent-yellow: #f1d84a; --accent-red: #f87171; position: relative; width: 100%; height: 100vh; background-color: var(--bg-canvas); background-image: radial-gradient(var(--bg-dot) 1px, transparent 0); background-size: 32px 32px; font-family: 'Inter', sans-serif; overflow: hidden; color: var(--text-primary);">
<style>
.node-glow-blue::before {
content: '';
position: absolute;
bottom: -15px;
left: 10%;
width: 80%;
height: 30px;
filter: blur(24px);
z-index: -1;
opacity: 0.4;
border-radius: 50%;
background: var(--accent-blue);
}
.node-glow-green::before {
content: '';
position: absolute;
bottom: -15px;
left: 10%;
width: 80%;
height: 30px;
filter: blur(24px);
z-index: -1;
opacity: 0.4;
border-radius: 50%;
background: var(--accent-green);
}
.wire {
fill: none;
stroke: #3a3f4b;
stroke-width: 1.5;
stroke-linecap: round;
}
.wire.active {
stroke: var(--accent-blue);
filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.4));
}
.blob {
position: absolute;
border-radius: 50%;
mix-blend-mode: screen;
filter: blur(40px);
}
</style>
<svg class="absolute inset-0 w-full h-full pointer-events-none z-0">
<path class="wire active" d="M 460 390 C 530 390, 530 275, 600 275"></path>
<path class="wire active" d="M 920 240 C 1000 240, 1000 200, 1080 200"></path>
<path class="wire" d="M 920 310 C 980 310, 950 420, 800 420" stroke-dasharray="4 4" opacity="0.3"></path>
</svg>
<nav class="absolute top-6 left-6 right-6 flex justify-between items-start z-50">
<div class="flex gap-3 items-center">
<div
class="w-10 h-10 bg-[var(--panel-base)] border border-[var(--border-subtle)] rounded-xl flex items-center justify-center shadow-xl">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
</div>
<div class="flex bg-[var(--panel-base)] border border-[var(--border-subtle)] rounded-xl p-1 shadow-xl">
<button class="px-4 py-2 text-xs font-medium bg-[var(--panel-elevated)] text-[var(--text-primary)] rounded-md">Workflow</button>
<button class="px-4 py-2 text-xs font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]">Edit</button>
<button class="px-4 py-2 text-xs font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]">Help</button>
</div>
</div>
<div class="flex gap-3 items-center">
<div
class="flex items-center gap-2 bg-[var(--panel-base)] border border-[var(--border-subtle)] rounded-xl px-3 py-2 shadow-xl">
<div class="w-2 h-2 rounded-full bg-[var(--accent-green)] shadow-[0_0_8px_var(--accent-green)]"></div>
<span class="text-[10px] text-[var(--text-secondary)] uppercase tracking-wider font-bold">Running</span>
</div>
<button class="flex items-center gap-2 bg-[var(--panel-base)] border border-[var(--border-subtle)] text-[var(--text-primary)] text-xs font-medium px-4 py-2 rounded-xl shadow-xl hover:bg-[var(--panel-elevated)] transition-colors">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13"></path></svg> Share
</button>
<button class="flex items-center gap-2 bg-[var(--text-primary)] text-black text-xs font-bold px-4 py-2 rounded-xl shadow-xl hover:opacity-90 transition-opacity">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg> Queue
</button>
</div>
</nav>
<div class="absolute text-xs text-[var(--text-primary)] flex items-center gap-2" style="left: 120px; top: 250px;">
<div class="w-2 h-2 rounded-full bg-white"></div> Prompt
</div>
<article
class="absolute bg-[var(--panel-base)] border border-[var(--border-subtle)] rounded-2xl w-[340px] shadow-2xl z-10"
style="left: 120px; top: 280px;">
<div class="p-4 flex justify-between border-b border-white/5">
<div class="flex items-center gap-2 text-sm font-medium">
<div class="w-2 h-2 rounded-full bg-[var(--accent-green)]"></div> Positive
</div>
</div>
<div class="p-4 space-y-4">
<div class="text-xs leading-relaxed text-[var(--text-primary)] italic">"A black bear with a pink snout, minimalist
style, soft gradients, clear blue sky"</div>
<div
class="bg-[var(--panel-inset)] border border-[var(--border-subtle)] rounded-lg p-3 h-20 text-xs text-[var(--text-secondary)]">
Type what you want to get</div>
<div class="flex justify-end relative">
<div
class="bg-[var(--accent-green)] text-black text-[10px] font-bold px-3 py-1.5 rounded flex items-center gap-2 cursor-pointer uppercase tracking-tight">
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor">
<path d="M5 3l14 9-14 9V3z"></path>
</svg> Generate
</div>
<div
class="absolute -right-9 top-1/2 -translate-y-1/2 w-3 h-3 rounded-full border-2 border-[var(--accent-blue)] bg-[var(--accent-blue)]">
</div>
</div>
</div>
</article>
<div class="absolute text-xs text-[var(--text-primary)] flex items-center gap-2" style="left: 600px; top: 150px;">
<div class="w-2 h-2 rounded-full bg-white"></div> Generator
</div>
<article
class="absolute bg-[var(--panel-base)] border border-[var(--border-subtle)] rounded-2xl w-[320px] shadow-2xl z-10 node-glow-blue"
style="left: 600px; top: 180px;">
<div class="p-4 pt-6 space-y-6">
<div class="relative flex justify-between items-center">
<div class="absolute -left-9 w-3 h-3 rounded-full border-2 border-[var(--border-subtle)] bg-[var(--bg-canvas)]">
</div>
<span class="text-xs text-[var(--text-secondary)] flex items-center gap-2"><div class="w-1.5 h-1.5 rounded-full bg-[var(--accent-yellow)]"></div> model</span>
</div>
<div class="relative flex justify-between items-center">
<div class="absolute -left-9 w-3 h-3 rounded-full border-2 border-[var(--accent-blue)] bg-[var(--accent-blue)]">
</div>
<span class="text-xs text-[var(--text-secondary)] flex items-center gap-2"><div class="w-1.5 h-1.5 rounded-full bg-[var(--accent-green)]"></div> positive</span>
</div>
<div class="relative flex justify-between items-center mb-4">
<div class="absolute -left-9 w-3 h-3 rounded-full border-2 border-[var(--border-subtle)] bg-[var(--bg-canvas)]">
</div>
<span class="text-xs text-[var(--text-secondary)] flex items-center gap-2"><div class="w-1.5 h-1.5 rounded-full bg-[var(--accent-red)]"></div> negative</span>
</div>
<div class="space-y-3">
<div class="flex justify-between items-center text-[10px] text-[var(--text-secondary)] uppercase">
<span>Randomness</span>
<div
class="bg-[var(--panel-inset)] px-3 py-1.5 rounded border border-[var(--border-subtle)] text-[var(--text-primary)] w-28 flex justify-between">
12345 <span>▾</span></div>
</div>
<div class="flex justify-between items-center text-[10px] text-[var(--text-secondary)] uppercase">
<span>Quality steps</span>
<div
class="bg-[var(--panel-inset)] px-3 py-1.5 rounded border border-[var(--border-subtle)] text-[var(--text-primary)] w-28 flex justify-center gap-4">
<span>‹</span> 30 <span>›</span>
</div>
</div>
</div>
<div class="relative pt-2">
<div
class="absolute -right-9 top-0 w-3 h-3 rounded-full border-2 border-[var(--accent-blue)] bg-[var(--accent-blue)]">
</div>
<div class="text-right text-xs text-[var(--text-secondary)] flex items-center justify-end gap-2">
<div class="w-1.5 h-1.5 rounded-full bg-[var(--accent-blue)]"></div> image
</div>
</div>
</div>
</article>
<div class="absolute text-xs text-[var(--text-primary)] flex items-center gap-2" style="left: 1080px; top: 110px;">
<div class="w-2 h-2 rounded-full bg-white"></div> Preview
</div>
<article
class="absolute bg-[var(--panel-base)] border border-[var(--border-subtle)] rounded-2xl w-[360px] shadow-2xl z-10 node-glow-green"
style="left: 1080px; top: 140px;">
<div class="p-3">
<div class="relative h-[300px] bg-black rounded-xl overflow-hidden mb-4">
<div class="absolute inset-0 bg-[#0d1117] filter blur-[40px]">
<div class="blob w-1/2 h-1/2 top-10 left-10 bg-[#ff7eb3]"></div>
<div class="blob w-2/3 h-2/3 bottom-5 right-5 bg-[#60a5fa]"></div>
<div class="blob w-1/3 h-1/3 top-1/2 left-1/2 bg-[#facc15] opacity-60"></div>
</div>
<div
class="absolute -left-6 top-10 w-3 h-3 rounded-full border-2 border-[var(--accent-blue)] bg-[var(--accent-blue)]">
</div>
</div>
<div class="px-1">
<div class="text-sm font-medium mb-1">Final Result</div>
<p class="text-[11px] text-[var(--text-secondary)] leading-relaxed">Minimalist abstract render with soft
gradients and smooth shapes against a dark space.</p>
</div>
<div
class="mt-4 flex bg-[var(--panel-elevated)] border border-[var(--border-subtle)] rounded-xl p-1 justify-between">
<div class="flex border-r border-[var(--border-subtle)] pr-1">
<button class="p-2 text-[var(--text-secondary)] hover:text-white"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"></path></svg></button>
<button class="p-2 text-[var(--text-secondary)] hover:text-white"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button>
</div>
<div class="flex gap-1">
<button class="px-2 text-[10px] font-bold">2x ▾</button>
<button class="px-2 text-[10px] font-bold">PNG ▾</button>
<button class="p-2 text-[var(--text-secondary)] hover:text-white"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"></path></svg></button>
</div>
</div>
</div>
</article>
<div
class="absolute z-[60] p-2 bg-[var(--panel-base)] border border-[var(--border-subtle)] rounded-xl w-56 shadow-2xl flex flex-col"
style="left: 780px; top: 400px;">
<div class="flex items-center gap-3 p-2 mb-2">
<div
class="w-8 h-8 rounded-lg bg-[var(--panel-elevated)] border border-[var(--border-subtle)] flex items-center justify-center text-[var(--accent-blue)]">
+</div>
<div>
<div class="text-xs font-bold">Add node</div>
<div class="text-[9px] text-[var(--text-tertiary)] uppercase">Core Action</div>
</div>
</div>
<div class="h-px bg-[var(--border-subtle)] my-1"></div>
<div
class="flex items-center justify-between p-2 text-xs text-[var(--text-secondary)] hover:bg-white/5 rounded-lg cursor-pointer">
<span>Example data</span><span class="font-mono text-[9px] opacity-50">⌘D</span>
</div>
<div
class="flex items-center justify-between p-2 text-xs text-[var(--text-secondary)] hover:bg-white/5 rounded-lg cursor-pointer">
<span>Copy link</span><span class="font-mono text-[9px] opacity-50">⌘C</span>
</div>
<div
class="flex items-center justify-between p-2 text-xs text-[var(--accent-red)] hover:bg-red-500/10 rounded-lg cursor-pointer mt-1 border-t border-[var(--border-subtle)] pt-2">
<span>Remove</span>
</div>
</div>
<div class="absolute pointer-events-none z-[100] flex flex-col items-start" id="paul-cursor"
style="left: 450px; top: 360px;">
<svg class="drop-shadow-lg" width="18" height="18" viewBox="0 0 24 24">
<path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" fill="var(--accent-yellow)" stroke="black" stroke-width="1.5">
</path>
</svg>
<div class="bg-[var(--accent-yellow)] text-black text-[10px] font-bold px-2 py-0.5 rounded ml-3 -mt-1 shadow-lg">
Paul</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
<script>
document.addEventListener('mousemove', (e) => {
const cursor = document.getElementById('paul-cursor');
if(cursor) {
const x = 450 + (e.clientX - window.innerWidth/2) * 0.05;
const y = 360 + (e.clientY - window.innerHeight/2) * 0.05;
cursor.style.transform = `translate(${x-450}px, ${y-360}px)`;
}
});
</script>
</div>