All Prompts
All Prompts
herosectionuiresponsiveanimateddashboardtailwind
Responsive Dashboard Device Mockup Hero
Анимированный адаптивный герой-секция с макетами дашбордов для мобильных, планшетов и десктопов. Идеально для демонстрации продуктов и аналитики.
Prompt
<div class="sticky overflow-hidden flex flex-col bg-black w-full h-screen mb-20 top-0 items-center justify-center">
<!-- Ambient Background Effects -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full max-w-7xl pointer-events-none select-none">
<div class="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-indigo-600/20 rounded-full blur-[120px] mix-blend-screen animate-pulse duration-[4s]"></div>
<div class="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-black via-transparent to-transparent"></div>
<div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(255,255,255,0.03),transparent_50%)]"></div>
</div>
<!-- Text Header -->
<div class="relative z-20 text-center mb-8 md:mb-12 px-6 transition-all duration-500">
<div class="inline-flex items-center gap-2 mb-6 px-3 py-1 rounded-full border border-white/10 bg-white/5 backdrop-blur-md shadow-lg">
<span class="flex h-2 w-2 relative">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
</span>
<span class="text-[11px] font-geist font-medium text-indigo-200 tracking-widest uppercase">Adaptive Layout Engine</span>
</div>
<h2 class="text-4xl md:text-7xl font-manrope font-semibold tracking-tighter text-white mb-6 drop-shadow-2xl">
Responsive by default.
</h2>
<p class="text-zinc-400 text-lg md:text-xl max-w-2xl mx-auto font-light leading-relaxed">
Fluid animations and layouts that automatically adapt to any device context.
Scroll to see it in action.
</p>
</div>
<!-- Device Stage Container -->
<div class="relative w-full max-w-[1200px] h-[700px] flex items-center justify-center perspective-[2000px] transform-style-preserve-3d group">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@keyframes float-slow {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
@keyframes float-medium {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
}
@keyframes float-fast {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.animate-float-slow { animation: float-slow 6s ease-in-out infinite; }
.animate-float-medium { animation: float-medium 5s ease-in-out infinite; }
.animate-float-fast { animation: float-fast 4s ease-in-out infinite; }
</style>
<!-- Desktop Mockup (Back/Center) -->
<div class="absolute z-10 w-[900px] h-[550px] bg-zinc-950 rounded-xl border-[8px] border-zinc-800 shadow-2xl overflow-hidden flex flex-col ring-1 ring-white/10 transition-all duration-500 ease-out animate-float-slow scale-[0.5] md:scale-[0.8] origin-center shadow-indigo-500/10 opacity-100 hover:scale-[0.52] md:hover:scale-[0.82] hover:z-40">
<!-- Top Bar -->
<div class="h-8 bg-zinc-900 w-full flex items-center px-3 gap-2 border-b border-white/5">
<div class="flex gap-1.5">
<div class="w-2.5 h-2.5 rounded-full bg-red-500/20 border border-red5 bg-yellow-500/20 border-yellow-500/50"></div>
<div class="w-2.5 h-2.5 rounded-full bg-emerald-500/20 border border-emerald-500/50"></div>
</div>
<div class="mx-auto w-64 h-5 bg-zinc-800 rounded-md flex items-center justify-center text-[10px] text-zinc-500 font-mono">aura.ai/dashboard</div>
</div>
<div class="flex flex-1">
<!-- Sidebar -->
<div class="w-48 bg-zinc-900/50 border-r border-white/5 p-4">
<div class="flex items-center gap-2 mb-8 text-white font-bold text-sm">
<div class="w-4 h-4 bg-indigo-600 rounded"></div> Aura Inc.
</div>
<div class="space-y-1">
<div class="px-2 py-1.5 rounded bg-white/5 text-xs text-white font-medium flex items-center gap-2">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class=""><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" class=""></path></svg> Home
</div>
<div class="px-2 py-1.5 rounded text-xs text-zinc-500 hover:text-white flex items-center gap-2">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class=""><circle cx="12" cy="12" r="3" class=""></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" class=""></path></svg> Settings
</div>
</div>
</div>
<!-- Main -->
<div class="flex-1 p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-lg font-semibold text-white">Overview</h2>
<div class="text-xs text-zinc-500">Last 30 days</div>
</div>
<div class="grid grid-cols-3 gap-4 mb-6">
<div class="bg-zinc-900 border border-white/5 p-4 rounded-lg">
<div class="text-[10px] uppercase tracking-wider text-zinc-500 mb-1">Sales</div>
<div class="text-xl font-semibold text-white">$42,000</div>
</div>
<div class="bg-zinc-900 border border-white/5 p-4 rounded-lg">
<div class="text-[10px] uppercase tracking-wider text-zinc-500 mb-1">Profit</div>
<div class="text-xl font-semibold text-white">$12,500</div>
</div>
<div class="bg-zinc-900 border border-white/5 p-4 rounded-lg">
<div class="text-[10px] uppercase tracking-wider text-zinc-500 mb-1">Churn</div>
<div class="text-xl font-semibold text-white">2.1%</div>
</div>
</div>
<div class="w-full h-40 bg-zinc-900/30 border border-white/5 rounded-lg relative overflow-hidden p-2">
<canvas id="desktopChart" style="display: block; box-sizing: border-box; height: 110px; width: 497.2px;" width="994" height="220"></canvas>
</div>
</div>
</div>
</div>
<!-- Tablet Mockup (Right/Front) -->
<div class="absolute z-20 w-[700px] h-[500px] bg-zinc-950 rounded-[2rem] border-[8px] border-zinc-800 shadow-2xl overflow-hidden flex ring-1 ring-white/10 transition-all duration-500 ease-out animate-float-medium scale-[0.4] md:scale-[0.6] translate-y-[120px] md:translate-x-[320px] md:translate-y-[80px] shadow-indigo-500/10 opacity-100 hover:scale-[0.42] md:hover:scale-[0.62] hover:z-40">
<!-- Sidebar -->
<div class="w-16 border-r border-white/5 flex flex-col items-center py-6 gap-6 bg-zinc-900/50">
<div class="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center text-white font-bold text-xs">A</div>
<div class="flex flex-col gap-4">
<div class="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center text-zinc-400">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class=""><rect x="3" y="3" width="7" height="7" class=""></rect><rect x="14" y="3" width="7" height="7" class=""></rect><rect x="14" y="14" width="7" height="7" class=""></rect><rect x="3" y="14" width="7" height="7" class=""></rect></svg>
</div>
<div class="w-8 h-8 rounded-lg flex items-center justify-center text-zinc-600">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class=""><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" class=""></path></svg>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 p-6 bg-zinc-950">
<div class="flex items-center justify-between mb-8">
<h3 class="text-xl font-semibold text-white">Dashboard</h3>
<div class="flex gap-3">
<div class="h-8 px-3 rounded-md bg-white/5 border border-white/10 flex items-center text-xs text-zinc-400">Filter</div>
<div class="h-8 px-3 rounded-md bg-indigo-600 flex items-center text-xs text-white font-medium">Export</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="p-4 rounded-xl bg-zinc-900/50 border border-white/5">
<div class="text-xs text-zinc-500 mb-2">Revenue</div>
<div class="text-2xl font-bold text-white">$124.5k</div>
<div class="mt-2 h-1 bg-zinc-800 rounded-full overflow-hidden"><div class="w-3/4 h-full bg-emerald-500"></div></div>
</div>
<div class="p-4 rounded-xl bg-zinc-900/50 border border-white/5">
<div class="text-xs text-zinc-500 mb-2">Active Users</div>
<div class="text-2xl font-bold text-white">8,492</div>
<div class="mt-2 h-1 bg-zinc-800 rounded-full overflow-hidden"><div class="w-1/2 h-full bg-indigo-500"></div></div>
</div>
</div>
<div class="h-32 rounded-xl bg-zinc-900/30 border border-white/5 flex items-end justify-between p-4 gap-2">
<div class="w-full bg-indigo-500/20 h-[40%] rounded-t-sm"></div>
<div class="w-full bg-indigo-500/30 h-[60%] rounded-t-sm"></div>
<div class="w-full bg-indigo-500/40 h-[30%] rounded-t-sm"></div>
<div class="w-full bg-indigo-500/50 h-[75%] rounded-t-sm"></div>
<div class="w-full bg-indigo-500/60 h-[50%] rounded-t-sm"></div>
<div class="w-full bg-indigo-500/70 h-[90%] rounded-t-sm"></div>
<div class="w-full bg-indigo-500 h-[65%] rounded-t-sm"></div>
</div>
</div>
</div>
<!-- Mobile Mockup (Left/Front) -->
<div class="absolute z-30 w-[300px] h-[600px] bg-zinc-950 rounded-[3rem] border-[8px] border-zinc-800 shadow-2xl overflow-hidden flex flex-col ring-1 ring-white/10 transition-all duration-500 ease-out animate-float-fast scale-[0.5] md:scale-[0.8] translate-y-[-120px] md:translate-x-[-350px] md:translate-y-[60px] shadow-indigo-500/10 opacity-100 hover:scale-[0.52] md:hover:scale-[0.82] hover:z-40">
<!-- Dynamic Island -->
<div class="absolute top-3 left-1/2 -translate-x-1/2 w-24 h-7 bg-black rounded-full z-20 border border-zinc-800/50"></div>
<!-- Status Bar -->
<div class="h-14 w-full flex items-center justify-between px-6 pt-2">
<span class="text-[10px] font-medium text-white">9:41</span>
<div class="flex gap-1"><div class="w-4 h-4 rounded-full border border-white/20"></div></div>
</div>
<!-- App UI -->
<div class="flex-1 p-4 pt-2 space-y-4 bg-gradient-to-b from-zinc-900 to-zinc-950">
<div class="flex items-center justify-between">
<div class="bg-zinc-800 w-8 h-8 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/90ec73f0-6fd3-4d0c-922c-fcc592c983df_320w.webp)] bg-cover bg-center rounded-full"></div>
<div class="w-8 h-8 rounded-full border border-white/10 flex items-center justify-center">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" class=""></path><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" class=""></path></svg>
</div>
</div>
<div class="p-4 rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-900/20">
<div class="text-xs opacity-70 mb-1">Total Balance</div>
<div class="text-2xl font-bold mb-4">$24,500.00</div>
<div class="flex gap-2">
<div class="h-8 w-8 rounded-full bg-white/20 flex items-center justify-center">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class=""><path d="M12 19V5M5 12l7-7 7 7" class=""></path></svg>
</div>
<div class="h-8 w-8 rounded-full bg-white/20 flex items-center justify-center">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class=""><path d="M5 12h14M12 5v14" class=""></path></svg>
</div>
</div>
</div>
<div class="space-y-2">
<div class="flex items-center justify-between p-3 rounded-xl bg-white/5 border border-white/5">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-emerald-500/10 flex items-center justify-center text-emerald-500">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class=""><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
</div>
<div><div class="text-sm text-white font-medium">Payment Received</div><div class="text-[10px] text-zinc-500">From Linear</div></div>
</div>
<div class="text-sm font-medium text-emerald-400">+$450</div>
</div>
<div class="flex items-center justify-between p-3 rounded-xl bg-white/5 border border-white/5">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-orange-500/10 flex items-center justify-center text-orange-500">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class=""><circle cx="12" cy="12" r="10" class=""></circle><polyline points="12 6 12 12 16 14" class=""></polyline></svg>
</div>
<div><div class="text-sm text-white font-medium">Subscription</div><div class="text-[10px] text-zinc-500">Pending</div></div>
</div>
<div class="text-sm font-medium text-white">-$29</div>
</div>
</div>
</div>
</div>
<script>
(function() {
const initChart = () => {
const ctx = document.getElementById('desktopChart');
if (ctx && typeof Chart !== 'undefined') {
// Gradient
const gradient = ctx.getContext('2d').createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, 'rgba(99, 102, 241, 0.5)'); // Indigo 500
gradient.addColorStop(1, 'rgba(99, 102, 241, 0)');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
datasets: [{
data: [12, 19, 15, 25, 22, 30, 28, 35, 20, 40],
borderColor: '#6366f1',
borderWidth: 2,
backgroundColor: gradient,
fill: true,
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false } },
scales: { x: { display: false }, y: { display: false } },
layout: { padding: 0 }
}
});
}
};
// Try initializing if Chart is ready, or wait
if (typeof Chart !== 'undefined') {
initChart();
} else {
// Simple polling if script loads async
const interval = setInterval(() => {
if (typeof Chart !== 'undefined') {
clearInterval(interval);
initChart();
}
}, 100);
}
})();
</script>
</div>
<!-- Animation Status Indicators -->
<div class="absolute bottom-12 z-40 flex flex-col items-center gap-4">
<div class="flex gap-4 p-2 bg-white/5 backdrop-blur rounded-full border border-white/5 shadow-xl">
<button id="ind-mobile" class="text-[10px] font-medium text-white px-3 py-1 rounded-full bg-white/10 transition-all duration-300 shadow-sm">Mobile</button>
<button id="ind-tablet" class="text-[10px] font-medium text-zinc-500 px-3 py-1 rounded-full transition-all duration-300 bg-transparent">Tablet</button>
<button id="ind-desktop" class="text-[10px] font-medium text-zinc-500 px-3 py-1 rounded-full transition-all duration-300 bg-transparent">Desktop</button>
</div>
<div class="animate-bounce opacity-40 text-white">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M12 5v14" class=""></path><path d="m19 12-7 7-7-7" class=""></path></svg>
</div>
</div>
<script class="">
(function() {
const mobile = document.getElementById('aura-mobile');
const tablet = document.getElementById('aura-tablet');
const desktop = document.getElementById('aura-desktop');
const indMobile = document.getElementById('ind-mobile');
const indTablet = document.getElementById('ind-tablet');
const indDesktop = document.getElementById('ind-desktop');
if(!mobile || !tablet || !desktop) return;
const setActive = (el, active) => {
if(active) {
el.classList.add('text-white', 'bg-white/10', 'shadow-sm');
el.classList.remove('text-zinc-500', 'bg-transparent');
} else {
el.classList.remove('text-white', 'bg-white/10', 'shadow-sm');
el.classList.add('text-zinc-500', 'bg-transparent');
}
};
function updateAnimation() {
const section = document.querySelector('[data-element-id="aura-emib1nhf3emabi5h"]');
if(!section) return;
const rect = section.getBoundingClientRect();
const viewportHeight = window.innerHeight;
const scrollDistance = viewportHeight * 2;
let progress = Math.max(0, Math.min(1, -rect.top / scrollDistance));
if (progress < 0.25) {
mobile.style.opacity = 1;
mobile.style.transform = 'translateX(0) scale(1) rotateY(0deg)';
mobile.style.filter = 'blur(0px)';
tablet.style.opacity = 0;
tablet.style.transform = 'translateX(300px) scale(0.85) rotateY(15deg)';
tablet.style.filter = 'blur(15px)';
desktop.style.opacity = 0;
desktop.style.transform = 'translateX(300px) scale(0.85) rotateY(15deg)';
desktop.style.filter = 'blur(15px)';
setActive(indMobile, true);
setActive(indTablet, false);
setActive(indDesktop, false);
} else if (progress >= 0.25 && progress < 0.5) {
const p = (progress - 0.25) / 0.25;
mobile.style.opacity = 1 - p;
mobile.style.transform = `translateX(-${p * 200}px) scale(${1 - p * 0.15}) rotateY(-${p * 20}deg)`;
mobile.style.filter = `blur(${p * 12}px)`;
tablet.style.opacity = p;
tablet.style.transform = `translateX(${(1 - p) * 300}px) scale(${0.85 + p * 0.15}) rotateY(${(1 - p) * 15}deg)`;
tablet.style.filter = `blur(${(1 - p) * 15}px)`;
desktop.style.opacity = 0;
if(p > 0.5) {
setActive(indMobile, false);
setActive(indTablet, true);
} else {
setActive(indMobile, true);
setActive(indTablet, false);
}
} else if (progress >= 0.5 && progress < 0.75) {
mobile.style.opacity = 0;
tablet.style.opacity = 1;
tablet.style.transform = 'translateX(0) scale(1) rotateY(0deg)';
tablet.style.filter = 'blur(0px)';
desktop.style.opacity = 0;
desktop.style.transform = 'translateX(300px) scale(0.85) rotateY(15deg)';
desktop.style.filter = 'blur(15px)';
setActive(indMobile, false);
setActive(indTablet, true);
setActive(indDesktop, false);
} else {
const p = (progress - 0.75) / 0.25;
mobile.style.opacity = 0;
tablet.style.opacity = 1 - p;
tablet.style.transform = `translateX(-${p * 200}px) scale(${1 - p * 0.15}) rotateY(-${p * 20}deg)`;
tablet.style.filter = `blur(${p * 12}px)`;
desktop.style.opacity = p;
desktop.style.transform = `translateX(${(1 - p) * 300}px) scale(${0.85 + p * 0.15}) rotateY(${(1 - p) * 15}deg)`;
desktop.style.filter = `blur(${(1 - p) * 15}px)`;
if(p > 0.5) {
setActive(indTablet, false);
setActive(indDesktop, true);
} else {
setActive(indTablet, true);
setActive(indDesktop, false);
}
}
}
window.addEventListener('scroll', () => window.requestAnimationFrame(updateAnimation));
window.addEventListener('resize', updateAnimation);
updateAnimation();
})();
</script>
</div>