Here's a **"Dreamscape Web Navigator"** - a surreal, fluid interface where websites exist as constellations in a constantly shifting dream-like space that responds to your thoughts (via mouse movements) and changes form as you interact with it:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dreamscape Web Navigator</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #0a0a1a;
font-family: 'Arial', sans-serif;
}
#dreamCanvas {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.dream-node {
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #8a2be2, #4b0082);
box-shadow: 0 0 40px rgba(138, 43, 226, 0.6);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
transition: all 1.5s ease-in-out;
overflow: hidden;
transform-origin: center;
filter: brightness(1);
}
.dream-node.active {
box-shadow: 0 0 80px rgba(255, 215, 0, 0.9);
z-index: 3;
filter: brightness(1.5);
transform: scale(1.3);
}
.dream-node .iframe-wrapper {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
opacity: 0.5;
transition: opacity 1s;
transform: rotate(0deg);
}
.dream-node.active .iframe-wrapper {
opacity: 0.9;
transform: rotate(5deg);
}
.dream-node iframe {
width: 100%;
height: 100%;
border: none;
pointer-events: none;
}
.dream-node .node-title {
position: absolute;
bottom: -30px;
left: 0;
right: 0;
color: #e6e6fa;
text-align: center;
font-size: 12px;
text-shadow: 0 0 10px #4b0082;
opacity: 0;
transition: opacity 1s;
font-style: italic;
}
.dream-node:hover .node-title {
opacity: 1;
}
#mainPortal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vw;
height: 70vh;
background: rgba(20, 10, 40, 0.95);
border-radius: 50%;
box-shadow: 0 0 100px rgba(138, 43, 226, 0.8);
z-index: 10;
display: none;
flex-direction: column;
overflow: hidden;
border: 2px solid #9370db;
transition: all 2s ease-in-out;
}
#mainPortal.active {
display: flex;
border-radius: 20px;
animation: portalGlow 4s infinite alternate;
}
@keyframes portalGlow {
0% { box-shadow: 0 0 100px rgba(138, 43, 226, 0.8); }
100% { box-shadow: 0 0 150px rgba(255, 215, 0, 0.9); }
}
#portalIframe {
flex: 1;
border: none;
background: #000;
}
#portalTitle {
padding: 15px;
background: linear-gradient(to right, #4b0082, #8a2be2);
color: #e6e6fa;
text-align: center;
font-size: 18px;
letter-spacing: 2px;
font-style: italic;
}
#dreamControls {
position: fixed;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 30px;
z-index: 20;
}
.dream-btn {
width: 70px;
height: 70px;
border-radius: 50%;
background: rgba(30, 15, 60, 0.7);
border: 2px solid #9370db;
color: #e6e6fa;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 28px;
box-shadow: 0 0 30px rgba(147, 112, 219, 0.6);
transition: all 1s;
opacity: 0.7;
}
.dream-btn:hover {
background: rgba(75, 0, 130, 0.8);
transform: scale(1.2) rotate(15deg);
opacity: 1;
box-shadow: 0 0 50px rgba(255, 215, 0, 0.7);
}
#dreamStats {
position: fixed;
top: 30px;
left: 30px;
color: #e6e6fa;
background: rgba(10, 5, 20, 0.5);
padding: 15px;
border-radius: 10px;
z-index: 20;
font-size: 14px;
font-style: italic;
border: 1px solid #483d8b;
}
.dream-link {
position: absolute;
height: 3px;
background: linear-gradient(to right, rgba(138, 43, 226, 0.2), rgba(147, 112, 219, 0.7));
transform-origin: 0 0;
z-index: 1;
border-radius: 50%;
transition: all 1.5s ease-in-out;
}
.thought-bubble {
position: absolute;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
filter: blur(5px);
z-index: 0;
opacity: 0;
animation: floatUp 4s forwards;
}
@keyframes floatUp {
0% { transform: translateY(0); opacity: 0.8; }
100% { transform: translateY(-100px); opacity: 0; }
}
#moon {
position: fixed;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background: radial-gradient(circle at 30% 30%, #f5f5dc, #d3d3c0);
border-radius: 50%;
z-index: 0;
opacity: 0.1;
filter: blur(10px);
transition: all 10s linear;
}
</style>
</head>
<body>
<div id="moon"></div>
<canvas id="dreamCanvas"></canvas>
<div id="nodesContainer">
<!-- Dream nodes will be added by JavaScript -->
</div>
<div id="linksContainer">
<!-- Dream links will be added by JavaScript -->
</div>
<div id="thoughtsContainer">
<!-- Thought bubbles will be added by JavaScript -->
</div>
<div id="mainPortal">
<div id="portalTitle">Dream Portal</div>
<iframe id="portalIframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
<div id="dreamControls">
<div class="dream-btn" id="reconfigureBtn">🌀</div>
<div class="dream-btn" id="newDreamBtn">✨</div>
<div class="dream-btn" id="lucidBtn">👁️</div>
</div>
<div id="dreamStats">
Constellations: <span id="nodeCount">0</span> |
Connections: <span id="linkCount">0</span> |
Dream Depth: <span id="dreamDepth">1</span>
</div>
<script>
// Dream parameters
const NODE_COUNT = 7;
const MAX_LINKS = 15;
const RECONFIG_INTERVAL = 20000;
const MOON_SPEED = 0.02;
// Sites data with dream categories
const dreamSites = [
{ url: 'https://advertica13.blogspot.com/', title: 'Whispering Pages', category: 'library', color: '#9370db' },
{ url: 'https://advertica12.blogspot.com/', title: 'Fading Memories', category: 'library', color: '#8a2be2' },
{ url: 'https://www.softmod.shop/', title: 'Treasure Cove', category: 'market', color: '#daa520' },
{ url: 'https://example.com/news', title: 'Echo Chamber', category: 'square', color: '#4682b4' },
{ url: 'https://example.com/art', title: 'Surreal Gallery', category: 'gallery', color: '#ff69b4' },
{ url: 'https://example.com/music', title: 'Harmonic Void', category: 'orchestra', color: '#20b2aa' },
{ url: 'https://example.com/forum', title: 'Collective Unconscious', category: 'square', color: '#778899' }
];
// DOM elements
const dreamCanvas = document.getElementById('dreamCanvas');
const ctx = dreamCanvas.getContext('2d');
const nodesContainer = document.getElementById('nodesContainer');
const linksContainer = document.getElementById('linksContainer');
const thoughtsContainer = document.getElementById('thoughtsContainer');
const mainPortal = document.getElementById('mainPortal');
const portalIframe = document.getElementById('portalIframe');
const portalTitle = document.getElementById('portalTitle');
const reconfigureBtn = document.getElementById('reconfigureBtn');
const newDreamBtn =
