All Prompts
All Prompts
herosectionanimatedtailwindresponsivelandinggsap
Animated Hero Section with GSAP Reveal
Анимированная секция "Hero" с GSAP: плавное появление текста и изображений, фиксированная навигация, стильный фон. Идеально для лендингов.
Prompt
<div
class="relative w-full min-h-screen bg-[#050505] text-[#F3F4F6] selection:bg-[#06b6d4] selection:text-[#050505] overflow-x-hidden"
style="font-family: 'Space Grotesk', sans-serif;">
<!-- External Dependencies -->
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Rajdhani:wght@700&family=JetBrains+Mono:wght@500;600&display=swap"
rel="stylesheet" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<!-- Background Layer -->
<div class="fixed inset-0 z-0 pointer-events-none overflow-hidden">
<div class="absolute inset-0 opacity-40"
style="background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 3rem 3rem;">
</div>
<div class="absolute inset-0 opacity-30"
style="background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 12rem 12rem;">
</div>
<div class="absolute inset-0" style="background: radial-gradient(circle at center, transparent 10%, #050505 100%);">
</div>
</div>
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 border-b border-white/10 backdrop-blur-md bg-[#050505]/70">
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
<div class="tracking-widest text-xl text-white select-none uppercase"
style="font-family: 'Rajdhani', sans-serif; font-weight: 700;">
KINETIC
</div>
<div class="hidden md:flex items-center gap-10 text-xs tracking-widest uppercase"
style="font-family: 'JetBrains Mono', monospace;">
<a href="#" class="text-white/60 hover:text-[#06b6d4] transition-colors">Lab</a>
<a href="#" class="text-white/60 hover:text-[#06b6d4] transition-colors">Specs</a>
<a href="#" class="text-white/60 hover:text-[#06b6d4] transition-colors">Docs</a>
</div>
<a href="#"
class="bg-[#06b6d4] text-[#050505] px-6 py-2.5 text-xs font-medium tracking-widest hover:bg-white transition-colors uppercase"
style="font-family: 'JetBrains Mono', monospace;">
Download
</a>
</div>
</nav>
<!-- Hero Section -->
<section
class="relative min-h-screen flex flex-col justify-center pt-24 pb-12 overflow-hidden border-b border-white/10 z-10">
<!-- Speed Lines Overlay -->
<div
class="absolute inset-0 pointer-events-none opacity-20 flex flex-col justify-between py-32 z-0 overflow-hidden">
<div class="h-px w-full bg-gradient-to-r from-transparent via-white/20 to-transparent"
style="transform: translateX(-20%);"></div>
<div class="h-px w-full bg-gradient-to-r from-transparent via-white/20 to-transparent"
style="transform: translateX(10%);"></div>
<div class="h-px w-full bg-gradient-to-r from-transparent via-white/20 to-transparent"
style="transform: translateX(-10%);"></div>
</div>
<div class="max-w-7xl mx-auto px-6 w-full relative z-10 grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
<div class="flex flex-col gap-8 md:gap-10">
<div
class="hero-reveal flex flex-wrap items-center gap-4 text-xs tracking-widest uppercase border border-white/10 p-2.5 w-max bg-[#050505]/50 backdrop-blur-sm"
style="font-family: 'JetBrains Mono', monospace;">
<span class="flex items-center gap-2">
<div class="w-2 h-2 bg-[#bef264] shadow-[0_0_8px_rgba(190,242,100,0.4)]"></div>
Available
</span>
<span class="text-white/20">/</span>
<span class="text-white/60">Free Template</span>
<span class="text-white/20">/</span>
<span class="text-[#06b6d4]">GSAP 3</span>
</div>
<div class="relative w-max mt-4">
<div
class="hero-reveal absolute -top-6 -left-4 md:-top-10 md:-left-8 z-20 text-[#050505] text-xs tracking-widest px-3 py-1.5 bg-[#bef264] border border-[#bef264] shadow-sm select-none"
style="font-family: 'JetBrains Mono', monospace; transform: rotate(-6deg);">
EP.01 / TITLE_CARD_SYSTEM
</div>
<div class="relative">
<!-- Outline Layer -->
<div class="absolute inset-0 z-0 flex flex-col pointer-events-none select-none"
style="transform: translate(6px, 6px);">
<div class="overflow-hidden">
<h1
class="hero-reveal text-6xl md:text-7xl lg:text-[8rem] xl:text-[9rem] tracking-tight uppercase leading-[0.85]"
style="font-family: 'Rajdhani', sans-serif; font-weight: 700; -webkit-text-stroke: 1.5px #06b6d4; color: transparent;">
Opening</h1>
</div>
<div class="overflow-hidden pl-0 md:pl-12 lg:pl-16">
<h1
class="hero-reveal text-5xl md:text-6xl lg:text-[6.5rem] xl:text-[7.5rem] tracking-tight uppercase leading-[0.85]"
style="font-family: 'Rajdhani', sans-serif; font-weight: 700; -webkit-text-stroke: 1.5px #06b6d4; color: transparent;">
Sequence</h1>
</div>
</div>
<!-- Fill Layer -->
<div class="relative z-10 flex flex-col">
<div class="overflow-hidden">
<h1
class="hero-reveal text-6xl md:text-7xl lg:text-[8rem] xl:text-[9rem] tracking-tight uppercase text-white leading-[0.85]"
style="font-family: 'Rajdhani', sans-serif; font-weight: 700;">Opening</h1>
</div>
<div class="overflow-hidden pl-0 md:pl-12 lg:pl-16">
<h1
class="hero-reveal text-5xl md:text-6xl lg:text-[6.5rem] xl:text-[7.5rem] tracking-tight uppercase text-white leading-[0.85]"
style="font-family: 'Rajdhani', sans-serif; font-weight: 700;">Sequence</h1>
</div>
</div>
</div>
</div>
<div class="hero-reveal max-w-md text-sm text-white/50 leading-relaxed">
A purely front-end title sequence system. Scrubbable timelines, frame-perfect slice wipes, and absolute
architectural control.
</div>
<div class="hero-reveal flex flex-wrap gap-4 mt-4" style="font-family: 'JetBrains Mono', monospace;">
<a href="#"
class="bg-white text-[#050505] px-8 py-4 text-xs font-medium tracking-widest hover:bg-[#06b6d4] transition-colors uppercase flex items-center gap-2">
Download <iconify-icon icon="solar:download-linear" class="text-base"></iconify-icon>
</a>
<a href="#"
class="border border-white/20 bg-transparent text-white px-8 py-4 text-xs font-medium tracking-widest hover:border-white transition-colors uppercase flex items-center gap-2">
Watch Demo <iconify-icon icon="solar:play-circle-linear" class="text-base"></iconify-icon>
</a>
</div>
</div>
<div
class="hero-image-panel relative w-full max-w-[560px] aspect-[4/5] mx-auto md:ml-auto border border-white/10 bg-[#050505] overflow-hidden">
<img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop" alt="Hero Tech" class="absolute inset-0 w-full h-full object-cover opacity-60 mix-blend-luminosity grayscale" />
<div class="absolute inset-0 shadow-[inset_0_0_80px_rgba(5,5,5,0.9)] pointer-events-none z-10"></div>
<div class="absolute inset-4 border border-white/5 pointer-events-none z-10"></div>
<div class="absolute top-4 left-4 w-2 h-2 border-t border-l border-[#06b6d4] z-10"></div>
<div class="absolute top-4 right-4 w-2 h-2 border-t border-r border-[#06b6d4] z-10"></div>
<div class="absolute bottom-4 left-4 w-2 h-2 border-b border-l border-[#06b6d4] z-10"></div>
<div class="absolute bottom-4 right-4 w-2 h-2 border-b border-r border-[#06b6d4] z-10"></div>
<div
class="absolute top-6 right-6 z-10 text-right flex flex-col gap-1 text-[10px] tracking-widest text-[#06b6d4] uppercase"
style="font-family: 'JetBrains Mono', monospace;">
<span>SYS.ON</span><span class="text-white/40">V.1.0.4</span>
</div>
<div
class="signal-sweep absolute inset-0 w-[200%] bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-[150%] skew-x-[-20deg] z-10 pointer-events-none">
</div>
<div class="strip-reveal absolute inset-0 flex flex-col z-20 pointer-events-none">
<div class="strip flex-1 bg-[#050505] border-b border-white/5" style="transform-origin: left;"></div>
<div class="strip flex-1 bg-[#050505] border-b border-white/5" style="transform-origin: right;"></div>
<div class="strip flex-1 bg-[#050505] border-b border-white/5" style="transform-origin: left;"></div>
<div class="strip flex-1 bg-[#050505] border-b border-white/5" style="transform-origin: right;"></div>
<div class="strip flex-1 bg-[#050505]" style="transform-origin: left;"></div>
</div>
</div>
</div>
<!-- Registration Marks -->
<div class="absolute top-24 left-6 w-4 h-4 border-t border-l border-white/30 pointer-events-none"></div>
<div class="absolute top-24 right-6 w-4 h-4 border-t border-r border-white/30 pointer-events-none"></div>
<div class="absolute bottom-6 left-6 w-4 h-4 border-b border-l border-white/30 pointer-events-none"></div>
<div class="absolute bottom-6 right-6 w-4 h-4 border-b border-r border-white/30 pointer-events-none"></div>
</section>
<script>
document.addEventListener("DOMContentLoaded", () => {
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduce) {
gsap.set(".strip", { scaleX: 0 });
gsap.set(".strip-reveal", { display: "none" });
gsap.set(".signal-sweep", { x: "100%" });
gsap.set(".hero-reveal", { opacity: 1, y: 0 });
return;
}
const tl = gsap.timeline({ delay: 0.1 });
tl.to(".strip", { scaleX: 0, duration: 0.8, stagger: 0.1, ease: "power3.inOut" })
.to(".signal-sweep", { x: "100%", duration: 0.8, ease: "power2.inOut" }, "-=0.2")
.set(".strip-reveal", { display: "none" });
gsap.from(".hero-reveal", { y: 40, opacity: 0, stagger: 0.1, duration: 1.2, ease: "power4.out", delay: 0.4 });
});
</script>
</div>