Test the AI limit
Test the power of AI via creating a unique and colorful website with a bold style and smooth motions using special design tools.
Customize your prompt
Prompt
Create a website in a single HTML file (including CSS and JavaScript). I want a [DESCRIPTION OF YOUR TOOL, EG: INTERACTIVE TIMELINE].
1. The design should be modern, sleek, and "neo-brutalist" with bright colors and bold lines.
2. It should work immediately when I open the file in my browser.
3. Ensure smooth animations when I scroll through the page or click buttons.
4. Add dummy content so I can see what it looks like.
Be extremely creative and push the boundaries of what's possible in a single file. Just give me the code.Example Output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>dorksense</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@400;700;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
:root {
--bg-color: #f0f0f0;
--main: #ffdee9;
--accent-1: #b5fffc; /* Blue */
--accent-2: #ffeb3b; /* Yellow */
--accent-3: #ff4d4d; /* Red */
--accent-4: #adff2f; /* Acid Green */
--border: 4px solid #000;
--shadow: 8px 8px 0px 0px #000;
--shadow-hover: 4px 4px 0px 0px #000;
}
body {
background-color: var(--accent-1);
font-family: 'Space Mono', monospace;
overflow-x: hidden;
cursor: crosshair;
transition: filter 0.3s ease;
}
h1,
h2,
h3,
h4,
.brand-font {
font-family: 'Lexend Mega', sans-serif;
}
/* Utilities */
.neo-box {
border: var(--border);
box-shadow: var(--shadow);
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
background-color: white;
}
.neo-box:hover {
transform: translate(-2px, -2px);
box-shadow: 12px 12px 0px 0px #000;
}
.neo-box:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px 0px #000;
}
.neo-btn {
border: var(--border);
box-shadow: var(--shadow);
font-weight: 900;
text-transform: uppercase;
transition: transform 0.1s, box-shadow 0.1s;
}
.neo-btn:active {
transform: translate(8px, 8px);
box-shadow: 0 0 0 0 #000;
}
/* Marquee Animation */
.marquee-container {
overflow: hidden;
white-space: nowrap;
}
.marquee-content {
display: inline-block;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Scroll Animations */
.reveal {
opacity: 0;
transform: translateY(50px) rotate(2deg);
transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
opacity: 1;
transform: translateY(0) rotate(0deg);
}
/* Glitch Effect on Hover */
.glitch-hover:hover {
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
infinite;
color: var(--accent-3);
}
@keyframes glitch {
0% {
transform: translate(0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
100% {
transform: translate(0);
}
}
/* Chaos Mode */
body.chaos-mode {
filter: invert(1);
}
body.chaos-mode .fixed-nav {
transform: rotate(1deg);
}
/* Selection */
::selection {
background: #000;
color: #fff;
}
</style>
</head>
<body class="text-black min-h-screen flex flex-col relative">
<!-- Top Marquee -->
<div
class="w-full bg-black text-white border-b-4 border-black py-2 overflow-hidden sticky top-0 z-50 fixed-nav"
>
<div class="marquee-container">
<div class="marquee-content brand-font text-sm md:text-lg">
DORKSENSE /// DEFINING THE UNDEFINED /// PUSHING PIXELS UNTIL THEY
SCREAM /// NO BORING WEBSITES ALLOWED /// DORKSENSE /// DEFINING THE
UNDEFINED /// PUSHING PIXELS UNTIL THEY SCREAM /// NO BORING WEBSITES
ALLOWED ///
</div>
</div>
</div>
<!-- Chaos Toggle -->
<div class="fixed top-20 right-4 z-40">
<button
id="chaosToggle"
class="neo-btn bg-[#ff4d4d] p-3 hover:bg-white flex items-center gap-2 text-xs md:text-sm"
>
<i data-lucide="zap" class="w-5 h-5"></i> <span>Chaos Mode</span>
</button>
</div>
<!-- Navigation (Floating) -->
<nav
class="w-full max-w-7xl mx-auto px-4 mt-8 flex justify-between items-end relative z-30"
>
<div class="neo-box bg-white p-4 rotate-[-2deg] hover:rotate-0">
<h1 class="text-4xl md:text-6xl font-black tracking-tighter">
dork<span class="text-[#ff4d4d]">sense</span>.
</h1>
</div>
<div class="hidden md:flex gap-4">
<a
href="#manifesto"
class="neo-btn bg-[#adff2f] px-6 py-2 hover:bg-white"
>Manifesto</a
>
<a href="#stash" class="neo-btn bg-[#ffeb3b] px-6 py-2 hover:bg-white"
>The Stash</a
>
<a href="#contact" class="neo-btn bg-[#B5FFFC] px-6 py-2 hover:bg-white"
>Holler</a
>
</div>
</nav>
<!-- Hero Section -->
<main class="flex-grow w-full max-w-7xl mx-auto px-4 mt-12 md:mt-24 mb-24">
<div class="grid grid-cols-1 md:grid-cols-12 gap-8">
<!-- Big Hero Text -->
<div class="col-span-1 md:col-span-8 reveal">
<div
class="bg-[#ffeb3b] border-4 border-black p-8 md:p-16 shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] relative overflow-hidden group"
>
<div
class="absolute top-[-20px] right-[-20px] w-32 h-32 bg-[#ff4d4d] rounded-full border-4 border-black flex items-center justify-center rotate-12 group-hover:rotate-180 transition-transform duration-700"
>
<span class="font-bold text-xl">V.1.0</span>
</div>
<h2
class="text-5xl md:text-8xl font-black leading-[0.9] mb-6 glitch-hover cursor-default"
>
MAKE IT<br />
<span
class="text-white text-stroke-3"
style="-webkit-text-stroke: 3px black"
>LOUD.</span
><br />
MAKE IT<br />
WEIRD.
</h2>
<p
class="text-lg md:text-2xl font-bold max-w-md bg-white border-2 border-black p-4 inline-block"
>
The internet is too clean. We are here to ruin the minimalism.
Welcome to the Dorksense functionality protocol.
</p>
<div class="mt-8 flex gap-4 flex-wrap">
<button
class="neo-btn bg-black text-white px-8 py-4 text-xl hover:bg-[#adff2f] hover:text-black"
>
Start Engine
</button>
<button class="neo-btn bg-white px-8 py-4 text-xl">
Read Docs
</button>
</div>
</div>
</div>
<!-- Side Graphic / Stats -->
<div
class="col-span-1 md:col-span-4 flex flex-col gap-8 reveal"
style="transition-delay: 100ms"
>
<div
class="neo-box bg-[#adff2f] p-6 h-full flex flex-col justify-between rotate-2 hover:rotate-0"
>
<div class="border-b-4 border-black pb-4 mb-4">
<h3 class="text-2xl font-bold">SYSTEM STATUS</h3>
</div>
<div class="space-y-4 font-bold text-lg">
<div class="flex justify-between items-center">
<span>AESTHETIC</span>
<span class="bg-black text-[#adff2f] px-2">CRITICAL</span>
</div>
<div class="flex justify-between items-center">
<span>NORMALCY</span>
<span class="bg-white border-2 border-black px-2">0%</span>
</div>
<div class="flex justify-between items-center">
<span>VIBES</span>
<div class="w-24 h-6 border-2 border-black bg-white relative">
<div
class="absolute top-0 left-0 h-full bg-[#ff4d4d] w-[110%] animate-pulse"
></div>
</div>
</div>
</div>
<div class="mt-auto pt-8">
<i data-lucide="skull" class="w-16 h-16 animate-bounce"></i>
</div>
</div>
</div>
</div>
</main>
<!-- Marquee Break -->
<div
class="w-full bg-[#ff4d4d] border-y-4 border-black py-6 overflow-hidden rotate-[-1deg] scale-105 z-10 mb-24"
>
<div class="marquee-container">
<div
class="marquee-content brand-font text-4xl font-black text-black"
style="animation-direction: reverse"
>
DONT BLINK /// DONT BLINK /// DONT BLINK /// DONT BLINK /// DONT BLINK
/// DONT BLINK /// DONT BLINK ///
</div>
</div>
</div>
<!-- Grid Section -->
<section id="manifesto" class="max-w-7xl mx-auto px-4 mb-32">
<h2 class="text-6xl md:text-7xl font-black mb-12 text-center reveal">
THE <span class="bg-black text-white px-4">MANIFESTO</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Card 1 -->
<div class="reveal">
<div class="neo-box bg-white p-0 h-full flex flex-col">
<div class="bg-black p-4 flex justify-between items-center">
<div class="flex gap-2">
<div
class="w-3 h-3 rounded-full bg-red-500 border border-white"
></div>
<div
class="w-3 h-3 rounded-full bg-yellow-500 border border-white"
></div>
<div
class="w-3 h-3 rounded-full bg-green-500 border border-white"
></div>
</div>
<span class="text-white font-mono text-xs">001.exe</span>
</div>
<div class="p-8 border-t-4 border-black flex-grow bg-[#B5FFFC]">
<h3 class="text-3xl font-bold mb-4">RAW DATA</h3>
<p class="mb-4">
We believe in showing the wires. Hide nothing. If it breaks,
it's a feature. If it's ugly, it's art.
</p>
<ul class="list-disc list-inside font-bold space-y-2">
<li>No smooth corners</li>
<li>High Contrast</li>
<li>Loud Voices</li>
</ul>
</div>
<button
class="w-full border-t-4 border-black bg-white py-4 font-black hover:bg-black hover:text-white transition-colors"
>
ACCESS
</button>
</div>
</div>
<!-- Card 2 -->
<div class="reveal md:mt-12">
<div class="neo-box bg-[#ffeb3b] p-8 h-full relative">
<div
class="absolute -top-6 -left-6 bg-white border-4 border-black px-4 py-2 font-bold rotate-[-5deg]"
>
POPULAR
</div>
<h3 class="text-3xl font-bold mb-4 mt-4">FUNCTION</h3>
<div
class="border-4 border-black bg-white p-4 mb-4 transform rotate-1"
>
<code>console.log("Brutalism");</code>
</div>
<p class="font-bold">
Utility over vanity, but make the utility look vain. It's a
paradox. Deal with it.
</p>
<div class="mt-6 flex justify-end">
<i data-lucide="move-diagonal-2" class="w-12 h-12"></i>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="reveal">
<div class="neo-box bg-[#ff4d4d] p-0 h-full">
<div
class="h-48 w-full border-b-4 border-black bg-[url('https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=1000&auto=format&fit=crop')] bg-cover bg-center grayscale contrast-125 hover:grayscale-0 transition-all duration-300"
></div>
<div class="p-8">
<h3
class="text-3xl font-bold mb-4 text-white"
style="text-shadow: 4px 4px 0 #000"
>
VISUALS
</h3>
<p class="bg-white border-2 border-black p-2 font-bold mb-4">
Eye-bleeding colors are required by law in this jurisdiction.
</p>
<div
class="w-full h-4 bg-black rounded-full overflow-hidden border-2 border-white"
>
<div class="h-full bg-[#adff2f] w-[75%]"></div>
</div>
<div class="text-right font-mono text-white text-xs mt-1">
LOADING... 75%
</div>
</div>
</div>
</div>
</div>
</section>
<!-- The Stash / Horizontal Scroll Concept -->
<section
id="stash"
class="py-20 bg-black border-y-4 border-white text-white overflow-hidden relative"
>
<div
class="absolute top-0 left-0 w-full h-full opacity-20 pointer-events-none"
style="
background-image: radial-gradient(#fff 2px, transparent 2px);
background-size: 30px 30px;
"
></div>
<div class="max-w-7xl mx-auto px-4 relative z-10">
<h2
class="text-6xl md:text-9xl font-black mb-12 text-[#adff2f] text-right reveal"
style="-webkit-text-stroke: 2px black; text-shadow: 8px 8px 0 #fff"
>
THE STASH
</h2>
<div
class="flex flex-col md:flex-row gap-8 items-center justify-center"
>
<!-- Item 1 -->
<div
class="w-full md:w-1/3 neo-box bg-white text-black p-6 rotate-[-1deg] hover:rotate-2 hover:bg-[#adff2f] group reveal"
>
<div
class="border-4 border-black aspect-square mb-4 flex items-center justify-center bg-[#f0f0f0] overflow-hidden"
>
<i
data-lucide="box"
class="w-24 h-24 group-hover:scale-125 transition-transform duration-300"
></i>
</div>
<h4 class="text-2xl font-bold">COMPONENT A</h4>
<p class="font-mono text-sm mt-2">Pure CSS chaos generator.</p>
</div>
<!-- Item 2 -->
<div
class="w-full md:w-1/3 neo-box bg-white text-black p-6 rotate-2 hover:rotate-[-2deg] hover:bg-[#B5FFFC] group reveal"
style="transition-delay: 100ms"
>
<div
class="border-4 border-black aspect-square mb-4 flex items-center justify-center bg-[#f0f0f0] overflow-hidden"
>
<i
data-lucide="triangle"
class="w-24 h-24 group-hover:rotate-180 transition-transform duration-300"
></i>
</div>
<h4 class="text-2xl font-bold">COMPONENT B</h4>
<p class="font-mono text-sm mt-2">React hooks that bite back.</p>
</div>
<!-- Item 3 -->
<div
class="w-full md:w-1/3 neo-box bg-white text-black p-6 rotate-1 hover:rotate-3 hover:bg-[#ff4d4d] group reveal"
style="transition-delay: 200ms"
>
<div
class="border-4 border-black aspect-square mb-4 flex items-center justify-center bg-[#f0f0f0] overflow-hidden"
>
<i
data-lucide="circle-dashed"
class="w-24 h-24 group-hover:spin-slow animate-spin-slow transition-transform duration-300"
></i>
</div>
<h4 class="text-2xl font-bold">COMPONENT C</h4>
<p class="font-mono text-sm mt-2">Infinite loops of joy.</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="max-w-4xl mx-auto px-4 py-32">
<div
class="bg-[#B5FFFC] border-4 border-black p-8 md:p-12 shadow-[16px_16px_0px_0px_#000] reveal"
>
<h2 class="text-5xl md:text-6xl font-black mb-8">SEND TRANSMISSION</h2>
<form class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block font-bold text-xl mb-2">IDENTIFIER</label>
<input
type="text"
placeholder="YOUR_NAME"
class="w-full bg-white border-4 border-black p-4 text-xl font-mono focus:outline-none focus:bg-[#ffeb3b] transition-colors placeholder:text-gray-400"
/>
</div>
<div>
<label class="block font-bold text-xl mb-2">FREQUENCY</label>
<input
type="email"
placeholder="EMAIL@VOID.COM"
class="w-full bg-white border-4 border-black p-4 text-xl font-mono focus:outline-none focus:bg-[#ffeb3b] transition-colors placeholder:text-gray-400"
/>
</div>
</div>
<div>
<label class="block font-bold text-xl mb-2">PAYLOAD</label>
<textarea
rows="4"
placeholder="TYPE LOUDLY..."
class="w-full bg-white border-4 border-black p-4 text-xl font-mono focus:outline-none focus:bg-[#ffeb3b] transition-colors placeholder:text-gray-400"
></textarea>
</div>
<div class="flex justify-end">
<button
type="button"
class="neo-btn bg-[#ff4d4d] text-white px-12 py-6 text-2xl hover:bg-black hover:text-[#ff4d4d] flex items-center gap-4"
>
LAUNCH <i data-lucide="send" class="w-6 h-6"></i>
</button>
</div>
</form>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-white border-t-4 border-white py-12">
<div
class="max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-8"
>
<div class="text-center md:text-left">
<h1 class="text-4xl font-black mb-2">dorksense.</h1>
<p class="text-gray-400">EST. 2024 // NO COOKIES, JUST CRUMBS.</p>
</div>
<div class="flex gap-4">
<a
href="#"
class="w-12 h-12 bg-white text-black flex items-center justify-center border-4 border-transparent hover:border-[#adff2f] hover:text-[#adff2f] hover:bg-black transition-all"
>
<i data-lucide="twitter" class="w-6 h-6"></i>
</a>
<a
href="#"
class="w-12 h-12 bg-white text-black flex items-center justify-center border-4 border-transparent hover:border-[#ff4d4d] hover:text-[#ff4d4d] hover:bg-black transition-all"
>
<i data-lucide="github" class="w-6 h-6"></i>
</a>
<a
href="#"
class="w-12 h-12 bg-white text-black flex items-center justify-center border-4 border-transparent hover:border-[#B5FFFC] hover:text-[#B5FFFC] hover:bg-black transition-all"
>
<i data-lucide="instagram" class="w-6 h-6"></i>
</a>
</div>
</div>
<div class="text-center mt-12 font-mono text-xs text-gray-600">
DESIGNED WITH BRUTAL LOVE. DON'T SUE US.
</div>
</footer>
<script>
// Initialize Icons
lucide.createIcons();
// Scroll Reveal Animation
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px',
};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
// Stop observing once triggered (optional, keeps it cleaner)
// observer.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('.reveal').forEach((el) => {
observer.observe(el);
});
// Chaos Mode Toggle
const chaosToggle = document.getElementById('chaosToggle');
const body = document.body;
chaosToggle.addEventListener('click', () => {
body.classList.toggle('chaos-mode');
const icon = chaosToggle.querySelector('span');
if (body.classList.contains('chaos-mode')) {
icon.innerText = 'Normal Mode';
} else {
icon.innerText = 'Chaos Mode';
}
});
// Random decorative positioning for a "messy" feel on load
window.addEventListener('load', () => {
const boxes = document.querySelectorAll('.neo-box');
boxes.forEach((box, index) => {
// Add slight random rotation to random elements
if (index % 3 === 0) {
const randomRot = Math.random() * 2 - 1; // Between -1 and 1
box.style.transform = `rotate(${randomRot}deg)`;
}
});
});
</script>
</body>
</html>