All Prompts
All Prompts
featuresectiontailwindanimatedresponsivegrid
Animated System Capabilities Feature Grid
Секция с анимированной сеткой возможностей: отображает технические возможности продукта с помощью анимированного фона и карточек. Идеально для демонстрации.
Prompt
<div class="bg-[#e4e4e7] font-['Inter',sans-serif] text-gray-800 flex flex-col items-center justify-center min-h-screen relative overflow-x-hidden antialiased selection:bg-blue-500/30 py-16 px-4 sm:px-8">
<!-- Subtle Lamp Lighting -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-white/80 blur-[120px] rounded-full pointer-events-none z-0"></div>
<!-- Circuit Board Background (SVG) -->
<div class="absolute inset-0 flex items-center justify-center pointer-events-none z-0 overflow-hidden opacity-50">
<svg class="min-w-[1400px] h-[900px]" viewBox="0 0 1400 900" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="3" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<linearGradient id="chipGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="100%" stop-color="#f4f4f5" />
</linearGradient>
<filter id="chipShadow" x="-100%" y="-100%" width="300%" height="300%">
<feDropShadow dx="0" dy="25" stdDeviation="20" flood-color="#000" flood-opacity="0.15"/>
</filter>
</defs>
<!-- Top Left -->
<g stroke="#d4d4d8" stroke-width="1.5">
<line x1="120" y1="210" x2="160" y2="210" />
<line x1="120" y1="220" x2="160" y2="220" />
<line x1="120" y1="230" x2="160" y2="230" />
</g>
<rect x="160" y="195" width="70" height="50" rx="6" fill="url(#chipGrad)" stroke="rgba(0,0,0,0.12)" stroke-width="1" filter="url(#chipShadow)" />
<circle cx="170" cy="205" r="1.5" fill="#a1a1aa"><animate attributeName="opacity" values="0.2;1;0.2" dur="1.5s" repeatCount="indefinite"/></circle>
<circle cx="215" cy="220" r="2.5" fill="#ef4444" filter="url(#glow)"><animate attributeName="opacity" values="0.3;1;0.3" dur="2s" repeatCount="indefinite"/></circle>
<path d="M 215 220 H 350 L 480 350 H 550" stroke="#d4d4d8" stroke-width="1.5" fill="none" />
<path d="M 215 220 H 350 L 480 350 H 550" stroke="#3b82f6" stroke-width="1.5" fill="none" stroke-dasharray="60 600" stroke-dashoffset="600"><animate attributeName="stroke-dashoffset" values="600;-60" dur="3s" repeatCount="indefinite" /></path>
<!-- Bottom Left -->
<g stroke="#d4d4d8" stroke-width="1.5">
<line x1="120" y1="670" x2="160" y2="670" />
<line x1="120" y1="680" x2="160" y2="680" />
<line x1="120" y1="690" x2="160" y2="690" />
</g>
<rect x="160" y="655" width="70" height="50" rx="6" fill="url(#chipGrad)" stroke="rgba(0,0,0,0.12)" stroke-width="1" filter="url(#chipShadow)" />
<circle cx="170" cy="665" r="1.5" fill="#a1a1aa"><animate attributeName="opacity" values="0.2;1;0.2" dur="2s" repeatCount="indefinite"/></circle>
<circle cx="215" cy="680" r="2.5" fill="#3b82f6" filter="url(#glow)"><animate attributeName="opacity" values="0.3;1;0.3" dur="2.5s" repeatCount="indefinite"/></circle>
<path d="M 215 680 H 350 L 480 550 H 550" stroke="#d4d4d8" stroke-width="1.5" fill="none" />
<path d="M 215 680 H 350 L 480 550 H 550" stroke="#3b82f6" stroke-width="1.5" fill="none" stroke-dasharray="60 600" stroke-dashoffset="600"><animate attributeName="stroke-dashoffset" values="600;-60" dur="3.5s" repeatCount="indefinite" /></path>
<!-- Top Right -->
<g stroke="#d4d4d8" stroke-width="1.5">
<line x1="1280" y1="210" x2="1240" y2="210" />
<line x1="1280" y1="220" x2="1240" y2="220" />
<line x1="1280" y1="230" x2="1240" y2="230" />
</g>
<rect x="1170" y="195" width="70" height="50" rx="6" fill="url(#chipGrad)" stroke="rgba(0,0,0,0.12)" stroke-width="1" filter="url(#chipShadow)" />
<circle cx="1230" cy="205" r="1.5" fill="#a1a1aa"><animate attributeName="opacity" values="0.2;1;0.2" dur="1.7s" repeatCount="indefinite"/></circle>
<circle cx="1185" cy="220" r="2.5" fill="#10b981" filter="url(#glow)"><animate attributeName="opacity" values="0.3;1;0.3" dur="3s" repeatCount="indefinite"/></circle>
<path d="M 1185 220 H 1050 L 920 350 H 850" stroke="#d4d4d8" stroke-width="1.5" fill="none" />
<path d="M 1185 220 H 1050 L 920 350 H 850" stroke="#3b82f6" stroke-width="1.5" fill="none" stroke-dasharray="60 600" stroke-dashoffset="600"><animate attributeName="stroke-dashoffset" values="600;-60" dur="4s" repeatCount="indefinite" /></path>
</svg>
</div>
<!-- Header Area -->
<div class="relative z-10 w-full max-w-5xl mx-auto mb-16 flex flex-col items-center">
<div class="flex items-center justify-center gap-5 mb-8">
<div class="flex gap-1.5 opacity-60" style="box-shadow: inset 0 1px 1px rgba(255,255,255,1);">
<div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
<div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
<div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
</div>
<div class="w-14 h-14 bg-gradient-to-b from-[#ffffff] to-[#f4f4f5] rounded-2xl flex items-center justify-center relative overflow-hidden" style="box-shadow: inset 0 2px 5px rgba(0,0,0,0.02), inset 0 0 0 1px rgba(0,0,0,0.04), 0 10px 15px -3px rgba(0,0,0,0.05), 0 25px 30px -5px rgba(0,0,0,0.08), 0 50px 60px -10px rgba(0,0,0,0.12);">
<div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(circle at 1px 1px, black 1px, transparent 0); background-size: 4px 4px;"></div>
<iconify-icon icon="solar:network-linear" style="stroke-width: 1.5;" class="text-2xl text-[#3b82f6] relative z-10" style="filter: drop-shadow(0 0 6px rgba(59,130,246,0.4));"></iconify-icon>
</div>
<div class="flex gap-1.5 opacity-60" style="box-shadow: inset 0 1px 1px rgba(255,255,255,1);">
<div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
<div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
<div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
</div>
</div>
<div class="text-center h-20">
<h1 class="text-3xl sm:text-4xl font-light text-[#18181b] tracking-tight mb-3" style="text-shadow: 0 1px 2px rgba(0,0,0,0.05);">
<span id="typewriter"></span><span class="animate-pulse">_</span>
</h1>
<p class="text-base text-[#52525b] font-light max-w-lg mx-auto">Engineered for durability and velocity. Deploy your applications worldwide without maintaining infrastructure.</p>
</div>
</div>
<!-- Features Grid -->
<div class="relative z-10 w-full max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
<!-- Feature 1 -->
<div class="relative p-8 rounded-3xl bg-gradient-to-b from-[#18181b] to-[#09090b] flex flex-col shadow-[inset_0_1px_0_rgba(255,255,255,0.1),inset_0_0_0_1px_rgba(255,255,255,0.05),0_10px_15px_-3px_rgba(0,0,0,0.2),0_25px_30px_-5px_rgba(0,0,0,0.3),0_50px_60px_-10px_rgba(0,0,0,0.4)] hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.1),inset_0_0_0_1px_rgba(255,255,255,0.05),0_20px_25px_-5px_rgba(0,0,0,0.25),0_40px_50px_-10px_rgba(0,0,0,0.35),0_70px_80px_-15px_rgba(0,0,0,0.45)] transition-all duration-500 ease-out hover:-translate-y-2">
<div class="flex items-center gap-3 mb-4">
<iconify-icon icon="solar:routing-2-linear" style="stroke-width: 1.5;" class="text-2xl text-[#a1a1aa]"></iconify-icon>
<h3 class="text-lg font-normal text-white">Worldwide Routing</h3>
</div>
<div class="text-4xl tracking-tight font-light text-white mb-1">45<span class="text-xl text-[#a1a1aa] font-light">ms</span></div>
<p class="text-sm text-[#a1a1aa] font-light mb-8">Mean latency through smart route optimization.</p>
<button type="button" class="w-full bg-gradient-to-b from-[#27272a] to-[#18181b] hover:from-[#3f3f46] hover:to-[#27272a] rounded-xl py-3 text-sm font-light transition-all active:scale-[0.98] text-white mb-8" style="box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), inset 0 -1px 2px rgba(0,0,0,0.2), 0 5px 10px -2px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05);">Explore Topology</button>
<div class="h-px w-full mb-8" style="background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);"></div>
<ul class="space-y-4 flex-1">
<li class="flex items-start gap-3 text-sm font-light text-[#a1a1aa]">
<iconify-icon icon="solar:alt-arrow-right-linear" style="stroke-width: 1.5;" class="text-lg text-[#71717a] shrink-0 mt-0.5"></iconify-icon> Distributed DNS resolution
</li>
<li class="flex items-start gap-3 text-sm font-light text-[#a1a1aa]">
<iconify-icon icon="solar:alt-arrow-right-linear" style="stroke-width: 1.5;" class="text-lg text-[#71717a] shrink-0 mt-0.5"></iconify-icon> Cross-region failover
</li>
<li class="flex items-start gap-3 text-sm font-light text-[#a1a1aa]">
<iconify-icon icon="solar:alt-arrow-right-linear" style="stroke-width: 1.5;" class="text-lg text-[#71717a] shrink-0 mt-0.5"></iconify-icon> Built-in threat mitigation
</li>
</ul>
</div>
<!-- Feature 2 (Highlighted) -->
<div class="relative p-8 rounded-3xl bg-gradient-to-b from-[#18181b] to-[#09090b] flex flex-col md:-translate-y-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.1),inset_0_0_0_1px_rgba(59,130,246,0.4),0_10px_15px_-3px_rgba(37,99,235,0.1),0_25px_30px_-5px_rgba(37,99,235,0.15),0_50px_60px_-10px_rgba(37,99,235,0.2),0_100px_120px_-20px_rgba(37,99,235,0.3)] hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.1),inset_0_0_0_1px_rgba(59,130,246,0.4),0_20px_25px_-5px_rgba(37,99,235,0.15),0_40px_50px_-10px_rgba(37,99,235,0.25),0_70px_80px_-15px_rgba(37,99,235,0.35),0_120px_140px_-20px_rgba(37,99,235,0.45)] transition-all duration-500 ease-out hover:-translate-y-2 md:hover:-translate-y-6">
<!-- Corner Dots -->
<div class="absolute top-4 left-4 w-1 h-1 rounded-full bg-blue-500/40 shadow-[0_0_4px_rgba(59,130,246,0.4)] animate-pulse"></div>
<div class="absolute top-4 right-4 w-1 h-1 rounded-full bg-blue-500/40 shadow-[0_0_4px_rgba(59,130,246,0.4)] animate-pulse" style="animation-delay: 0.5s"></div>
<div class="absolute bottom-4 left-4 w-1 h-1 rounded-full bg-blue-500/40 shadow-[0_0_4px_rgba(59,130,246,0.4)] animate-pulse" style="animation-delay: 1s"></div>
<div class="absolute bottom-4 right-4 w-1 h-1 rounded-full bg-blue-500/40 shadow-[0_0_4px_rgba(59,130,246,0.4)] animate-pulse" style="animation-delay: 1.5s"></div>
<div class="flex items-center gap-3 mb-4">
<iconify-icon icon="solar:server-path-linear" style="stroke-width: 1.5;" class="text-2xl text-[#3b82f6]"></iconify-icon>
<h3 class="text-lg font-normal text-white">Perimeter Compute</h3>
<span class="ml-auto px-2.5 py-1 rounded-full bg-blue-500/10 text-[#3b82f6] text-xs font-normal tracking-wide border border-blue-500/20">MAIN</span>
</div>
<div class="text-4xl tracking-tight font-light text-white mb-1">0<span class="text-xl text-[#a1a1aa] font-light">ms</span></div>
<p class="text-sm text-[#a1a1aa] font-light mb-8">Zero cold starts through isolate-based design.</p>
<button type="button" class="w-full bg-gradient-to-b from-[#2563eb] to-[#1d4ed8] hover:from-[#3b82f6] hover:to-[#2563eb] text-white rounded-xl py-3 text-sm font-light transition-all active:scale-[0.98] relative overflow-hidden mb-8" style="box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.3), 0 10px 15px -3px rgba(37,99,235,0.3), 0 25px 30px -5px rgba(37,99,235,0.4), 0 0 0 1px rgba(29,78,216,0.8); text-shadow: 0 1px 2px rgba(0,0,0,0.2);">View Environments</button>
<div class="h-px w-full mb-8" style="background: linear-gradient(90deg, transparent, rgba(59,130,246,0.3), transparent);"></div>
<ul class="space-y-4 flex-1">
<li class="flex items-start gap-3 text-sm font-light text-[#a1a1aa]">
<iconify-icon icon="solar:bolt-linear" style="stroke-width: 1.5;" class="text-lg text-[#3b82f6] shrink-0 mt-0.5"></iconify-icon> Wasm integration
</li>
<li class="flex items-start gap-3 text-sm font-light text-[#a1a1aa]">
<iconify-icon icon="solar:bolt-linear" style="stroke-width: 1.5;" class="text-lg text-[#3b82f6] shrink-0 mt-0.5"></iconify-icon> Global state replication
</li>
<li class="flex items-start gap-3 text-sm font-light text-[#a1a1aa]">
<iconify-icon icon="solar:bolt-linear" style="stroke-width: 1.5;" class="text-lg text-[#3b82f6] shrink-0 mt-0.5"></iconify-icon> Sub-millisecond purging
</li>
<li class="flex items-start gap-3 text-sm font-light text-[#a1a1aa]">
<iconify-icon icon="solar:bolt-linear" style="stroke-width: 1.5;" class="text-lg text-[#3b82f6] shrink-0 mt-0.5"></iconify-icon> Continuous data streams
</li>
</ul>
</div>
<!-- Feature 3 -->
<div class="relative p-8 rounded-3xl bg-gradient-to-b from-[#18181b] to-[#09090b] flex flex-col shadow-[inset_0_1px_0_rgba(255,255,255,0.1),inset_0_0_0_1px_rgba(255,255,255,0.05),0_10px_15px_-3px_rgba(0,0,0,0.2),0_25px_30px_-5px_rgba(0,0,0,0.3),0_50px_60px_-10px_rgba(0,0,0,0.4)] hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.1),inset_0_0_0_1px_rgba(255,255,255,0.05),0_20px_25px_-5px_rgba(0,0,0,0.25),0_40px_50px_-10px_rgba(0,0,0,0.35),0_70px_80px_-15px_rgba(0,0,0,0.45)] transition-all duration-500 ease-out hover:-translate-y-2">
<div class="flex items-center gap-3 mb-4">
<iconify-icon icon="solar:lock-keyhole-linear" style="stroke-width: 1.5;" class="text-2xl text-[#a1a1aa]"></iconify-icon>
<h3 class="text-lg font-normal text-white">Absolute Security</h3>
</div>
<div class="text-4xl tracking-tight font-light text-white mb-1">E2E<span class="text-xl text-[#a1a1aa] font-light"></span></div>
<p class="text-sm text-[#a1a1aa] font-light mb-8">All traffic verified at the boundary.</p>
<button type="button" class="w-full bg-gradient-to-b from-[#27272a] to-[#18181b] hover:from-[#3f3f46] hover:to-[#27272a] rounded-xl py-3 text-sm font-light transition-all active:scale-[0.98] text-white mb-8" style="box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), inset 0 -1px 2px rgba(0,0,0,0.2), 0 5px 10px -2px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05);">View Specs</button>
<div class="h-px w-full mb-8" style="background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);"></div>
<ul class="space-y-4 flex-1">
<li class="flex items-start gap-3 text-sm font-light text-[#a1a1aa]">
<iconify-icon icon="solar:shield-check-linear" style="stroke-width: 1.5;" class="text-lg text-[#71717a] shrink-0 mt-0.5"></iconify-icon> mTLS setup
</li>
<li class="flex items-start gap-3 text-sm font-light text-[#a1a1aa]">
<iconify-icon icon="solar:shield-check-linear" style="stroke-width: 1.5;" class="text-lg text-[#71717a] shrink-0 mt-0.5"></iconify-icon> Identity-based routing
</li>
<li class="flex items-start gap-3 text-sm font-light text-[#a1a1aa]">
<iconify-icon icon="solar:shield-check-linear" style="stroke-width: 1.5;" class="text-lg text-[#71717a] shrink-0 mt-0.5"></iconify-icon> Auto-renewing certificates
</li>
<li class="flex items-start gap-3 text-sm font-light text-[#a1a1aa]">
<iconify-icon icon="solar:shield-check-linear" style="stroke-width: 1.5;" class="text-lg text-[#71717a] shrink-0 mt-0.5"></iconify-icon> Fine-grained permissions
</li>
</ul>
</div>
</div>
<!-- Scripts for Animations -->
<script>
// Typewriter Effect
const phrases = ["Worldwide Network", "Immediate Processing", "Zero-Trust Boundary"];
let pIdx = 0, cIdx = 0, isDeleting = false;
const tw = document.getElementById('typewriter');
function type() {
const current = phrases[pIdx];
if (isDeleting) {
tw.textContent = current.substring(0, cIdx - 1);
cIdx--;
} else {
tw.textContent = current.substring(0, cIdx + 1);
cIdx++;
}
let speed = isDeleting ? 40 : 80;
if (!isDeleting && cIdx === current.length) {
speed = 2500;
isDeleting = true;
} else if (isDeleting && cIdx === 0) {
isDeleting = false;
pIdx = (pIdx + 1) % phrases.length;
speed = 500;
}
setTimeout(type, speed);
}
type();
// Dots Lights Loop
const dots = document.querySelectorAll('.dot-light');
let dotIdx = 0;
setInterval(() => {
dots.forEach(d => {
d.style.opacity = '0.2';
d.style.boxShadow = '0 0 0px rgba(59,130,246,0)';
});
if(dots[dotIdx]) {
dots[dotIdx].style.opacity = '0.8';
dots[dotIdx].style.boxShadow = '0 0 6px rgba(59,130,246,0.5)';
}
if(dots[5 - dotIdx]) {
dots[5 - dotIdx].style.opacity = '0.8';
dots[5 - dotIdx].style.boxShadow = '0 0 6px rgba(59,130,246,0.5)';
}
dotIdx = (dotIdx + 1) % 3;
}, 300);
</script>
</div>