All Prompts
All Prompts
codeeditormockupanimatedscrollingtailwindsyntaxui-componentui
Auto-Scrolling Code Editor Mockup
Анимированный UI-компонент: макет редактора кода с автоскроллингом. Идеален для демонстрации кода на лендингах, в документации или демо.
Prompt
<div class="sm:p-5 pt-4 pr-4 pb-4 pl-4 space-y-4">
<!-- Code Editor Window -->
<div class="relative rounded-xl ring-1 ring-inset ring-white/5 bg-gradient-to-br from-zinc-900/90 to-zinc-950/90 overflow-hidden">
<!-- Header -->
<div class="flex items-center justify-between px-3 py-2 border-b border-white/10 bg-neutral-900/80">
<div class="flex items-center gap-1.5 text-neutral-300">
<button class="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-white/5">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-left" class="lucide lucide-chevron-left h-3.5 w-3.5"><path d="m15 18-6-6 6-6" class=""></path></svg>
</button>
<button class="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-white/5">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-right" class="lucide lucide-chevron-right h-3.5 w-3.5"><path d="m9 18 6-6-6-6" class=""></path></svg>
</button>
</div>
<div class="flex-1 px-3">
<div class="mx-auto max-w-xs sm:max-w-sm rounded-md bg-neutral-800/60 px-3 py-1 text-center text-[10px] sm:text-xs text-neutral-400 ring-1 ring-white/5">automation.py</div>
</div>
<div class="flex items-center gap-1.5 text-neutral-400">
<button class="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-white/5">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" class="lucide lucide-minus h-3.5 w-3.5"><path d="M5 12h14" class=""></path></svg>
</button>
<button class="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-white/5">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect></svg>
</button>
<button class="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-white/5">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" class="lucide lucide-x h-3.5 w-3.5"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
</button>
</div>
</div>
<!-- Body -->
<div class="grid grid-cols-[42px_1fr]">
<!-- Sidebar -->
<aside class="hidden sm:flex flex-col items-center gap-3 py-4 border-r border-white/10">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10 text-neutral-300">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="file-code-2" class="lucide lucide-file-code-2 h-4 w-4"><path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" class=""></path><path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path><path d="m5 12-3 3 3 3" class=""></path><path d="m9 18 3-3-3-3" class=""></path></svg>
</span>
<span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10 text-neutral-300">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="search" class="lucide lucide-search h-4 w-4"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
</span>
<span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10 text-neutral-300">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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-4 w-4"><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>
</span>
</aside>
<!-- Code -->
<div class="p-4 sm:p-5">
<div class="relative ring-inset sm:p-4 overflow-hidden bg-black/40 ring-white/10 ring-1 rounded-lg pt-3 pr-3 pb-3 pl-3" style="height: 320px;">
<div class="absolute inset-x-0 top-0 h-10 bg-gradient-to-b from-white/5 to-transparent pointer-events-none z-10"></div>
<!-- Scrolling Code Container -->
<div class="overflow-hidden h-full relative">
<div class="font-geist-mono text-[12px] sm:text-[13px] leading-relaxed" style="animation: smoothCodeScroll 20s linear infinite;">
<!-- Original Code Lines -->
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">1</span>
<span><span class="text-purple-400">class</span> <span class="text-neutral-200">Automation</span>:</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">2</span>
<span class="whitespace-pre"><span class="text-purple-400"> def</span> <span class="text-purple-400">__init__</span>(self):</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">3</span>
<span class="whitespace-pre"> self.status = <span class="text-emerald-400">"idle"</span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">4</span>
<span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">5</span>
<span class="whitespace-pre"><span class="text-purple-400"> def</span> <span class="text-purple-400">run</span>(self, event):</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">6</span>
<span class="whitespace-pre"> <span class="text-purple-400">if</span> event == <span class="text-emerald-400">"threshold_reached"</span>:</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">7</span>
<span class="whitespace-pre"> self.status = <span class="text-emerald-400">"active"</span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">8</span>
<span class="whitespace-pre"> <span class="text-purple-400">return</span> <span class="text-emerald-400">"Automation triggered!"</span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">9</span>
<span class="whitespace-pre"> <span class="text-purple-400">else</span>:</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">10</span>
<span class="whitespace-pre"> <span class="text-purple-400">return</span> <span class="text-emerald-400">"No action taken."</span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">11</span>
<span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">12</span>
<span class="whitespace-pre"><span class="text-purple-400"> def</span> <span class="text-purple-400">get_status</span>(self):</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">13</span>
<span class="whitespace-pre"> <span class="text-purple-400">return</span> f<span class="text-emerald-400">"Status: {self.status}"</span></span>
</div>
<!-- Additional code lines for seamless loop -->
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">14</span>
<span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">15</span>
<span class="whitespace-pre"><span class="text-purple-400"> def</span> <span class="text-purple-400">execute_trade</span>(self, symbol, amount):</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">16</span>
<span class="whitespace-pre"> <span class="text-purple-400">try</span>:</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">17</span>
<span class="whitespace-pre"> result = self.api.place_order(symbol, amount)</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">18</span>
<span class="whitespace-pre"> <span class="text-purple-400">return</span> result</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">19</span>
<span class="whitespace-pre"> <span class="text-purple-400">except</span> Exception <span class="text-purple-400">as</span> e:</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">20</span>
<span class="whitespace-pre"> print(f<span class="text-emerald-400">"Error: {e}"</span>)</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">21</span>
<span class="whitespace-pre"> <span class="text-purple-400">return</span> <span class="text-emerald-400">None</span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">22</span>
<span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">23</span>
<span class="whitespace-pre"><span class="text-purple-400"> def</span> <span class="text-purple-400">analyze_market</span>(self):</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">24</span>
<span class="whitespace-pre"> data = self.fetch_market_data()</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">25</span>
<span class="whitespace-pre"> signals = self.process_indicators(data)</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">26</span>
<span class="whitespace-pre"> <span class="text-purple-400">return</span> signals</span>
</div>
</div>
</div>
<div class="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-white/5 to-transparent pointer-events-none z-10"></div>
<style>
@keyframes smoothCodeScroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
/* Pause animation on hover */
.relative:hover [style*="smoothCodeScroll"] {
animation-play-state: paused;
}
</style>
</div>
</div>
</div>
</div>
</div>