All Prompts
All Prompts
featuretailwindresponsiveanimatedmarketingcta
Production Optimization Feature Block
Блок с оптимизацией производства: 2 колонки, 3D-анимация, CTA. Tailwind CSS. Для страниц продукта/маркетинга, объясняющих тех. преимущества.
Prompt
<div class="max-w-7xl grid grid-cols-1 lg:grid-cols-2 gap-16 pt-10 pl-10 pr-10 gap-x-16 gap-y-16 items-center mx-auto my-24">
<!-- Left Text Content -->
<div class="flex flex-col justify-center animate-on-scroll">
<h3 class="text-3xl font-medium text-white tracking-tight font-display mb-4">
Optimized for Production
</h3>
<p class="leading-relaxed text-lg text-neutral-400 mb-8">
Flux isn't just a prototyping tool. Our engine automatically
optimizes geometries, compresses textures, and bakes lighting for
maximum runtime performance.
</p>
<button class="group inline-flex items-center gap-2 text-sm text-white hover:text-orange-400 transition-colors w-fit">
<span class="border-b border-orange-500/50 pb-0.5 group-hover:border-orange-400 transition-colors">
Read the technical paper
</span>
<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" class="lucide lucide-arrow-right w-4 h-4 transition-transform duration-300 group-hover:translate-x-1">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</button>
</div>
<!-- Right Visual Schema -->
<div
class="aspect-square lg:aspect-video overflow-hidden flex flex-col group select-none bg-[#0A0A0A] border-white/10 border rounded-2xl relative animate-on-scroll"
style="animation-delay: 200ms;">
<style>
@keyframes flux-packet-1 {
0% {
left: 24%;
top: 25%;
opacity: 0;
transform: scale(0);
}
10% {
opacity: 1;
transform: scale(1);
}
50% {
left: 50%;
top: 50%;
opacity: 1;
transform: scale(0.5);
}
51% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes flux-packet-2 {
0% {
left: 24%;
top: 50%;
opacity: 0;
transform: scale(0);
}
10% {
opacity: 1;
transform: scale(1);
}
50% {
left: 50%;
top: 50%;
opacity: 1;
transform: scale(0.5);
}
51% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes flux-packet-3 {
0% {
left: 24%;
top: 75%;
opacity: 0;
transform: scale(0);
}
10% {
opacity: 1;
transform: scale(1);
}
50% {
left: 50%;
top: 50%;
opacity: 1;
transform: scale(0.5);
}
51% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes flux-spin {
to {
transform: rotate(360deg);
}
}
@keyframes flux-dash {
to {
stroke-dashoffset: -8;
}
}
</style>
<div
class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(circle_at_center,black,transparent_80%)]">
</div>
<div class="absolute inset-0 flex items-center justify-center perspective-[1000px]">
<div
class="w-[90%] h-[80%] relative transform-style-3d transition-transform duration-700 group-hover:rotate-x-0 group-hover:rotate-y-0 rotate-x-6 rotate-y-[-6deg]">
<div
class="absolute inset-0 bg-neutral-900/40 backdrop-blur-md border border-white/10 rounded-xl flex items-center justify-between px-6 py-6 shadow-2xl overflow-hidden">
<svg class="absolute inset-0 w-full h-full pointer-events-none z-0">
<path d="M24% 25% C 40% 25%, 40% 50%, 50% 50%" stroke="url(#lineGrad1)" stroke-width="1.5" fill="none"
class="opacity-20"></path>
<path d="M24% 50% L 50% 50%" stroke="url(#lineGrad2)" stroke-width="1.5" fill="none" class="opacity-20">
</path>
<path d="M24% 75% C 40% 75%, 40% 50%, 50% 50%" stroke="url(#lineGrad3)" stroke-width="1.5" fill="none"
class="opacity-20"></path>
<line x1="50%" y1="50%" x2="72%" y2="50%" stroke="#10b981" stroke-width="1.5" stroke-dasharray="4 4"
class="opacity-40" style="animation: flux-dash 1s linear infinite"></line>
<defs class=""></defs>
</svg>
<div class="flex flex-col justify-between h-full py-4 z-10 w-28">
<div
class="flex items-center gap-2.5 p-2 rounded-lg bg-neutral-800/80 border border-white/5 backdrop-blur shadow-lg transform transition-transform group-hover:translate-x-1 duration-500">
<div class="p-1.5 rounded bg-blue-500/20 text-blue-400">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
class="">
<path
d="m12 3-1.9 5.8a2 2 0 0 1-1.2 1.2l-5.8 1.9 5.8 1.9a2 2 0 0 1 1.2 1.2l1.9 5.8 1.9-5.8a2 2 0 0 1 1.2-1.2l5.8-1.9-5.8-1.9a2 2 0 0 1-1.2-1.2l-1.9-5.8Z"
class=""></path>
</svg>
</div>
<div class="text-[9px] font-mono text-neutral-400">
GEOMETRY
</div>
</div>
<div
class="flex items-center gap-2.5 p-2 rounded-lg bg-neutral-800/80 border border-white/5 backdrop-blur shadow-lg transform transition-transform group-hover:translate-x-1 duration-500 delay-75">
<div class="p-1.5 rounded bg-purple-500/20 text-purple-400">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
class="">
<rect width="18" height="18" x="3" y="3" rx="2" class=""></rect>
<circle cx="8.5" cy="8.5" r="1.5" class=""></circle>
<path d="m21 15-5-5L5 21" class=""></path>
</svg>
</div>
<div class="text-[9px] font-mono text-neutral-400">
TEXTURES
</div>
</div>
<div
class="flex items-center gap-2.5 p-2 rounded-lg bg-neutral-800/80 border border-white/5 backdrop-blur shadow-lg transform transition-transform group-hover:translate-x-1 duration-500 delay-150">
<div class="p-1.5 rounded bg-orange-500/20 text-orange-400">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
class="">
<circle cx="12" cy="12" r="4" class=""></circle>
<path d="M12 2v2" class=""></path>
<path d="M12 20v2" class=""></path>
<path d="m4.93 4.93 1.41 1.41" class=""></path>
<path d="m17.66 17.66 1.41 1.41" class=""></path>
<path d="M2 12h2" class=""></path>
<path d="M20 12h2" class=""></path>
<path d="m6.34 17.66-1.41-1.41" class=""></path>
<path d="m19.07 4.93-1.41 1.41" class=""></path>
</svg>
</div>
<div class="text-[9px] font-mono text-neutral-400">
LIGHTING
</div>
</div>
</div>
<div class="z-20 relative w-24 h-24 flex items-center justify-center">
<div class="absolute inset-0 bg-orange-500/10 rounded-full animate-ping opacity-20"></div>
<div
class="w-16 h-16 bg-neutral-900 rounded-full border border-orange-500/30 flex items-center justify-center shadow-[0_0_20px_rgba(249,115,22,0.3)] relative">
<svg class="w-20 h-20 absolute text-orange-500/20" viewBox="0 0 100 100"
style="animation: flux-spin 10s linear infinite">
<circle cx="50" cy="50" r="48" stroke="currentColor" stroke-width="1" fill="none"
stroke-dasharray="10 20" class=""></circle>
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
class="text-orange-500">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" class=""></path>
</svg>
</div>
</div>
<div class="z-10 w-36">
<div
class="bg-neutral-800/90 border border-green-500/30 rounded-xl p-3 shadow-2xl relative overflow-hidden">
<div class="absolute inset-0 bg-green-500/5"></div>
<div class="flex flex-col gap-2 relative">
<div class="flex justify-between items-center border-b border-white/5 pb-2">
<span class="text-[10px] font-semibold text-green-400 uppercase tracking-wide">
Production
</span>
<div class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></div>
</div>
<div class="space-y-1.5">
<div class="flex justify-between text-[9px] text-neutral-400">
<span>Mesh</span>
<span class="text-neutral-200 font-mono">
Instanced
</span>
</div>
<div class="flex justify-between text-[9px] text-neutral-400">
<span>Tex</span>
<span class="text-neutral-200 font-mono">KTX2</span>
</div>
<div class="flex justify-between text-[9px] text-neutral-400">
<span>Light</span>
<span class="text-neutral-200 font-mono">
Baked
</span>
</div>
</div>
<div class="mt-2 pt-2 border-t border-white/5">
<div class="w-full bg-neutral-700 h-1 rounded-full overflow-hidden">
<div class="bg-green-500 w-[95%] h-full shadow-[0_0_8px_rgba(34,197,94,0.6)]"></div>
</div>
<div class="text-[8px] text-right mt-1 text-green-400 font-mono">
-85% Size
</div>
</div>
</div>
</div>
</div>
<div class="absolute w-1.5 h-1.5 bg-blue-400 rounded-full shadow-[0_0_8px_currentColor]"
style="animation: flux-packet-1 3s linear infinite"></div>
<div class="absolute w-1.5 h-1.5 bg-purple-400 rounded-full shadow-[0_0_8px_currentColor]"
style="animation: flux-packet-2 3s linear infinite 1s"></div>
<div class="absolute w-1.5 h-1.5 bg-orange-400 rounded-full shadow-[0_0_8px_currentColor]"
style="animation: flux-packet-3 3s linear infinite 0.5s"></div>
</div>
</div>
</div>
</div>
</div>