Dreamtap
Dreamtap makes your AI more creative by providing it sources of inspiration.
Content
<!-- Favicons -->
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="favicon-512x512.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700&family=Barlow+Condensed:wght@500;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Fira+Mono:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;600&family=IBM+Plex+Serif:wght@400;600&family=JetBrains+Mono:wght@400;600&family=Montserrat:wght@400;600;700&family=Oxanium:wght@400;600&family=Poppins:wght@400;600;700&family=Playfair+Display:wght@400;600;700&family=Rajdhani:wght@400;600;700&family=Source+Code+Pro:wght@400;600;700&family=Space+Grotesk:wght@400;600;700&family=Sora:wght@400;600;700&display=swap">
<link rel="stylesheet" href="styles/theme-controls.css">
<link id="theme-stylesheet" rel="stylesheet" href="styles/retro.css">
<div class="theme-controls">
<button class="style-toggle" type="button" id="style-toggle" aria-label="Roll a new DreamTap vibe" title="Roll a new DreamTap vibe">🎲</button>
</div>
<div class="container">
<header>
<div class="logo-container">
<h1 class="glitch" data-text="DREAMTAP">DREAMTAP</h1>
<!-- <img src="logo.png" alt="DreamTap" class="logo-image"> -->
</div>
<div class="marquee-container">
<div class="marquee">
⚡ Stop reading the same story 20 times ⚡ Explore different ideas ⚡ The AIs get bored too! ⚡
</div>
</div>
<p class="hero-tagline">Dreamtap: Inspire your AI to be more creative</p>
<p class="hero-subheadline">Dreamtap is a chatbot plugin that gives your AI wide-ranging sources of inspiration to do better at creative tasks - writing, design, etc.<br><br>Dreamtap works with Claude, ChatGPT (beta), and other tools that support MCP. <br><br>Dreamtap is free and doesn't see your chat content or know who you are.</p>
<div class="hero-cta">
<button class="big-button" type="button" onclick="window.location.href='connect.html'">
→ Get Dreamtap
</button>
</div>
</header>
<section class="content-stack">
<article class="neon-panel" id="mode-collapse">
<h2>Why?</h2>
<p>When you ask AI to write stories, you've probably noticed they are frequently incredibly similar. Claude, for example, likes lighthouses and cartographers.</p>
<p>This is <strong>mode collapse</strong> – the AI defaulting to the safest, most average patterns in its training data. Every story becomes a slight variation of the same template.</p>
</article>
<article class="neon-panel" id="how-dreamtap-works">
<h2>How Dreamtap Fixes This</h2>
<p>Dreamtap injects <strong>randomized sources of inspiration</strong> before your AI starts generating. Instead of letting the model slide into its default patterns, it inspires the model with some concepts unconnected to your prompt. Claude decides by itself when it needs more inspiration and uses Dreamtap. ChatGPT is a bit worse at this, and you'll need to use the tool manually.</p>
</article>
<article class="neon-panel" id="difference">
<h2>The Difference in Practice</h2>
<p>Below are stories written by Claude with the same prompt: <em>"Write an inspired short story"</em></p>
<div class="story-showcase">
<div class="story-tabs">
<div class="tab-group">
<h3>Without Dreamtap</h3>
<div class="tab-buttons">
<button class="tab-button active" data-story="story1-no-dreamtap">Response 1</button>
<button class="tab-button" data-story="story2-no-dreamtap">Response 2</button>
<button class="tab-button" data-story="story3-no-dreamtap">Response 3</button>
</div>
</div>
<div class="tab-group">
<h3>With Dreamtap</h3>
<div class="tab-buttons">
<button class="tab-button" data-story="story4-dreamtap">Response 4</button>
<button class="tab-button" data-story="story5-dreamtap">Response 5</button>
<button class="tab-button" data-story="story6-dreamtap">Response 6</button>
</div>
</div>
</div>
<div class="story-content code-block" id="story-display">
<p>Loading story...</p>
</div>
</div>
</article>
</section>
<div class="hero-cta">
<button class="big-button" type="button" onclick="window.location.href='connect.html'">
→ Get Dreamtap
</button>
</div>
<!-- <div class="api-section">
<center>
<h3>🖥️ MCP ENDPOINT 🖥️</h3>
</center>
<div class="code-block">
> CONNECTOR URL: https://dreamtap.xyz/mcp<br>
> PROTOCOL: Model Context Protocol<br>
> STATUS: <span class="blink">ONLINE</span><br>
> READY FOR: Claude + ChatGPT
</div>
</div> -->
<footer class="site-footer">
<a href="https://sergey.page" target="_blank" rel="noopener noreferrer">Made by Sergey Alexashenko</a>
</footer>
</div>
<script>
const themes = [
{ id: 'retro', href: 'styles/retro.css' },
// { id: 'minimal', href: 'styles/minimal.css' },
{ id: 'orbital', href: 'styles/orbital.css' },
{ id: 'orchard', href: 'styles/orchard.css' },
{ id: 'cascade', href: 'styles/cascade.css' },
{ id: 'resonance', href: 'styles/resonance.css' },
{ id: 'faultline', href: 'styles/faultline.css' },
{ id: 'verdant', href: 'styles/verdant.css' },
{ id: 'quasar', href: 'styles/quasar.css' },
{ id: 'manifest', href: 'styles/manifest.css' },
{ id: 'aurorae', href: 'styles/aurorae.css' },
{ id: 'abyssal-algorithm', href: 'styles/abyssal-algorithm.css' },
{ id: 'enzyme-optic', href: 'styles/enzyme-optic.css' },
{ id: 'consciousness-network', href: 'styles/consciousness-network.css' },
{ id: 'matrix-christmas', href: 'styles/matrix-christmas.css' }
];
let styleLink = document.getElementById('theme-stylesheet');
const styleToggle = document.getElementById('style-toggle');
const themePicker = document.getElementById('theme-picker');
const themesById = Object.fromEntries(themes.map((theme) => [theme.id, theme]));
let pendingThemeId = null;
let pendingLink = null;
// Load saved theme or use default
const savedThemeId = localStorage.getItem('dreamtap-theme');
const initialTheme = savedThemeId && themesById[savedThemeId]
? themesById[savedThemeId]
: themes.find((theme) => theme.href === styleLink?.getAttribute('href')) || themes[0];
let currentThemeId = initialTheme.id;
function formatThemeLabel(id) {
return id
.replace(/[-_]/g, ' ')
.replace(/\w/g, (char) => char.toUpperCase());
}
function swapStylesheet(theme) {
if (!theme) return;
if (!styleLink) {
styleLink = document.createElement('link');
styleLink.rel = 'stylesheet';
styleLink.id = 'theme-stylesheet';
document.head.appendChild(styleLink);
}
if (styleLink.getAttribute('href') === theme.href && !pendingLink) {
return;
}
const previousLink = styleLink;
const newLink = document.createElement('link');
newLink.rel = 'stylesheet';
newLink.href = theme.href;
newLink.id = 'theme-stylesheet-pending';
newLink.dataset.themeId = theme.id;
pendingThemeId = theme.id;
if (pendingLink && pendingLink !== newLink) {
pendingLink.remove();
}
pendingLink = newLink;
newLink.addEventListener('load', () => {
if (pendingThemeId !== theme.id) {
newLink.remove();
return;
}
newLink.id = 'theme-stylesheet';
styleLink = newLink;
pendingLink = null;
pendingThemeId = null;
if (previousLink && previousLink !== newLink && previousLink.parentNode) {
previousLink.parentNode.removeChild(previousLink);
}
});
newLink.addEventListener('error', () => {
if (pendingLink === newLink) {
pendingLink = null;
pendingThemeId = null;
}
newLink.remove();
});
const parent = previousLink && previousLink.parentNode ? previousLink.parentNode : document.head;
parent.insertBefore(newLink, previousLink ? previousLink.nextSibling : null);
}
function applyTheme(themeId) {
const theme = themesById[themeId];
if (!theme) return;
// Clean up previous theme effects
if (window.themeCleanup) {
window.themeCleanup();
window.themeCleanup = null;
}
swapStylesheet(theme);
document.body.setAttribute('data-theme', theme.id);
currentThemeId = theme.id;
// Save theme preference
localStorage.setItem('dreamtap-theme', theme.id);
if (themePicker && themePicker.value !== theme.id) {
themePicker.value = theme.id;
}
// Apply theme-specific effects
applyThemeEffects(theme.id);
}
// Theme-specific content and effects
function applyThemeEffects(themeId) {
// Remove any existing theme-specific content
document.querySelectorAll('.theme-specific-content').forEach(el => el.remove());
switch(themeId) {
case 'abyssal-algorithm':
// Add floating particles
const particlesContainer = document.createElement('div');
particlesContainer.className = 'theme-specific-content';
particlesContainer.style.cssText = 'position:fixed;inset:0;pointer-events:none;z-index:999';
for (let i = 0; i < 20; i++) {
const particle = document.createElement('div');
particle.style.cssText = `
position:absolute;
width:2px;
height:2px;
background:#00ffd5;
box-shadow:0 0 10px #00ffd5;
left:${Math.random() * 100}%;
top:${Math.random() * 100}%;
animation:float-particle ${10 + Math.random() * 20}s linear infinite;
`;
particlesContainer.appendChild(particle);
}
document.body.appendChild(particlesContainer);
// Add custom style for particles animation
const style = document.createElement('style');
style.className = 'theme-specific-content';
style.textContent = `
@keyframes float-particle {
0% { transform: translateY(100vh) translateX(0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-100vh) translateX(${Math.random() * 200 - 100}px); opacity: 0; }
}
`;
document.head.appendChild(style);
// Custom console message
console.log('%c⚡ ABYSSAL ALGORITHM ACTIVATED ⚡', 'color:#00ffd5;font-size:20px;text-shadow:0 0 20px #00ffd5');
// Cleanup function for this theme
window.themeCleanup = () => {
console.log('Cleaning up Abyssal Algorithm effects...');
};
break;
case 'retro':
// Add CRT flicker effect
const flicker = document.createElement('div');
flicker.className = 'theme-specific-content';
flicker.style.cssText = `
position:fixed;
inset:0;
pointer-events:none;
z-index:9999;
background:linear-gradient(transparent 50%, rgba(0,0,0,0.03) 50%);
background-size:100% 4px;
animation:crt-flicker 0.15s infinite;
mix-blend-mode:multiply;
`;
document.body.appendChild(flicker);
const retroStyle = document.createElement('style');
retroStyle.className = 'theme-specific-content';
retroStyle.textContent = `
@keyframes crt-flicker {
0% { opacity: 0.9; }
50% { opacity: 1; }
100% { opacity: 0.85; }
}
`;
document.head.appendChild(retroStyle);
break;
case 'orbital':
// Create orbital system with planets
const orbitalSystem = document.createElement('div');
orbitalSystem.className = 'theme-specific-content';
orbitalSystem.style.cssText = 'position:fixed;inset:0;pointer-events:none;z-index:0';
// Create multiple orbital rings
for (let i = 0; i < 3; i++) {
const orbit = document.createElement('div');
orbit.style.cssText = `
position:absolute;
left:50%;
top:50%;
width:${300 + i * 200}px;
height:${300 + i * 200}px;
border:1px solid rgba(140,228,227,0.1);
border-radius:50%;
transform:translate(-50%,-50%) rotateX(60deg);
animation:rotate-orbit ${20 + i * 10}s linear infinite;
`;
const planet = document.createElement('div');
planet.style.cssText = `
position:absolute;
width:${8 - i * 2}px;
height:${8 - i * 2}px;
background:radial-gradient(circle at 30% 30%, #8ce9e3, #05142d);
border-radius:50%;
top:-${4 - i}px;
left:50%;
transform:translateX(-50%);
box-shadow:0 0 20px rgba(140,228,227,0.8);
`;
orbit.appendChild(planet);
orbitalSystem.appendChild(orbit);
}
const orbitalStyle = document.createElement('style');
orbitalStyle.className = 'theme-specific-content';
orbitalStyle.textContent = `
@keyframes rotate-orbit {
from { transform: translate(-50%,-50%) rotateX(60deg) rotateZ(0deg); }
to { transform: translate(-50%,-50%) rotateX(60deg) rotateZ(360deg); }
}
`;
document.head.appendChild(orbitalStyle);
document.body.appendChild(orbitalSystem);
break;
case 'orchard':
// Falling petals animation
const petalContainer = document.createElement('div');
petalContainer.className = 'theme-specific-content';
petalContainer.style.cssText = 'position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden';
const petalStyle = document.createElement('style');
petalStyle.className = 'theme-specific-content';
petalStyle.textContent = `
@keyframes fall-petal {
0% {
transform: translateY(-100px) rotate(0deg);
opacity: 0;
}
10% { opacity: 1; }
100% {
transform: translateY(calc(100vh + 100px)) rotate(720deg);
opacity: 0;
}
}
@keyframes sway {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(30px); }
}
`;
document.head.appendChild(petalStyle);
const petalInterval = setInterval(() => {
const petal = document.createElement('div');
petal.style.cssText = `
position:absolute;
width:10px;
height:10px;
background:radial-gradient(circle, #ffb3d1, #ff8fab);
border-radius:0 100% 0 100%;
left:${Math.random() * 100}%;
animation:fall-petal ${5 + Math.random() * 5}s linear, sway ${2 + Math.random() * 2}s ease-in-out infinite;
`;
petalContainer.appendChild(petal);
setTimeout(() => petal.remove(), 10000);
}, 800);
document.body.appendChild(petalContainer);
window.themeCleanup = () => clearInterval(petalInterval);
break;
case 'cascade':
// Water cascade effect
const cascadeContainer = document.createElement('div');
cascadeContainer.className = 'theme-specific-content';
cascadeContainer.style.cssText = 'position:fixed;inset:0;pointer-events:none;z-index:1';
// Create water droplets
for (let i = 0; i < 15; i++) {
const droplet = document.createElement('div');
droplet.style.cssText = `
position:absolute;
width:4px;
height:20px;
background:linear-gradient(180deg, transparent, #45d5ff, transparent);
left:${Math.random() * 100}%;
top:-20px;
opacity:0.6;
animation:fall-droplet ${1 + Math.random() * 2}s linear infinite;
animation-delay:${Math.random() * 3}s;
`;
cascadeContainer.appendChild(droplet);
}
// Ripple effect on click
const rippleHandler = (e) => {
const ripple = document.createElement('div');
ripple.className = 'theme-specific-content';
ripple.style.cssText = `
position:fixed;
width:20px;
height:20px;
border:2px solid rgba(69,213,255,0.5);
border-radius:50%;
left:${e.clientX - 10}px;
top:${e.clientY - 10}px;
pointer-events:none;
animation:ripple-expand 1s ease-out;
`;
document.body.appendChild(ripple);
setTimeout(() => ripple.remove(), 1000);
};
document.addEventListener('click', rippleHandler);
const cascadeStyle = document.createElement('style');
cascadeStyle.className = 'theme-specific-content';
cascadeStyle.textContent = `
@keyframes fall-droplet {
to { transform: translateY(100vh); }
}
@keyframes ripple-expand {
to {
width: 100px;
height: 100px;
margin-left: -40px;
margin-top: -40px;
opacity: 0;
}
}
`;
document.head.appendChild(cascadeStyle);
document.body.appendChild(cascadeContainer);
window.themeCleanup = () => {
document.removeEventListener('click', rippleHandler);
};
break;
case 'resonance':
// Sound wave visualizer
const waveContainer = document.createElement('div');
waveContainer.className = 'theme-specific-content';
waveContainer.style.cssText = 'position:fixed;bottom:0;left:0;right:0;height:100px;pointer-events:none;z-index:999';
for (let i = 0; i < 50; i++) {
const bar = document.createElement('div');
bar.style.cssText = `
position:absolute;
bottom:0;
left:${i * 2}%;
width:1.5%;
background:linear-gradient(180deg, #9df1ff, #8a7bff);
opacity:0.6;
animation:wave-bar ${0.5 + Math.random() * 1}s ease-in-out infinite alternate;
animation-delay:${i * 0.02}s;
`;
waveContainer.appendChild(bar);
}
const resonanceStyle = document.createElement('style');
resonanceStyle.className = 'theme-specific-content';
resonanceStyle.textContent = `
@keyframes wave-bar {
from { height: ${5 + Math.random() * 10}px; }
to { height: ${20 + Math.random() * 60}px; }
}
`;
document.head.appendChild(resonanceStyle);
document.body.appendChild(waveContainer);
break;
case 'faultline':
// Tectonic crack effect
const crackContainer = document.createElement('div');
crackContainer.className = 'theme-specific-content';
crackContainer.style.cssText = 'position:fixed;inset:0;pointer-events:none;z-index:999';
const crack = document.createElement('div');
crack.style.cssText = `
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,50 L20,48 L35,52 L50,47 L65,53 L80,49 L100,51' stroke='%23ff5a5a' stroke-width='0.5' fill='none' opacity='0.3'/%3E%3C/svg%3E") repeat-x;
background-position:0 50%;
animation:crack-shift 10s ease-in-out infinite;
`;
crackContainer.appendChild(crack);
// Occasional shake
const shakeInterval = setInterval(() => {
document.body.style.animation = 'tectonic-shake 0.2s ease-in-out';
setTimeout(() => {
document.body.style.animation = '';
}, 200);
}, 8000);
const faultlineStyle = document.createElement('style');
faultlineStyle.className = 'theme-specific-content';
faultlineStyle.textContent = `
@keyframes crack-shift {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-5px); }
}
@keyframes tectonic-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-2px); }
75% { transform: translateX(2px); }
}
`;
document.head.appendChild(faultlineStyle);
document.body.appendChild(crackContainer);
window.themeCleanup = () => clearInterval(shakeInterval);
break;
case 'verdant':
// Growing vines
const vineContainer = document.createElement('div');
vineContainer.className = 'theme-specific-content';
vineContainer.style.cssText = 'position:fixed;inset:0;pointer-events:none;z-index:0';
const createVine = (x, side) => {
const vine = document.createElement('div');
vine.style.cssText = `
position:absolute;
${side}:${x}px;
bottom:0;
width:2px;
height:0;
background:linear-gradient(180deg, #a8c0ad, #1b4230);
animation:grow-vine 5s ease-out forwards;
transform-origin:bottom;
`;
// Add leaves
for (let i = 0; i < 5; i++) {
const leaf = document.createElement('div');
leaf.style.cssText = `
position:absolute;
width:15px;
height:8px;
background:radial-gradient(ellipse, #c9edcd, #527d5c);
border-radius:0 100% 0 100%;
${Math.random() > 0.5 ? 'left' : 'right'}:0;
bottom:${i * 20}%;
transform:rotate(${Math.random() * 60 - 30}deg);
opacity:0;
animation:show-leaf 0.5s ease-out forwards;
animation-delay:${1 + i * 0.5}s;
`;
vine.appendChild(leaf);
}
vineContainer.appendChild(vine);
};
createVine(50, 'left');
createVine(100, 'left');
createVine(50, 'right');
createVine(100, 'right');
const verdantStyle = document.createElement('style');
verdantStyle.className = 'theme-specific-content';
verdantStyle.textContent = `
@keyframes grow-vine {
to { height: 60vh; }
}
@keyframes show-leaf {
to { opacity: 0.7; }
}
`;
document.head.appendChild(verdantStyle);
document.body.appendChild(vineContainer);
break;
case 'quasar':
// Pulsating energy burst
const quasarCore = document.createElement('div');
quasarCore.className = 'theme-specific-content';
quasarCore.style.cssText = `
position:fixed;
left:50%;
top:50%;
width:100px;
height:100px;
transform:translate(-50%,-50%);
pointer-events:none;
z-index:0;
`;
const core = document.createElement('div');
core.style.cssText = `
width:100%;
height:100%;
background:radial-gradient(circle, rgba(168,139,255,0.8), transparent);
border-radius:50%;
animation:quasar-pulse 3s ease-in-out infinite;
`;
const ring = document.createElement('div');
ring.style.cssText = `
position:absolute;
inset:-50%;
border:2px solid rgba(168,139,255,0.3);
border-radius:50%;
animation:quasar-expand 3s linear infinite;
`;
quasarCore.appendChild(core);
quasarCore.appendChild(ring);
const quasarStyle = document.createElement('style');
quasarStyle.className = 'theme-specific-content';
quasarStyle.textContent = `
@keyframes quasar-pulse {
0%, 100% {
transform: scale(1);
filter: brightness(1);
}
50% {
transform: scale(1.5);
filter: brightness(1.5);
}
}
@keyframes quasar-expand {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(3);
opacity: 0;
}
}
`;
document.head.appendChild(quasarStyle);
document.body.appendChild(quasarCore);
break;
case 'manifest':
// Typewriter effect on headings
const headings = document.querySelectorAll('h1, h2, h3');
const originalTexts = new Map();
headings.forEach(heading => {
const text = heading.textContent;
originalTexts.set(heading, text);
heading.textContent = '';
let i = 0;
const typeInterval = setInterval(() => {
if (i < text.length) {
heading.textContent += text[i];
i++;
} else {
clearInterval(typeInterval);
}
}, 50);
});
// Stamp effect
const stamp = document.createElement('div');
stamp.className = 'theme-specific-content';
stamp.style.cssText = `
position:fixed;
top:20px;
left:20px;
padding:10px 20px;
border:3px solid #f4ba5c;
color:#f4ba5c;
font-weight:bold;
transform:rotate(-5deg);
text-transform:uppercase;
letter-spacing:2px;
pointer-events:none;
z-index:1000;
animation:stamp-appear 0.5s ease-out;
`;
stamp.textContent = 'CLASSIFIED';
const manifestStyle = document.createElement('style');
manifestStyle.className = 'theme-specific-content';
manifestStyle.textContent = `
@keyframes stamp-appear {
from {
transform: rotate(-5deg) scale(3);
opacity: 0;
}
to {
transform: rotate(-5deg) scale(1);
opacity: 1;
}
}
`;
document.head.appendChild(manifestStyle);
document.body.appendChild(stamp);
window.themeCleanup = () => {
headings.forEach((heading, i) => {
heading.textContent = originalTexts.get(heading);
});
};
break;
case 'aurorae':
// Northern lights effect
const auroraContainer = document.createElement('div');
auroraContainer.className = 'theme-specific-content';
auroraContainer.style.cssText = 'position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden';
for (let i = 0; i < 3; i++) {
const aurora = document.createElement('div');
aurora.style.cssText = `
position:absolute;
left:${-20 + i * 30}%;
top:-50%;
width:150%;
height:100%;
background:linear-gradient(180deg,
transparent,
rgba(130,238,175,0.1),
rgba(244,221,152,0.1),
rgba(185,168,242,0.1),
transparent);
transform:rotate(${-30 + i * 15}deg);
animation:aurora-dance ${10 + i * 5}s ease-in-out infinite;
filter:blur(40px);
`;
auroraContainer.appendChild(aurora);
}
const auroraStyle = document.createElement('style');
auroraStyle.className = 'theme-specific-content';
auroraStyle.textContent = `
@keyframes aurora-dance {
0%, 100% {
transform: translateX(0) rotate(-30deg);
opacity: 0.5;
}
50% {
transform: translateX(100px) rotate(-20deg);
opacity: 0.8;
}
}
`;
document.head.appendChild(auroraStyle);
document.body.appendChild(auroraContainer);
break;
case 'minimal':
// Subtle breathing effect
const breathInterval = setInterval(() => {
const elements = document.querySelectorAll('.neon-panel, .api-section');
elements.forEach((el, i) => {
el.style.transition = 'transform 4s ease-in-out';
el.style.transform = 'scale(1.01)';
setTimeout(() => {
el.style.transform = 'scale(1)';
}, 2000);
});
}, 4000);
// Subtle cursor trail
let mouseX = 0, mouseY = 0;
const cursor = document.createElement('div');
cursor.className = 'theme-specific-content';
cursor.style.cssText = `
position:fixed;
width:20px;
height:20px;
border:1px solid rgba(245,245,245,0.2);
border-radius:50%;
pointer-events:none;
z-index:10000;
transition:transform 0.2s ease-out;
`;
document.body.appendChild(cursor);
const mouseMoveHandler = (e) => {
cursor.style.transform = `translate(${e.clientX - 10}px, ${e.clientY - 10}px)`;
};
document.addEventListener('mousemove', mouseMoveHandler);
window.themeCleanup = () => {
clearInterval(breathInterval);
document.removeEventListener('mousemove', mouseMoveHandler);
};
break;
case 'consciousness-network':
// Create mycelium network SVG
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('class', 'theme-specific-content');
svg.style.cssText = `
position:fixed;
inset:0;
width:100%;
height:100%;
pointer-events:none;
z-index:0;
opacity:0.15;
`;
// Generate mycelial connections
const nodes = [];
const connections = [];
// Create nodes with better distribution
for (let i = 0; i < 12; i++) {
nodes.push({
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight,
vx: (Math.random() - 0.5) * 0.3,
vy: (Math.random() - 0.5) * 0.3,
size: 2 + Math.random() * 4,
pulse: Math.random() * Math.PI * 2
});
}
// Draw initial connections with optimizations
let frame = 0;
const drawConnections = () => {
// Clear less frequently for performance
if (frame % 3 === 0) {
svg.innerHTML = '';
// Draw mycelial strands
for (let i = 0; i < nodes.length; i++) {
for (let j = i + 1; j < nodes.length; j++) {
const dist = Math.hypot(nodes[i].x - nodes[j].x, nodes[i].y - nodes[j].y);
if (dist < 250) {
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
const curve = Math.sin(frame * 0.01 + i + j) * 15;
const midX = (nodes[i].x + nodes[j].x) / 2 + curve;
const midY = (nodes[i].y + nodes[j].y) / 2 + curve;
path.setAttribute('d', `M${nodes[i].x},${nodes[i].y} Q${midX},${midY} ${nodes[j].x},${nodes[j].y}`);
path.setAttribute('stroke', '#c9b79c');
path.setAttribute('stroke-width', Math.max(0.5, (1 - dist/250) * 1.5));
path.setAttribute('fill', 'none');
path.setAttribute('opacity', Math.max(0.1, (1 - dist/250) * 0.4));
svg.appendChild(path);
}
}
}
// Draw nodes with pulsing
nodes.forEach((node, i) => {
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', node.x);
circle.setAttribute('cy', node.y);
const pulseSize = node.size + Math.sin(frame * 0.02 + node.pulse) * 1;
circle.setAttribute('r', pulseSize);
circle.setAttribute('fill', '#e8dcc4');
circle.setAttribute('opacity', 0.4 + Math.sin(frame * 0.02 + node.pulse) * 0.2);
svg.appendChild(circle);
});
}
frame++;
};
// Animate mycelial growth
const animateMycelium = () => {
nodes.forEach(node => {
node.x += node.vx;
node.y += node.vy;
// Bounce off edges
if (node.x < 0 || node.x > window.innerWidth) node.vx *= -1;
if (node.y < 0 || node.y > window.innerHeight) node.vy *= -1;
// Constrain to viewport
node.x = Math.max(0, Math.min(window.innerWidth, node.x));
node.y = Math.max(0, Math.min(window.innerHeight, node.y));
});
drawConnections();
};
const myceliumInterval = setInterval(animateMycelium, 60);
document.body.appendChild(svg);
// Create pendulum physics
const pendulumContainer = document.createElement('div');
pendulumContainer.className = 'theme-specific-content';
pendulumContainer.style.cssText = `
position:fixed;
top:10%;
left:50%;
transform:translateX(-50%);
z-index:1;
pointer-events:none;
`;
const pendulum = document.createElement('div');
pendulum.style.cssText = `
width:2px;
height:300px;
background:linear-gradient(180deg, transparent, #d4af37);
transform-origin:top center;
position:relative;
`;
const bob = document.createElement('div');
bob.style.cssText = `
position:absolute;
bottom:-20px;
left:-19px;
width:40px;
height:40px;
background:radial-gradient(circle, #d4af37, transparent);
border-radius:50%;
box-shadow:0 0 40px #d4af37;
`;
pendulum.appendChild(bob);
pendulumContainer.appendChild(pendulum);
document.body.appendChild(pendulumContainer);
// Pendulum physics simulation
let angle = Math.PI / 6; // Starting angle
let angleVel = 0;
const gravity = 0.0005;
const damping = 0.999;
const animatePendulum = () => {
const angleAccel = -gravity * Math.sin(angle);
angleVel += angleAccel;
angleVel *= damping;
angle += angleVel;
pendulum.style.transform = `rotate(${angle * 180 / Math.PI}deg)`;
};
const pendulumInterval = setInterval(animatePendulum, 16);
// Persefoni seasonal transitions - smoother
let seasonPhase = 0;
const seasonalTransition = () => {
seasonPhase += 0.0003;
const hue = Math.sin(seasonPhase) * 15;
const brightness = 0.95 + Math.sin(seasonPhase * 2) * 0.05;
const saturation = 1 + Math.cos(seasonPhase * 3) * 0.1;
document.body.style.filter = `hue-rotate(${hue}deg) brightness(${brightness}) saturate(${saturation})`;
};
const seasonInterval = setInterval(seasonalTransition, 50);
// Lockean knowledge layers - mouse reveals truth
const knowledgeLayer = document.createElement('div');
knowledgeLayer.className = 'theme-specific-content';
knowledgeLayer.style.cssText = `
position:fixed;
inset:0;
pointer-events:none;
z-index:3;
`;
const revealTruth = (e) => {
const revelation = document.createElement('div');
revelation.className = 'theme-specific-content';
revelation.style.cssText = `
position:fixed;
left:${e.clientX}px;
top:${e.clientY}px;
width:100px;
height:100px;
background:radial-gradient(circle, rgba(107,91,149,0.2), transparent);
border-radius:50%;
transform:translate(-50%, -50%);
pointer-events:none;
animation:expand-consciousness 2s ease-out;
`;
knowledgeLayer.appendChild(revelation);
setTimeout(() => revelation.remove(), 2000);
// Affect nearby mycelium nodes
nodes.forEach(node => {
const dist = Math.hypot(node.x - e.clientX, node.y - e.clientY);
if (dist < 100) {
node.vx += (node.x - e.clientX) / dist * 2;
node.vy += (node.y - e.clientY) / dist * 2;
}
});
};
document.addEventListener('click', revealTruth);
document.body.appendChild(knowledgeLayer);
const consciousnessStyle = document.createElement('style');
consciousnessStyle.className = 'theme-specific-content';
consciousnessStyle.textContent = `
@keyframes expand-consciousness {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(4);
opacity: 0;
}
}
`;
document.head.appendChild(consciousnessStyle);
// Panel mouse tracking for gradient effect
const panels = document.querySelectorAll('.neon-panel');
const trackMouse = (e) => {
panels.forEach(panel => {
const rect = panel.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
panel.style.setProperty('--mouse-x', `${x}%`);
panel.style.setProperty('--mouse-y', `${y}%`);
});
};
document.addEventListener('mousemove', trackMouse);
window.themeCleanup = () => {
clearInterval(myceliumInterval);
clearInterval(pendulumInterval);
clearInterval(seasonInterval);
document.removeEventListener('click', revealTruth);
document.removeEventListener('mousemove', trackMouse);
document.body.style.filter = '';
};
break;
case 'enzyme-optic':
// Simple geometric pattern
const geometricOverlay = document.createElement('div');
geometricOverlay.className = 'theme-specific-content';
geometricOverlay.style.cssText = `
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
`;
// Create minimal geometric pattern
for (let i = 0; i < 3; i++) {
const shape = document.createElement('div');
shape.style.cssText = `
position:absolute;
width:${200 + i * 150}px;
height:${200 + i * 150}px;
border:1px solid rgba(255,94,129,${0.08 - i * 0.02});
left:50%;
top:50%;
transform:translate(-50%,-50%) rotate(${i * 30}deg);
animation:gentle-rotate ${20 + i * 10}s linear infinite;
`;
geometricOverlay.appendChild(shape);
}
const enzymeStyle = document.createElement('style');
enzymeStyle.className = 'theme-specific-content';
enzymeStyle.textContent = `
@keyframes gentle-rotate {
from { transform: translate(-50%,-50%) rotate(0deg); }
to { transform: translate(-50%,-50%) rotate(360deg); }
}
`;
document.head.appendChild(enzymeStyle);
document.body.appendChild(geometricOverlay);
// Subtle color shift
let hueShift = 0;
const colorInterval = setInterval(() => {
hueShift = (hueShift + 0.5) % 360;
document.body.style.filter = `hue-rotate(${Math.sin(hueShift * 0.01) * 5}deg)`;
}, 100);
window.themeCleanup = () => {
clearInterval(colorInterval);
document.body.style.filter = '';
};
break;
case 'matrix-christmas':
// Matrix rain effect with Christmas touch
const matrixRain = document.createElement('div');
matrixRain.className = 'matrix-rain theme-specific-content';
document.body.appendChild(matrixRain);
const matrixChars = ['0', '1', '0', '1', '0', '1', '❄', '0', '1'];
const columns = Math.floor(window.innerWidth / 20);
for (let i = 0; i < columns; i++) {
const column = document.createElement('div');
column.className = 'matrix-column';
column.style.left = (i * 20) + 'px';
column.style.animationDuration = (10 + Math.random() * 20) + 's';
column.style.animationDelay = Math.random() * 10 + 's';
// Most columns are classic green, some red for Christmas
if (i % 5 === 0) {
column.style.color = '#dc143c';
column.style.opacity = '0.3';
} else {
column.style.color = '#00ff41';
column.style.opacity = '0.4';
}
let text = '';
for (let j = 0; j < 50; j++) {
text += matrixChars[Math.floor(Math.random() * matrixChars.length)];
}
column.textContent = text;
matrixRain.appendChild(column);
}
// Add a few gentle snowflakes
for (let i = 0; i < 5; i++) {
const snow = document.createElement('div');
snow.className = 'snow-accent theme-specific-content';
snow.textContent = '❄';
snow.style.left = Math.random() * 100 + '%';
snow.style.animationDuration = (20 + Math.random() * 10) + 's';
snow.style.animationDelay = Math.random() * 10 + 's';
document.body.appendChild(snow);
}
break;
// Add more theme-specific effects here
default:
// No special effects for this theme
break;
}
}
// Apply initial theme
applyTheme(currentThemeId);
if (themePicker) {
themePicker.innerHTML = themes
.map(
(theme) =>
`<option value="${theme.id}">${formatThemeLabel(theme.id)}</option>`
)
.join('');
themePicker.value = currentThemeId;
themePicker.addEventListener('change', (event) => {
const nextId = event.target.value;
applyTheme(nextId);
});
}
if (styleToggle && styleLink) {
styleToggle.addEventListener('click', () => {
const options = themes.filter((theme) => theme.id !== currentThemeId);
const nextTheme = options[Math.floor(Math.random() * options.length)] || themes[0];
styleToggle.classList.add('rolling');
applyTheme(nextTheme.id);
setTimeout(() => styleToggle.classList.remove('rolling'), 600);
});
}
let visitorCount = 42069;
setInterval(() => {
visitorCount += Math.floor(Math.random() * 3);
const counterEl = document.getElementById('visitor-count');
if (counterEl) {
counterEl.textContent = visitorCount.toString().padStart(6, '0');
}
}, 3000);
const inspirations = [
"Write the ending first, then backfill the opening as redacted court transcripts.",
"Narrate the discovery from the point of view of the attic dust bunnies organizing a union.",
"Force every paragraph to alternate between haiku and corporate memo.",
"Tell the story backwards with timestamps that skip like a scratched CD.",
"Only describe textures and sounds—leave visuals to the reader's imagination.",
"Switch narrators every 42 words between the protagonist and the attic itself.",
"Use footnotes for the real plot while the main text pretends nothing is happening.",
"Make the object discovered allergic to exposition; it can only speak in recipes."
];
let currentIndex = 0;
function getInspiration(event) {
const textElement = document.getElementById('inspiration-text');
if (!textElement) return;
textElement.style.animation = 'none';
setTimeout(() => {
textElement.style.animation = 'glitch-1 0.2s 5, bounce 1s ease-in-out infinite';
}, 10);
currentIndex = (currentIndex + 1) % inspirations.length;
textElement.textContent = inspirations[currentIndex];
const colors = ['#ff00ff', '#00ffff', '#ffff00', '#00ff00', '#ff0000'];
textElement.style.color = colors[Math.floor(Math.random() * colors.length)];
if (event && event.target) {
const button = event.target;
button.style.transform = 'rotate(' + (Math.random() * 10 - 5) + 'deg)';
setTimeout(() => {
button.style.transform = '';
}, 200);
}
}
const storyGroups = [
{
title: 'Without Dreamtap',
description: 'Baseline drafts from the model on its own. Prompts with the same number match the Dreamtap versions below.',
stories: [
{ path: 'stories/story1-no-dreamtap.md', label: 'Prompt 1' },
{ path: 'stories/story2-no-dreamtap.md', label: 'Prompt 2' },
{ path: 'stories/story3-no-dreamtap.md', label: 'Prompt 3' }
]
},
{
title: 'With Dreamtap',
description: 'The same prompts routed through Dreamtap inspiration cards. Notice how the story voice and structure diverge.',
stories: [
{ path: 'stories/story4-dreamtap.md', label: 'Prompt 1' },
{ path: 'stories/story5-dreamtap.md', label: 'Prompt 2' },
{ path: 'stories/story6-dreamtap.md', label: 'Prompt 3' }
]
}
];
const storyEscapeLookup = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
function escapeStoryHtml(value) {
return value.replace(/[&<>"']/g, (char) => storyEscapeLookup[char] || char);
}
function parseStory(markdown) {
const normalized = markdown.replace(/\r\n/g, '\n').trim();
const blocks = normalized.split(/\n{2,}/);
let title = null;
const htmlSegments = [];
blocks.forEach((block) => {
const trimmed = block.trim();
if (!trimmed) return;
if (trimmed.startsWith('# ')) {
const heading = trimmed.slice(2).trim();
if (!title) {
title = heading;
} else {
htmlSegments.push(`<h4>${escapeStoryHtml(heading)}</h4>`);
}
return;
}
const paragraph = trimmed.replace(/\s*\n\s*/g, ' ');
htmlSegments.push(`<p>${escapeStoryHtml(paragraph)}</p>`);
});
return {
title: title || 'Untitled story',
html: htmlSegments.join('')
};
}
async function hydrateStory(story, summaryEl, contentEl) {
try {
const response = await fetch(story.path);
if (!response.ok) {
throw new Error(`Request failed with status ${response.status}`);
}
const text = await response.text();
const parsed = parseStory(text);
summaryEl.textContent = `${story.label} — ${parsed.title}`;
contentEl.innerHTML = parsed.html;
} catch (error) {
console.error('Could not load story', story.path, error);
summaryEl.textContent = `${story.label} — unavailable`;
contentEl.innerHTML = `<p>Could not load this story. (${escapeStoryHtml(story.path)})</p>`;
}
}
function mountStoryComparisons() {
const root = document.getElementById('story-comparison-root');
if (!root) return;
storyGroups.forEach((group, groupIndex) => {
const groupContainer = document.createElement('div');
if (groupIndex > 0) {
groupContainer.style.marginTop = '24px';
}
const heading = document.createElement('h3');
heading.textContent = group.title;
groupContainer.appendChild(heading);
if (group.description) {
const description = document.createElement('p');
description.textContent = group.description;
groupContainer.appendChild(description);
}
group.stories.forEach((story, storyIndex) => {
const details = document.createElement('details');
if (storyIndex === 0) {
details.open = true;
}
const summary = document.createElement('summary');
summary.textContent = `${story.label} — Loading…`;
details.appendChild(summary);
const content = document.createElement('div');
content.className = 'story-body';
content.innerHTML = '<p>Loading…</p>';
details.appendChild(content);
groupContainer.appendChild(details);
hydrateStory(story, summary, content);
});
root.appendChild(groupContainer);
});
}
mountStoryComparisons();
// Story Showcase functionality
function initStoryShowcase() {
const storyDisplay = document.getElementById('story-display');
const tabButtons = document.querySelectorAll('.tab-button');
if (!storyDisplay || tabButtons.length === 0) return;
// Convert markdown to HTML for display
function renderMarkdown(markdown) {
const normalized = markdown.replace(/\r\n/g, '\n').trim();
const blocks = normalized.split(/\n{2,}/);
const htmlSegments = [];
blocks.forEach((block) => {
const trimmed = block.trim();
if (!trimmed) return;
if (trimmed.startsWith('**') && trimmed.endsWith('**')) {
// Handle bold title at the start
const title = trimmed.slice(2, -2).trim();
htmlSegments.push(`<p><strong>${escapeStoryHtml(title)}</strong></p>`);
} else if (trimmed.startsWith('# ')) {
const heading = trimmed.slice(2).trim();
htmlSegments.push(`<p><strong>${escapeStoryHtml(heading)}</strong></p>`);
} else if (trimmed.startsWith('## ')) {
const heading = trimmed.slice(3).trim();
htmlSegments.push(`<h2>${escapeStoryHtml(heading)}</h2>`);
} else if (trimmed.startsWith('### ')) {
const heading = trimmed.slice(4).trim();
htmlSegments.push(`<h3>${escapeStoryHtml(heading)}</h3>`);
} else {
// Process inline formatting
let processed = escapeStoryHtml(trimmed);
processed = processed.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
processed = processed.replace(/\*(.*?)\*/g, '<em>$1</em>');
htmlSegments.push(`<p>${processed}</p>`);
}
});
return htmlSegments.join('\n');
}
// Load a story
async function loadStory(storyName) {
try {
// Add cache-busting parameter to ensure fresh content
const response = await fetch(`stories/${storyName}.md?t=${Date.now()}`);
if (!response.ok) throw new Error('Story not found');
const markdown = await response.text();
const html = renderMarkdown(markdown);
storyDisplay.innerHTML = html;
} catch (error) {
storyDisplay.innerHTML = '<p>Error loading story. Please try again.</p>';
console.error('Error loading story:', error);
}
}
// Tab button click handler
tabButtons.forEach(button => {
button.addEventListener('click', (e) => {
// Remove active class from all buttons
tabButtons.forEach(btn => btn.classList.remove('active'));
// Add active class to clicked button
button.classList.add('active');
// Load the story
const storyName = button.getAttribute('data-story');
if (storyName) {
loadStory(storyName);
}
});
});
// Load the first story by default
const firstActiveButton = document.querySelector('.tab-button.active');
if (firstActiveButton) {
const storyName = firstActiveButton.getAttribute('data-story');
if (storyName) {
loadStory(storyName);
}
}
}
// Initialize story showcase on page load
initStoryShowcase();
</script>
Recommend Servers
TraeBuild with Free GPT-4.1 & Claude 3.7. Fully MCP-Ready.
TimeA Model Context Protocol server that provides time and timezone conversion capabilities. This server enables LLMs to get current time information and perform timezone conversions using IANA timezone names, with automatic system timezone detection.
MiniMax MCPOfficial MiniMax Model Context Protocol (MCP) server that enables interaction with powerful Text to Speech, image generation and video generation APIs.
EdgeOne Pages MCPAn MCP service designed for deploying HTML content to EdgeOne Pages and obtaining an accessible public URL.
Jina AI MCP ToolsA Model Context Protocol (MCP) server that integrates with Jina AI Search Foundation APIs.
Zhipu Web SearchZhipu Web Search MCP Server is a search engine specifically designed for large models. It integrates four search engines, allowing users to flexibly compare and switch between them. Building upon the web crawling and ranking capabilities of traditional search engines, it enhances intent recognition capabilities, returning results more suitable for large model processing (such as webpage titles, URLs, summaries, site names, site icons, etc.). This helps AI applications achieve "dynamic knowledge acquisition" and "precise scenario adaptation" capabilities.
Context7Context7 MCP Server -- Up-to-date code documentation for LLMs and AI code editors
DeepChatYour AI Partner on Desktop
Baidu Map百度地图核心API现已全面兼容MCP协议，是国内首家兼容MCP协议的地图服务商。
Amap Maps高德地图官方 MCP Server
Serper MCP ServerA Serper MCP Server
ChatWiseThe second fastest AI chatbot™
MCP AdvisorMCP Advisor & Installation - Use the right MCP server for your needs
CursorThe AI Code Editor
AiimagemultistyleA Model Context Protocol (MCP) server for image generation and manipulation using fal.ai's Stable Diffusion model.
WindsurfThe new purpose-built IDE to harness magic
Tavily Mcp
Visual Studio Code - Open Source ("Code - OSS")Visual Studio Code
Playwright McpPlaywright MCP server
BlenderBlenderMCP connects Blender to Claude AI through the Model Context Protocol (MCP), allowing Claude to directly interact with and control Blender. This integration enables prompt assisted 3D modeling, scene creation, and manipulation.
Howtocook Mcp基于Anduin2017 / HowToCook （程序员在家做饭指南）的mcp server，帮你推荐菜谱、规划膳食，解决“今天吃什么“的世纪难题；
Based on Anduin2017/HowToCook (Programmer's Guide to Cooking at Home), MCP Server helps you recommend recipes, plan meals, and solve the century old problem of "what to eat today"