All Prompts
All Prompts
herotailwindresponsiveinteractivenavigationlanding
Cinematic Hero Layout with Floating Menu
Кинематографичный Hero-раздел с плавающим меню. Адаптивный макет для лендингов студий и портфолио. Tailwind CSS, интерактивные анимации.
Prompt
<div class="fixed -z-10 overflow-hidden pointer-events-none w-full h-screen top-0 left-0">
<div class="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-blue-500/10 rounded-full blur-[120px] mix-blend-screen animate-pulse">
</div>
<div class="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] bg-cyan-500/10 rounded-full blur-[100px] mix-blend-screen">
</div>
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMDI1Ii8+Cjwvc3ZnPg==')] opacity-20">
</div>
</div>
<!-- Header Section -->
<header class="flex flex-col w-full z-40 mb-6 md:mb-8 relative gap-6">
<div class="flex w-full gap-x-6 gap-y-6 items-start justify-between flex-wrap lg:flex-nowrap">
<div class="flex items-center gap-3 flex-shrink-0 w-full lg:w-auto">
<div class="flex bg-gradient-to-br w-8 h-8 rounded-full items-center justify-center border from-white/10 via-white/0 to-white/10 border-white/10">
<span class="w-2 h-2 rounded-full shadow-[0_0_10px_rgba(34,211,238,0.5)] bg-cyan-400"></span>
</div>
<a href="#" class="md:text-xl block text-lg font-medium tracking-tight font-grotesk text-slate-100">
blu.orbit
</a>
</div>
<div class="flex-1 lg:pr-10 z-10 transition-opacity duration-500 relative w-full lg:w-auto order-1 lg:order-none" id="headline-container">
<h1 class="md:text-5xl lg:text-[4rem] leading-[1.05] text-3xl font-medium tracking-tight mix-blend-screen lg:mx-20 text-slate-50">
We design digital experiences shaped by
<span class="bg-clip-text text-transparent bg-gradient-to-r from-amber-200 via-yellow-100 to-orange-200">
light
</span>
,
<span class="bg-clip-text text-transparent bg-gradient-to-r from-violet-300 via-fuchsia-200 to-pink-400">
motion
</span>
, and
<span class="bg-clip-text text-transparent bg-gradient-to-r from-emerald-300 via-teal-200 to-green-300">
meaning
</span>
.
</h1>
<p class="leading-relaxed md:text-base text-sm font-light max-w-lg mt-4 lg:ml-20 text-slate-400">
Crafting cinematic interfaces and minimal editorial experiences that
explore the space between stillness and motion.
</p>
</div>
<div class="hidden lg:flex items-start justify-start gap-3 pt-1 flex-shrink-0 z-50">
<button class="w-12 h-12 rounded-full border transition-all duration-300 items-center justify-center group backdrop-blur-md flex bg-slate-900/60 border-slate-700/50 hover:bg-slate-800/80 hover:border-slate-600" aria-label="Minimize">
<div class="w-3.5 h-0.5 group-hover:bg-slate-200 transition-colors bg-slate-400"></div>
</button>
<button class="h-12 pl-6 pr-4 rounded-full border items-center gap-3 hover:border-cyan-500/30 hover:shadow-[0_0_20px_-5px_rgba(34,211,238,0.25)] hover:scale-[1.02] transition-all duration-300 backdrop-blur-md group relative overflow-hidden flex bg-slate-900/60 border-slate-700/50 text-slate-100 hover:bg-slate-800">
<span class="text-[11px] uppercase font-semibold tracking-widest z-10 relative">
Let's Talk
</span>
<div class="relative flex h-2 w-2 mx-1">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-0 group-hover:opacity-75 transition-opacity duration-300 bg-cyan-400"></span>
<span class="relative inline-flex rounded-full h-2 w-2 group-hover:bg-cyan-400 group-hover:shadow-[0_0_10px_rgba(34,211,238,0.8)] transition-all duration-300 bg-slate-400"></span>
</div>
<div class="absolute inset-0 bg-gradient-to-tr from-cyan-500/0 via-cyan-500/5 to-cyan-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
</button>
<button class="flex hover:scale-[1.02] transition-all duration-300 group z-50 w-[140px] h-12 rounded-full pr-6 pl-6 shadow-lg gap-x-3 gap-y-3 items-center justify-between shadow-white/5 text-slate-900 bg-white" id="menu-toggle">
<div class="btn-text-slider">
<span class="text-[11px] uppercase font-bold tracking-widest">
DISCOVER
</span>
<span class="text-[11px] uppercase font-bold tracking-widest">
CLOSE
</span>
</div>
<div id="menu-icon-wrapper" class="flex gap-1 transition-transform duration-500 group-[.menu-open]:rotate-90">
<span class="w-1 h-1 rounded-full bg-slate-900"></span>
<span class="w-1 h-1 rounded-full bg-slate-900"></span>
</div>
</button>
</div>
<div class="flex lg:hidden items-center justify-start gap-3 z-50 w-full order-2">
<button class="w-12 h-12 rounded-full border transition-all duration-300 items-center justify-center group backdrop-blur-md flex bg-slate-900/60 border-slate-700/50 hover:bg-slate-800/80 hover:border-slate-600" aria-label="Minimize">
<div class="w-3.5 h-0.5 group-hover:bg-slate-200 transition-colors bg-slate-400"></div>
</button>
<button class="h-12 pl-6 pr-4 rounded-full border items-center gap-3 hover:border-cyan-500/30 hover:shadow-[0_0_20px_-5px_rgba(34,211,238,0.25)] hover:scale-[1.02] transition-all duration-300 backdrop-blur-md group relative overflow-hidden flex bg-slate-900/60 border-slate-700/50 text-slate-100 hover:bg-slate-800">
<span class="text-[11px] uppercase font-semibold tracking-widest z-10 relative">
Let's Talk
</span>
<div class="relative flex h-2 w-2 mx-1">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-0 group-hover:opacity-75 transition-opacity duration-300 bg-cyan-400"></span>
<span class="relative inline-flex rounded-full h-2 w-2 group-hover:bg-cyan-400 group-hover:shadow-[0_0_10px_rgba(34,211,238,0.8)] transition-all duration-300 bg-slate-400"></span>
</div>
<div class="absolute inset-0 bg-gradient-to-tr from-cyan-500/0 via-cyan-500/5 to-cyan-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
</button>
<button class="flex hover:scale-[1.02] transition-all duration-300 group z-50 w-[140px] h-12 rounded-full pr-6 pl-6 shadow-lg gap-x-3 gap-y-3 items-center justify-between shadow-white/5 text-slate-900 bg-white" id="menu-toggle-mobile">
<div class="btn-text-slider">
<span class="text-[11px] uppercase font-bold tracking-widest">
DISCOVER
</span>
<span class="text-[11px] uppercase font-bold tracking-widest">
CLOSE
</span>
</div>
<div id="menu-icon-wrapper-mobile" class="flex gap-1 transition-transform duration-500 group-[.menu-open]:rotate-90">
<span class="w-1 h-1 rounded-full bg-slate-900"></span>
<span class="w-1 h-1 rounded-full bg-slate-900"></span>
</div>
</button>
</div>
</div>
</header>
<!-- Floating Menu Container -->
<div id="menu-overlay" class="fixed inset-0 z-[100] flex justify-end px-4 md:px-6 lg:px-12 pt-[10rem] md:pt-[9rem] pointer-events-none">
<!-- Backdrop Blur (Optional, for focus) -->
<div id="menu-backdrop" class="absolute inset-0 backdrop-blur-sm transition-opacity duration-500 opacity-0 bg-slate-950/60"></div>
<!-- Menu Content Stack -->
<div class="relative z-40 flex flex-col gap-4 w-full max-w-[340px] pointer-events-none" id="menu-stack">
<!-- Navigation Card -->
<nav class="menu-card w-full bg-gradient-to-br rounded-3xl p-6 shadow-2xl backdrop-blur-xl from-white/10 to-white/0 shadow-black/20" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
<ul class="flex flex-col gap-4 font-medium text-xl tracking-tight text-slate-50">
<li class="group flex items-center justify-between cursor-pointer">
<span class="group-hover:opacity-80 transition-opacity text-cyan-100">
WELCOME
</span>
<span class="w-1.5 h-1.5 rounded-full shadow-[0_0_10px_rgba(34,211,238,0.5)] bg-cyan-400"></span>
</li>
<li class="group flex items-center justify-between cursor-pointer">
<div class="h-7 overflow-hidden">
<div class="menu-hover-link">
<div class="h-7 overflow-hidden pr-4">
<div class="flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:-translate-y-7 group-hover:translate-x-2">
<span class="h-7 flex items-center text-slate-200">
The Studio
</span>
<span class="h-7 flex items-center font-medium text-cyan-400">
The Studio
</span>
</div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right opacity-0 -translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] text-cyan-400">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</li>
<li class="group flex items-center justify-between cursor-pointer">
<div class="h-7 overflow-hidden">
<div class="menu-hover-link">
<div class="h-7 overflow-hidden pr-4">
<div class="flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:-translate-y-7 group-hover:translate-x-2">
<span class="h-7 flex items-center text-slate-200">
The Vision
</span>
<span class="h-7 flex items-center font-medium text-cyan-400">
The Vision
</span>
</div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right opacity-0 -translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] text-cyan-400">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</li>
<li class="group flex items-center justify-between cursor-pointer">
<div class="h-7 overflow-hidden">
<div class="menu-hover-link">
<div class="h-7 overflow-hidden pr-4">
<div class="flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:-translate-y-7 group-hover:translate-x-2">
<span class="h-7 flex items-center text-slate-200">
The Gallery
</span>
<span class="h-7 flex items-center font-medium text-cyan-400">
The Gallery
</span>
</div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right opacity-0 -translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] text-cyan-400">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</li>
</ul>
</nav>
<!-- Newsletter Card -->
<div class="menu-card w-full bg-gradient-to-br rounded-3xl p-6 shadow-2xl backdrop-blur-xl from-white/10 to-white/0 shadow-black/20" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
<h3 class="text-2xl font-medium leading-[1.1] tracking-tight mb-6 text-slate-50">
Get exclusive updates
</h3>
<div class="relative group">
<div class="absolute inset-0 rounded-xl border transition-colors group-focus-within:bg-slate-900/60 group-focus-within:border-cyan-500/30 bg-slate-900/40 border-white/10">
</div>
<div class="relative flex items-center p-1.5">
<input type="email" placeholder="Your email" class="w-full bg-transparent border-none outline-none placeholder:text-slate-500 px-3 py-2 text-sm font-medium text-slate-200">
<button class="w-9 h-9 flex-shrink-0 rounded-lg flex items-center justify-center hover:bg-cyan-500 transition-all duration-200 bg-white/10 text-slate-200 hover:text-slate-900">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Labs Link Card -->
<a href="#" class="menu-card w-full bg-gradient-to-br rounded-3xl p-6 flex items-center justify-between group hover:scale-[1.02] transition-transform duration-300 shadow-2xl backdrop-blur-xl from-white/10 to-white/0 shadow-black/20" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
<div class="connect-inner w-full flex justify-between items-center">
<div class="flex items-center gap-3">
<span class="text-lg font-bold tracking-widest uppercase text-slate-200">
CONNECT
</span>
</div>
<div class="w-10 h-10 rounded-full border flex items-center justify-center group-hover:bg-cyan-400 group-hover:text-slate-900 transition-colors duration-300 shadow-[0_0_0_1px_rgba(255,255,255,0)] group-hover:shadow-[0_0_15px_rgba(34,211,238,0.5)] bg-white/5 border-white/10 text-slate-200">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right w-5 h-5">
<path d="M7 7h10v10" class=""></path>
<path d="M7 17 17 7" class=""></path>
</svg>
</div>
</div>
</a>
</div>
</div>
<!-- Main Visual Section -->
<main class="flex-1 flex flex-col relative w-full z-0 transition-all duration-700 ease-out" id="main-content" style="opacity: 1; filter: blur(0);">
<!-- 3D Image Container -->
<div class="relative w-full h-[55vh] md:h-[65vh] rounded-[2rem] md:rounded-[2.5rem] overflow-hidden border shadow-2xl group cursor-pointer backdrop-blur-sm bg-slate-900/40 border-slate-800/60 shadow-black/40" style="--border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 2.5rem">
<!-- Abstract 3D Image -->
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/ad12226b-9c56-48b6-81b8-bf1ef9f0cb87_3840w.webp" alt="Abstract 3D connecting shapes" class="group-hover:scale-105 group-hover:opacity-60 transition-all duration-1000 ease-out hover:saturate-50 opacity-80 mix-blend-lighten w-full h-full object-cover absolute top-0 right-0 bottom-0 left-0 saturate-0">
<!-- Gradient Overlay -->
<div class="absolute inset-0 bg-gradient-to-t from-[#020617] via-transparent to-transparent opacity-80 pointer-events-none">
</div>
<div class="absolute inset-0 bg-gradient-to-tr mix-blend-overlay pointer-events-none from-cyan-900/20 to-purple-900/20">
</div>
<!-- Floating Meta Information -->
<div class="absolute left-4 bottom-4 md:left-6 md:bottom-6 lg:left-8 lg:bottom-8 flex flex-col items-start gap-3 rounded-2xl border px-4 py-3 md:px-5 md:py-4 backdrop-blur-xl shadow-lg transition-transform duration-500 group-hover:translate-y-[-4px] bg-slate-950/40 border-slate-700/40">
<div class="flex items-start justify-between w-full gap-3">
<div class="flex flex-col gap-0.5 flex-1">
<span class="text-[10px] font-medium uppercase tracking-[0.2em] text-cyan-400">
Featured Series
</span>
<span class="text-lg md:text-xl lg:text-2xl font-medium tracking-tight text-slate-100">
Whispers in Liquid Glass
</span>
</div>
</div>
<div class="flex items-center justify-between w-full pt-2 border-t border-slate-700/40">
<div class="flex flex-col">
<span class="text-[10px] uppercase tracking-wider text-slate-400">
Project ID
</span>
<span class="text-sm font-medium tracking-tight text-slate-200">
#8A-24
</span>
</div>
<button class="w-8 h-8 flex-shrink-0 rounded-full border flex items-center justify-center group-hover:bg-cyan-500 group-hover:text-black group-hover:border-cyan-400 transition-all duration-300 border-slate-600/50 bg-slate-800/50 text-slate-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</button>
</div>
</div>
<!-- Top Right Badge -->
<div class="absolute top-4 right-4 md:top-6 md:right-6 lg:top-8 lg:right-8">
<div class="flex items-center gap-2 px-3 py-1.5 rounded-full border backdrop-blur-md bg-slate-950/40 border-slate-800/40">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-emerald-400"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
</span>
<span class="text-[10px] font-semibold uppercase tracking-widest text-slate-300">
Live Render
</span>
</div>
</div>
</div>
</main>
<!-- Simple Footer Meta -->
<div class="w-full flex justify-between items-end mt-6 px-2 opacity-60 z-0">
<div class="flex gap-3 md:gap-6 text-[10px] md:text-[11px] text-slate-500 font-medium uppercase tracking-widest">
<span class="">© 2025 blu.orbit</span>
<span class="hidden sm:inline">Visual Narrative</span>
</div>
<div class="flex gap-3 md:gap-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="instagram" class="lucide lucide-instagram w-4 h-4 text-slate-500 transition-colors cursor-pointer hover:text-slate-300">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" class=""></path>
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5" class=""></line>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="twitter" class="lucide lucide-twitter w-4 h-4 text-slate-500 transition-colors cursor-pointer hover:text-slate-300">
<path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" class=""></path>
</svg>
</div>
</div>
<script>
lucide.createIcons();
const menuToggle = document.getElementById('menu-toggle');
const menuToggleMobile = document.getElementById('menu-toggle-mobile');
const menuOverlay = document.getElementById('menu-overlay');
const menuStack = document.getElementById('menu-stack');
const menuBackdrop = document.getElementById('menu-backdrop');
const mainContent = document.getElementById('main-content');
const cards = document.querySelectorAll('.menu-card');
let isMenuOpen = false;
function toggleMenu() {
isMenuOpen = !isMenuOpen;
// Toggle classes on both buttons
if (menuToggle) menuToggle.classList.toggle('menu-open', isMenuOpen);
if (menuToggleMobile) menuToggleMobile.classList.toggle('menu-open', isMenuOpen);
if (isMenuOpen) {
// Activate Overlay
menuOverlay.classList.remove('pointer-events-none');
menuStack.classList.remove('pointer-events-none');
menuBackdrop.classList.remove('opacity-0');
// Cascade Animation In
cards.forEach((card, index) => {
setTimeout(() => {
card.classList.add('active');
}, index * 100);
});
// Push/Dim main content
mainContent.style.opacity = '0.4';
mainContent.style.filter = 'blur(4px)';
} else {
// Deactivate Overlay
menuOverlay.classList.add('pointer-events-none');
menuStack.classList.add('pointer-events-none');
menuBackdrop.classList.add('opacity-0');
// Cascade Animation Out
const total = cards.length;
cards.forEach((card, index) => {
setTimeout(() => {
card.classList.remove('active');
}, (total - 1 - index) * 100);
});
// Reset Main Content
mainContent.style.opacity = '1';
mainContent.style.filter = 'blur(0)';
}
}
if (menuToggle) {
menuToggle.addEventListener('click', toggleMenu);
}
if (menuToggleMobile) {
menuToggleMobile.addEventListener('click', toggleMenu);
}
// Close menu when clicking backdrop
menuBackdrop.addEventListener('click', () => {
if (isMenuOpen) {
toggleMenu();
}
});
</script>