<div class="transition-overlay" id="transition-overlay">
<div class="loader-logo">
<svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#ffffff" stroke-width="2"><polygon points="12 2 2 22 22 22"></polygon></svg>
</div>
</div>
<div class="page-content">
<div class="stagger-item">
<h1>Welcome to the Future</h1>
</div>
<div class="stagger-item">
<p>The cinematic overlay has smoothly wiped away to reveal this perfectly styled content.</p>
</div>
<div class="stagger-item">
<button class="primary-btn">Explore Now</button>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
background: #f8fafc;
/* Prevent scroll during transition */
overflow: hidden;
}
/* The Solid Fullscreen Overlay */
.transition-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #0f172a;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
/* This cubic bezier creates the satisfying snappy wipe effect */
transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
transform-origin: top center;
}
/* The class JS adds to trigger the wipe up */
.transition-overlay.hidden {
transform: translateY(-100%);
}
.loader-logo {
animation: pulse-logo 1.5s infinite alternate;
}
@keyframes pulse-logo {
0% { transform: scale(0.9); opacity: 0.7; }
100% { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)); }
}
.page-content {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}
.page-content h1 {
font-size: clamp(3rem, 6vw, 5rem);
color: #0f172a;
margin: 0 0 16px 0;
letter-spacing: -1px;
}
.page-content p {
font-size: 1.25rem;
color: #64748b;
max-width: 600px;
margin: 0 0 32px 0;
line-height: 1.6;
}
.primary-btn {
background: #3b82f6;
color: #ffffff;
border: none;
padding: 16px 32px;
border-radius: 30px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
}
/* Staggered entrance animations for content */
.stagger-item {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.page-content.loaded .stagger-item {
opacity: 1;
transform: translateY(0);
}
.page-content.loaded .stagger-item:nth-child(1) { transition-delay: 0.4s; }
.page-content.loaded .stagger-item:nth-child(2) { transition-delay: 0.5s; }
.page-content.loaded .stagger-item:nth-child(3) { transition-delay: 0.6s; }
/* Simulate page load time for the demo */
window.addEventListener("load", function() {
setTimeout(function() {
const overlay = document.getElementById("transition-overlay");
const content = document.querySelector(".page-content");
/* Slide the overlay up */
overlay.classList.add("hidden");
/* Trigger the staggered content entrance */
content.classList.add("loaded");
/* Restore scrollability safely */
document.body.style.overflow = "auto";
}, 1500);
});
