APK FET
he Whispering Navbar is a ritual-based interface designed to evoke a sense of unease, mystery, and discovery. Unlike traditional navigation bars that prioritize clarity and speed, this "Artifact" treats the menu as a locked threshold that must be coaxed open through specific interactions.
Core Features
The Void Eye (Biological Logo): The centerpiece is a radial-gradient "eye" that pulses with a red iris. It serves as both the branding and the first trigger in the ritual sequence. It reacts to mouse proximity, expanding and glowing as if it is aware of the user's presence.
The Ritual Logic: The navbar employs a state-based progression system. Access to the "Forbidden" content is gated behind a 3-step sequence:
Observe (Clicking the Eye)
Ascension
Silence Any deviation from this order resets the "Sigil Count" and triggers a "punishment" (a visual pulse and a cryptic scolding).
Ghostly Whispers: Using CSS pseudo-elements (::before), each link hides a subconscious message that only manifests upon hover. These whispers—like "...nothing is real..."—float into view to unsettle the user.
Dynamic Ambient Lighting: The entire body background is tied to a JavaScript event listener that tracks the mouse position, creating a "flashlight" effect where only the area around the cursor is visible, leaving the rest of the page in deep shadow.
Interactive Storytelling: The navbar communicates directly with the user via a "Hint Text" system, which provides feedback on their progress through the ritual, shifting from cryptic instructions to a welcoming (if ominous) "WELCOME HOME."
Visual Aesthetic
The design leverages Brutalist and Gothic influences, utilizing high-contrast reds and blacks, blurred glows, and the "Special Elite" typewriter font to make the interface feel like a classified document or a forbidden tome.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Whispering Navbar</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200;1,200&family=Special+Elite&display=swap');
:root {
--shadow-color: rgba(255, 0, 0, 0.2);
}
body {
background-color: #050505;
color: #d1d1d1;
font-family: 'Crimson Pro', serif;
overflow-x: hidden;
height: 200vh;
}
.mystic-font {
font-family: 'Special Elite', cursive;
}
/* The Void Pulse */
@keyframes pulse-inner {
0%, 100% { transform: scale(1); filter: blur(0px); opacity: 0.8; }
50% { transform: scale(1.5); filter: blur(2px); opacity: 0.3; }
}
.void-eye {
position: relative;
width: 40px;
height: 40px;
background: radial-gradient(circle, #000 30%, #1a1a1a 100%);
border: 1px solid #333;
border-radius: 50%;
overflow: hidden;
transition: all 0.5s ease;
}
.void-eye::after {
content: '';
position: absolute;
top: 25%; left: 25%;
width: 50%; height: 50%;
background: #ff0000;
border-radius: 50%;
filter: blur(4px);
animation: pulse-inner 4s infinite ease-in-out;
}
.void-eye:hover {
border-color: #ff0000;
box-shadow: 0 0 20px #ff0000;
transform: scale(1.2);
}
/* Ghostly Links */
.ghost-link {
position: relative;
transition: all 0.4s ease;
letter-spacing: 2px;
text-shadow: 0 0 0px transparent;
}
.ghost-link:hover {
color: #fff;
text-shadow: 0 0 8px rgba(255,255,255,0.8);
letter-spacing: 4px;
}
.ghost-link::before {
content: attr(data-whisper);
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
color: #666;
white-space: nowrap;
pointer-events: none;
}
.ghost-link:hover::before {
opacity: 1;
transform: translateX(-50%) translateY(-5px);
}
/* The Ritual Bar Container */
.ritual-nav {
background: rgba(10, 10, 10, 0.8);
backdrop-filter: blur(10px);
border-bottom: 1px solid #222;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
/* Glitch Effect */
.glitch {
position: relative;
}
.glitch:hover::after {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -1px 0 red;
top: 0;
color: white;
background: black;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim 2s infinite linear alternate-reverse;
}
@keyframes noise-anim {
0% { clip: rect(10px, 9999px, 20px, 0); }
20% { clip: rect(40px, 9999px, 50px, 0); }
40% { clip: rect(70px, 9999px, 80px, 0); }
60% { clip: rect(20px, 9999px, 30px, 0); }
80% { clip: rect(90px, 9999px, 100px, 0); }
100% { clip: rect(50px, 9999px, 60px, 0); }
}
</style>
</head>
<body>
<nav class="ritual-nav fixed top-0 w-full p-6 flex items-center justify-between z-50">
<!-- The Eye of the Void -->
<div class="flex items-center space-x-4 cursor-pointer" onclick="ritualStep(1)">
<div class="void-eye" id="main-eye"></div>
<span class="mystic-font text-xs tracking-[0.3em] text-gray-600 hover:text-red-800 transition-colors">OBSERVE</span>
</div>
<!-- Mysterious Links -->
<div class="flex space-x-12">
<a href="#" class="ghost-link" data-whisper="...they are listening..." onclick="ritualStep(2)">ASCENSION</a>
<a href="#" class="ghost-link" data-whisper="...nothing is real..." onclick="ritualStep(3)">SILENCE</a>
<a href="#" class="ghost-link" data-whisper="...the door is locked..." onclick="revealSecret()">FORBIDDEN</a>
</div>
<!-- The Echo Counter -->
<div class="text-[10px] text-gray-700 italic flex flex-col items-end">
<span>SIGILS COLLECTED</span>
<span id="sigil-count" class="text-red-900 font-bold">0 / 3</span>
</div>
</nav>
<main class="flex flex-col items-center justify-center min-h-screen text-center px-4">
<div id="fog-overlay" class="fixed inset-0 pointer-events-none opacity-20 bg-[radial-gradient(circle,transparent_20%,#000_100%)]"></div>
<div class="z-10 space-y-8">
<h1 class="text-4xl md:text-6xl italic font-thin tracking-tighter opacity-40 transition-opacity hover:opacity-100 duration-1000" id="main-heading">
The walls have ears. The cursor has eyes.
</h1>
<p id="hint-text" class="mystic-font text-sm text-gray-500 max-w-lg">
Seek the three sigils in the correct order to open the threshold.
Begin with the Eye, then rise, then fade.
</p>
<div id="secret-room" class="hidden mt-12 p-8 border border-red-900 bg-red-950/10 rounded-lg animate-pulse">
<p class="text-red-500 uppercase tracking-widest text-xs mb-4">The Forbidden Truth</p>
<p class="italic text-xl">"The navigation bar is not a menu. It is a cage."</p>
</div>
</div>
</main>
<script>
let step = 0;
const sigilDisplay = document.getElementById('sigil-count');
const hintText = document.getElementById('hint-text');
const mainHeading = document.getElementById('main-heading');
function ritualStep(n) {
if (n === step + 1) {
step = n;
sigilDisplay.innerText = `${step} / 3`;
sigilDisplay.classList.add('text-red-500');
// Feedback
if(step === 1) hintText.innerText = "The Eye sees you. Now, Ascend.";
if(step === 2) hintText.innerText = "You have risen. Now, seek the Silence.";
if(step === 3) {
hintText.innerText = "The threshold is ready. Click the Forbidden.";
mainHeading.innerText = "WELCOME HOME";
mainHeading.classList.add('text-red-600', 'opacity-100');
}
} else {
// Reset on wrong order
step = 0;
sigilDisplay.innerText = `0 / 3`;
sigilDisplay.classList.remove('text-red-500');
hintText.innerText = "The sequence was broken. Start again at the Eye.";
}
}
function revealSecret() {
if (step === 3) {
document.getElementById('secret-room').classList.remove('hidden');
document.body.style.backgroundColor = "#0a0000";
} else {
// Punishment for clicking out of turn
const phrases = ["NOT YET", "PATIENCE", "YOU ARE UNWORTHY", "LISTEN TO THE WHISPERS"];
hintText.innerText = phrases[Math.floor(Math.random() * phrases.length)];
document.body.classList.add('animate-pulse');
setTimeout(() => document.body.classList.remove('animate-pulse'), 500);
}
}
// Mouse shadow effect for mystery
document.addEventListener('mousemove', (e) => {
const x = (e.clientX / window.innerWidth) * 100;
const y = (e.clientY / window.innerHeight) * 100;
document.body.style.background = `radial-gradient(circle at ${x}% ${y}%, #111 0%, #050505 50%)`;
});
</script>
</body>
</html>