So there I was, rebuilding my website for the third time this year (don’t judge), when I remembered something: browsers are actually magical.
Beneath all the endless form validation, error states, and API calls we deal with daily, the web is still packed with weird little features; the kind that make you grin like you’ve just stumbled into a hidden level in some old-school game.
We tend to stick to the same old fetch() and addEventListener() toolkit, but there’s this whole forgotten layer of browser APIs that feel more like easter eggs than engineering. Think less of a CRUD app, more “wait, what is this doing in here?!”
And honestly, if you’ve been grinding through Sprint 112 of that B2B dashboard, you probably deserve a moment of joy. These APIs won’t just let you build weird stuff (though they absolutely do). They’ll help you reconnect with the parts of web development that feel fun, playful, and genuinely useful.
Because yes, shaking your phone programmatically is hilarious. But that exact same API can make mobile error handling more accessible.
Typing with a MIDI keyboard? That’s a great party trick. But it’s also a legit input method for people with alternative hardware setups.
So while these browser features might seem unhinged at first, each one opens up opportunities for delightful interfaces, unexpected interactions, and even thoughtful accessibility enhancements.
Let me walk you through five of these wonderfully bizarre browser APIs. They’re playful, useful, and definitely more fun than debugging another React component.
The Replay is a weekly newsletter for dev and engineering leaders.
Delivered once a week, it's your curated guide to the most important conversations around frontend dev, emerging AI tools, and the state of modern software.
Practical use case: Designing power-aware UX
Fun use case: Low-battery disco parties
When my laptop hits 10% battery, my website turns into a disco and shouts “GO CHARGE YOURSELF!” at me. Because apparently I needed my computer to have opinions about my life choices:
navigator.getBattery().then(battery => {
function checkBattery() {
if (battery.level < 0.1) {
document.body.style.animation = 'disco 0.5s infinite';
document.body.insertAdjacentHTML('beforeend',
'<div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3rem; z-index: 9999;">🔋 GO CHARGE YOURSELF! 🔋</div>'
);
}
}
battery.addEventListener('levelchange', checkBattery);
});
There is a serious note here: The Battery Status API is deprecated in most browsers due to privacy concerns. It was removed from Firefox in 2016 and is only supported in Chrome-based browsers up to certain versions. But for Easter eggs and experimental features? It’s still perfect (and sometimes useful).
Your site can actually care about your visitors’ battery life. Running low? Automatically switch to a lightweight theme, turn off animations, or remind them to save their work before their laptop dies. Perfect for big tasks like an accounting website, CMS, or ERP website.
Practical use case: Haptic feedback for errors and messages
Fun use case: Rhythm games and beat-synced vibrations
Let me send you a message through vibration patterns. Ready? Here comes “HELLO” in Morse code:
// Morse code for "HELLO": .... . .-.. .-.. ---
if ("vibrate" in navigator) {
navigator.vibrate([
100, 50, 100, 50, 100, 50, 100, // H: ....
300, // pause
100, // E: .
300, // pause
100, 50, 300, 50, 100, 50, 100, // L: .-..
300, // pause
100, 50, 300, 50, 100, 50, 100, // L: .-..
300, // pause
300, 50, 300, 50, 300 // O: ---
]);
}
Your phone just became a telegraph machine!
The Vibration API lets you literally shake someone’s phone from your website. It’s supported on modern mobile browsers (but absent from iOS Safari).
For web-based games or apps, haptic feedback makes everything feel more real. A character takes damage? Buzz. Timer runs out? Gentle vibration. Form validation errors? Quick tap to get attention. Creative applications include:
Practical use case: Inclusive design, screen reader enhancements, voice-controlled forms
Fun use case: Talking fortune cookies and high-pitched robots
I built a talking fortune cookie website that delivers programming wisdom in a ridiculously high-pitched robot voice. Because apparently I needed my browser to become a motivational speaker:
const fortunes = [
"You will debug for exactly three hours and discover the bug was a missing semicolon.",
"A wild merge conflict will appear in your near future.",
"Your code will work perfectly in staging but break spectacularly in production.",
"You are the chosen one. But only until the next deploy."
];
function speakFortune() {
const fortune = fortunes[Math.floor(Math.random() * fortunes.length)];
const utterance = new SpeechSynthesisUtterance(fortune);
utterance.pitch = 1.5; // Make it slightly silly
utterance.rate = 0.9;
speechSynthesis.speak(utterance);
}
There’s something magical about your browser delivering programming wisdom in a robot voice.
This API is a two-part magic trick: Speech Synthesis makes your browser talk, and Speech Recognition makes it listen. The synthesis part has decent browser support across Chrome, Firefox, and even Safari:
This API is incredible for accessibility. Automatically narrate dashboard updates, provide voice explanations for complex UI elements, or create voice-controlled navigation. It’s inclusive design at its finest.
Practical use case: Designing accessible web UIs
Fun use case: Make scrolling feel like Mario Kart
Remember when “web input” meant keyboard events? Welcome to a new level: WebHID.
So I wired up my old racing wheel to my browser over USB and started scrolling through blog posts by turning left and right; because you can!
Was it ergonomic? Absolutely not.
Was it objectively awesome? Also yes:
Learn more →const devices = await navigator.hid.requestDevice({ filters: [
{ vendorId: 0x046d }
]});
if (devices.length) {
await devices[0].open();
devices[0].addEventListener('inputreport', (e) => {
// Assume axis 0 is steering
const steer = e.data.getInt8(0);
window.scrollBy(0, steer); // Steer = scroll!
});
}
Suddenly, reading LogRocket articles felt like playing Mario Kart. Dangerous for productivity, excellent for Friday afternoon experiments.
The WebHID API lets your website talk directly to any HID (Human Interface Device). Think gamepads, MIDI drums, barcode scanners, even obscure USB hardware from your junk drawer. It’s currently supported in Chrome 89+ and Edge 89+, but notably missing from Firefox and Safari.
Totally. Picture working with students at a STEM fair or designing accessible web UIs. Someone has a custom joystick or specialty controller? You can let them control your app natively. No downloads, no middleman software, just “plug and go” from the browser. It’s like WASM, but good.
Practical use case: Interactive sound design
Fun use case: Great opportunities for Rickrolls
I hooked up my dusty MIDI keyboard and made it so every note spawns a random emoji across my screen. Because apparently that’s what passes for productivity in my house:
navigator.requestMIDIAccess().then((access) => {
for (const input of access.inputs.values()) {
input.onmidimessage = (msg) => {
if (msg.data[0] === 144 && msg.data[2] > 0) { // Note-on message
const emoji = ['🎵', '🎶', '🎸', '🥁', '🎹', '🎺', '🎷'][Math.floor(Math.random() * 7)];
document.body.insertAdjacentHTML('beforeend',
`<span style="font-size: 2rem; position: absolute;
left: ${Math.random() * 100}%; top: ${Math.random() * 100}%;">${emoji}</span>`
);
}
};
}
});
The result? A website that becomes a visual symphony every time you play. It’s ridiculous, joyful, and surprisingly engaging (and a very good opportunity for a Rickroll):
The WebMIDI API transforms browsers into musical instruments that can listen to and send MIDI messages. Imagine building a web app where musicians jam together across continents. Someone hits a note in Berlin, it triggers a synth in Montreal, controls lights in Tokyo, and creates a visualizer in your browser. Real-time musical collaboration without installing anything, just a browser.
If you’re hungry for more browser weirdness:
The Ambient Light API is particularly fun! It can detect lux levels and adjust your UI accordingly. Perfect for creating “Kindle-style” reading experiences or smart home interfaces.
Look, most of these APIs won’t revolutionize your next SaaS dashboard. But they do something more important; they remind us that the web is still a place for experimentation, joy, and delightful surprises. When I first started building websites, everything felt possible. These APIs bring back that feeling. They’re perfect for:
These APIs are a perfect excuse to stretch your skills, prototype wild ideas, or build more accessible, universally delightful experiences. Push past the plain and rediscover play.
The next time you’re stuck in a cycle of forms and API calls, grab one of these APIs and build something wonderfully unnecessary. Your future self will thank you for keeping the web weird.
Compare mem0 and Supermemory to learn how modern AI apps manage long-term memory beyond RAG and stateless LLM chats.
Animate SVGs with pure CSS: hamburger toggles, spinners, line-draw effects, and new scroll-driven animations, plus tooling tips and fallbacks.
Tailwind CSS is more popular than ever. This guide breaks down v4’s biggest changes, real-world usage, migration paths, and where it fits in the AI future.
Evaluate the top React animation libraries for ease of use, developer experience, and bundle size.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
