✨
A five-layer backdrop stack
Animated mesh gradient, three floating blur orbs, a cursor-masked grid, CRT scanlines, SVG turbulence noise and an inset vignette. Six layers. I said five. There are six.
position: fixed × 6
Web 4.0 · Post-Framework · Emerald Native
AutismMode
i vibe coded this fucking website▊
A hyper-glassmorphic, glow-saturated, aggressively over-engineered single-page experience that ships zero dependencies, zero build steps and zero restraint. It also contains a 2016 image slider. On purpose.
Currently optimizing for: hyperfixation
0 dependencies
10 images
1 canvas
∞ glow
no build step
square buttons
backdrop-filter: yes
↑↑↓↓←→←→BA · arrow keys drive the slider · space pauses it
0images in rotation
0npm packages
0vibe uptime
0web version
The Gallery · SlideVibe™ 4.0
An obnoxiously 2016 image slider
Autoplaying. Ken-Burns-ing. Wrapped in a glowing glass cage it does not deserve and does not
acknowledge. The buttons are square, grey and bevelled, and they are square on purpose.
Every image in images/ is in the rotation.
★ NEW ★ Best viewed in 1024×768 · Powered by SlideVibe™ · hover to pause · swipe on mobile
Features · all of them · every single one
Engineered far beyond any observed need
Each of these is a real thing that is really running on this page right now, which is arguably the problem.
🕸
Constellation canvas
Up to 118 glowing particles linked by an unapologetically O(n²) distance check, repelled by your cursor.
O(n²) and proud🖱
Custom cursor
A yellow glow dot, a lerped emerald ring that inverts what's behind it, and a hover state that scales the whole thing up.
cursor: none🧊
A genuine glass system
Every panel gets 22px of backdrop blur, 165% saturation, an inner top highlight, an inner bottom emerald bounce, a diagonal specular sheen and a mouse-tracked radial spotlight. Then an animated conic-gradient ring behind it, blurred to 9px, spinning on a registered @property angle.
🎛
One RAF loop
Cursor, particles, counters, tilt, typewriter, terminal and the slider clock all share a single scheduler with a live FPS readout.
bottom-left HUD📐
3D tilt on everything
Every card and stat tile is a lerped perspective transform tracking your pointer. Yes, including the ones that didn't need it.
rotateX / rotateY⌨
Konami code
↑↑↓↓←→←→BA toggles a full-page hue-rotate. The emerald leaves. It comes back. Press it again.
party mode🔊
Synthesized clicks
Web Audio oscillator blips at a random 520–900 Hz on every pointer-down. Off by default, because I'm not a monster.
AudioContext
The Stack
Three files and a bad idea
No React. No Vue. No Svelte. No Next. No Vite. No Webpack. No Tailwind. No PostCSS. No TypeScript. No package.json. No node_modules. You can open this with file:// and it works completely.
HTMLCSSJavaScript
Canvas 2DWeb AudioIntersectionObserver
@propertyconic-gradientbackdrop-filter
Reviews · unverified · possibly fabricated
People have opinions
I asked for a landing page. I received a five-layer compositing pipeline and a carousel from the Obama administration. Ten out of ten.
The buttons are square. The rest of the site is not square. I have not stopped thinking about this for six days.
They put a JPEG of me on the site and then wrote "we do not use react" directly underneath it. I'm not okay.
Pricing · it's a static site · none of this is real
Choose your mode
Normal Mode
$0 / forever
- The website loads
- You can scroll it
- Glow at standard intensity
- Square buttons included
Recommended
Autism Mode
$0 / also forever
- Everything in Normal Mode
- You notice the 4 duplicate images
- You count the glow layers
- You read the CSS comments
- Hyperfixation: enabled
Enterprise Mode
$0 / call us
- Everything in Autism Mode
- A dedicated Slack channel (yours)
- SOC 2 vibes (unaudited)
- 99.9% uptime (it's a file)
- Priority support (view-source)
FAQ
Questions, anticipated
Why is the image slider from 2016?
Because the brief said so, and because a bevelled grey button sitting inside a glowing emerald glass cage is genuinely funnier than any amount of good design. The arrows have border-radius: 0 !important and a hard transition: none — no easing, because 2016 did not have easing.
Why are four of the images the same image?
They are in images/, and the manifest ships whatever is in images/. Deleting duplicates is a product decision and this is an engineering project.
Is this actually static?
Completely. One HTML file, three CSS files, three JS files, ten images. No build, no bundler, no server, no dependencies, no package.json. Double-click index.html and the whole thing runs. Drop the folder on any static host and you're deployed.
How do I add images?
Drop them in images/ and add a line to assets/js/manifest.js — or run bash tools/gen-manifest.sh, which rebuilds the manifest from the folder. The slider, the numbered square buttons, the thumbnails and the counter all rebuild themselves from that one array.
Is Web 4.0 a real thing?
No.
Did you really vibe code this?
It's in the tagline. It's on the front page. It's the first thing you read.
One more thing
Go press the square buttons
That's the whole call to action. There is nothing to buy, nothing to sign up for, and no newsletter. Just the buttons.