Discover The Magic
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,
sans-serif;
overflow-x: hidden;
}
/* Entry Page Section */
.entry-section {
position: relative;
min-height: 100vh;
background: linear-gradient(135deg, #fff9f0 0%, #ffe8d6 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
overflow: hidden;
}
.floating-peanut {
position: absolute;
opacity: 0.15;
pointer-events: none;
}
.floating-peanut-1 {
top: 10%;
left: 8%;
width: 120px;
animation: float1 6s ease-in-out infinite;
}
.floating-peanut-2 {
bottom: 15%;
right: 10%;
width: 100px;
animation: float2 7s ease-in-out infinite;
}
.floating-peanut-3 {
top: 60%;
left: 15%;
width: 80px;
animation: float3 8s ease-in-out infinite;
}
.floating-peanut-4 {
top: 20%;
right: 12%;
width: 90px;
animation: float1 7s ease-in-out infinite;
}
.entry-content {
max-width: 1000px;
text-align: center;
z-index: 2;
animation: fadeInScale 1s ease-out;
}
.universe-title {
font-size: clamp(42px, 8vw, 96px);
font-weight: 900;
background: linear-gradient(
135deg,
#d4a574 0%,
#8b5a2b 50%,
#6b4423 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
letter-spacing: -2px;
line-height: 1.1;
font-family: Georgia, "Times New Roman", serif;
}
.universe-subtitle {
font-size: clamp(20px, 3vw, 32px);
color: #6b4423;
margin-bottom: 50px;
font-weight: 300;
letter-spacing: 3px;
text-transform: uppercase;
}
.universe-description {
font-size: clamp(16px, 2vw, 20px);
color: #8b5a2b;
margin-bottom: 50px;
line-height: 1.8;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.buttons-container {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn-experience {
background: linear-gradient(135deg, #d4a574, #c9a063);
color: #1a0f08;
border: none;
padding: 22px 60px;
font-size: 20px;
font-weight: 700;
border-radius: 50px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 40px rgba(212, 165, 116, 0.4);
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
overflow: hidden;
}
.btn-experience::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.5s;
}
.btn-experience:hover::before {
left: 100%;
}
.btn-experience:hover {
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(212, 165, 116, 0.6);
}
.btn-skip {
background: transparent;
color: #8b5a2b;
border: 2px solid #d4a574;
padding: 20px 60px;
font-size: 18px;
font-weight: 600;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 2px;
}
.btn-skip:hover {
background: rgba(212, 165, 116, 0.1);
border-color: #c9a063;
transform: translateY(-3px);
}
.decorative-line {
width: 100px;
height: 3px;
background: linear-gradient(90deg, transparent, #d4a574, transparent);
margin: 30px auto;
}
/* Experience Section - Hidden by default */
.scroll-experience {
display: none;
position: relative;
height: 400vh;
background: #000;
}
.scroll-experience.active {
display: block;
}
.sticky-container {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
/* Door Structure */
.door-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
z-index: 10;
}
.door {
width: 50%;
height: 100%;
background: linear-gradient(
135deg,
#3d2817 0%,
#2a1a0f 50%,
#1a0f08 100%
);
position: relative;
transition: transform 0.3s ease-out;
box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
}
.door-left {
transform-origin: left;
border-right: 1px solid rgba(139, 90, 43, 0.3);
}
.door-right {
transform-origin: right;
border-left: 1px solid rgba(139, 90, 43, 0.3);
}
.door-handle {
position: absolute;
width: 80px;
height: 20px;
background: linear-gradient(135deg, #8b5a2b, #6b4423);
top: 50%;
border-radius: 25px;
box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2),
0 4px 15px rgba(0, 0, 0, 0.6);
}
.door-left .door-handle {
right: 50px;
}
.door-right .door-handle {
left: 50px;
}
.door-panel {
position: absolute;
border: 2px solid rgba(139, 90, 43, 0.4);
background: linear-gradient(
135deg,
rgba(61, 40, 23, 0.3),
rgba(42, 26, 15, 0.5)
);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}
.door-left .door-panel-1 {
top: 12%;
left: 12%;
width: 65%;
height: 32%;
}
.door-left .door-panel-2 {
bottom: 12%;
left: 12%;
width: 65%;
height: 32%;
}
.door-right .door-panel-1 {
top: 12%;
right: 12%;
width: 65%;
height: 32%;
}
.door-right .door-panel-2 {
bottom: 12%;
right: 12%;
width: 65%;
height: 32%;
}
.light-burst {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: radial-gradient(
circle,
rgba(255, 248, 220, 1) 0%,
rgba(255, 248, 220, 0.8) 20%,
rgba(255, 235, 180, 0) 70%
);
opacity: 0;
transition: all 0.5s ease-out;
pointer-events: none;
z-index: 5;
filter: blur(30px);
}
.space-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(
ellipse at center,
#1a1410 0%,
#0d0a08 100%
);
opacity: 0;
transition: opacity 0.8s ease;
}
.stars {
position: absolute;
width: 100%;
height: 100%;
}
.star {
position: absolute;
background: #ffe8cc;
border-radius: 50%;
animation: twinkle 4s ease-in-out infinite;
box-shadow: 0 0 4px rgba(255, 232, 204, 0.8);
}
.benefits-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 1200px;
height: 80%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.5s ease;
z-index: 20;
}
.benefits-track {
position: relative;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
.benefit-item {
position: absolute;
background: linear-gradient(
135deg,
rgba(61, 40, 23, 0.4),
rgba(42, 26, 15, 0.6)
);
backdrop-filter: blur(20px);
border: 2px solid rgba(139, 90, 43, 0.3);
border-radius: 16px;
padding: 32px 60px;
margin: 20px 0;
font-size: clamp(20px, 3.5vw, 42px);
font-weight: 600;
color: #ffe8cc;
text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
letter-spacing: 0.5px;
max-width: 90%;
}
.benefit-item::before {
content: "•";
margin-right: 12px;
color: #d4a574;
font-size: 1.2em;
font-weight: 900;
}
.benefit-item.highlight {
background: linear-gradient(
135deg,
rgba(139, 90, 43, 0.5),
rgba(107, 68, 35, 0.7)
);
border-color: rgba(212, 165, 116, 0.8);
transform: scale(1.05);
box-shadow: 0 12px 48px rgba(212, 165, 116, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
color: #fff8f0;
}
.scroll-indicator {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
color: #d4a574;
font-size: 16px;
font-weight: 600;
text-align: center;
z-index: 30;
opacity: 1;
transition: opacity 0.3s ease;
letter-spacing: 2px;
text-transform: uppercase;
}
.scroll-arrow {
font-size: 24px;
animation: bounce 2s ease-in-out infinite;
display: block;
margin-top: 12px;
}
.end-message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
opacity: 0;
transition: opacity 0.5s ease;
z-index: 25;
}
.end-message h2 {
font-size: clamp(36px, 6vw, 72px);
font-weight: 900;
background: linear-gradient(
135deg,
#d4a574 0%,
#c9a063 50%,
#b8935c 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 24px;
letter-spacing: 1px;
}
.end-message p {
font-size: clamp(18px, 2vw, 26px);
color: #ffe8cc;
margin-bottom: 40px;
font-weight: 400;
}
.end-button {
background: linear-gradient(135deg, #d4a574, #c9a063);
color: #1a0f08;
border: none;
padding: 20px 60px;
font-size: 18px;
font-weight: 700;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 30px rgba(212, 165, 116, 0.4);
text-transform: uppercase;
letter-spacing: 1px;
}
.end-button:hover {
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(212, 165, 116, 0.6);
background: linear-gradient(135deg, #e0b586, #d4a574);
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes float1 {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-30px) rotate(10deg);
}
}
@keyframes float2 {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-25px) rotate(-8deg);
}
}
@keyframes float3 {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(12deg);
}
}
@keyframes twinkle {
0%,
100% {
opacity: 0.4;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}
@keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-12px);
}
}
@media (max-width: 768px) {
.universe-title {
letter-spacing: -1px;
}
.universe-subtitle {
letter-spacing: 2px;
}
.buttons-container {
flex-direction: column;
align-items: center;
}
.btn-experience,
.btn-skip {
width: 100%;
max-width: 300px;
}
.floating-peanut-1,
.floating-peanut-4 {
width: 80px;
}
.floating-peanut-2,
.floating-peanut-3 {
width: 60px;
}
.benefit-item {
padding: 24px 40px;
}
.door-handle {
width: 60px;
height: 16px;
}
.door-left .door-handle {
right: 30px;
}
.door-right .door-handle {
left: 30px;
}
}
Want to Experience
Our Peanut Universe?
A Journey Through Pure Perfection
Embark on an immersive scroll experience where you'll discover what
makes our peanut butter extraordinary. Unveil the secrets behind every
jar.
const benefits = [
"Crafted from premium roasted peanuts",
"Packed with natural plant protein",
"Absolutely zero palm oil",
"Silky smooth and creamy texture",
"No artificial trans fats",
"Certified 100% vegan friendly",
"Natural energy fuel for your day",
"Rich in heart-healthy nutrients",
"Sweetened naturally, no added sugar",
"Abundant in dietary fiber",
"Non-GMO verified ingredients",
"Sustainably sourced premium quality",
];
const entrySection = document.getElementById("entrySection");
const scrollExperience = document.getElementById("scrollExperience");
const btnExperience = document.getElementById("btnExperience");
const btnSkip = document.getElementById("btnSkip");
// Button handlers
btnExperience.addEventListener("click", () => {
entrySection.style.display = "none";
scrollExperience.classList.add("active");
window.scrollTo(0, 0);
});
btnSkip.addEventListener("click", () => {
// Scroll past both sections or implement your logic
const nextSection = scrollExperience.nextElementSibling;
if (nextSection) {
nextSection.scrollIntoView({ behavior: "smooth" });
}
});
// Experience section logic
const benefitsTrack = document.getElementById("benefitsTrack");
const doorLeft = document.getElementById("doorLeft");
const doorRight = document.getElementById("doorRight");
const lightBurst = document.getElementById("lightBurst");
const spaceBackground = document.getElementById("spaceBackground");
const benefitsContainer = document.getElementById("benefitsContainer");
const scrollIndicator = document.getElementById("scrollIndicator");
const endMessage = document.getElementById("endMessage");
const starsContainer = document.getElementById("starsContainer");
function createStars() {
for (let i = 0; i {
const benefitEl = document.createElement("div");
benefitEl.className = "benefit-item";
benefitEl.textContent = benefit;
benefitEl.style.top = "50%";
benefitEl.style.transform = "translateY(-50%)";
benefitEl.style.opacity = "0";
benefitsTrack.appendChild(benefitEl);
});
}
createBenefitElements();
const benefitElements = document.querySelectorAll(".benefit-item");
function handleScroll() {
if (!scrollExperience.classList.contains("active")) return;
const rect = scrollExperience.getBoundingClientRect();
const scrollProgress = Math.max(
0,
Math.min(1, -rect.top / (rect.height - window.innerHeight))
);
if (scrollProgress 0.3) {
const lightSize = (doorProgress - 0.3) * 2500;
lightBurst.style.width = lightSize + "px";
lightBurst.style.height = lightSize + "px";
lightBurst.style.opacity = Math.min(0.8, (doorProgress - 0.3) * 2);
}
scrollIndicator.style.opacity = 1 - doorProgress;
} else {
doorLeft.style.transform = "perspective(1500px) rotateY(95deg)";
doorRight.style.transform = "perspective(1500px) rotateY(-95deg)";
scrollIndicator.style.opacity = 0;
}
if (scrollProgress > 0.15 && scrollProgress 0.25) {
spaceBackground.style.opacity = 1;
lightBurst.style.opacity = 0;
benefitsContainer.style.opacity = 1;
}
if (scrollProgress > 0.25 && scrollProgress {
const distance = index - benefitsProgress * totalBenefits;
const yPosition = distance * 160;
el.style.transform = `translateY(calc(-50% + ${yPosition}px))`;
const opacity = Math.max(0, 1 - Math.abs(distance) * 0.4);
el.style.opacity = opacity;
if (Math.abs(distance) 0.9) {
const endProgress = (scrollProgress - 0.9) / 0.1;
endMessage.style.opacity = endProgress;
benefitsContainer.style.opacity = 1 - endProgress;
}
}
let ticking = false;
window.addEventListener("scroll", () => {
if (!ticking) {
window.requestAnimationFrame(() => {
handleScroll();
ticking = false;
});
ticking = true;
}
});
handleScroll();
