retroify.js
Advanced tools
Add instant retro 8-bit styling to any website with a single line of JavaScript. Retroify.js transforms your modern web elements into a nostalgic, pixelelated interface inspired by classic video games.
<script src="https://cdn.jsdelivr.net/npm/retroify.js/out/retroify.min.js"></script>
npm install retroify.js
<script src="path/to/retroify.js"></script>
retroify.apply();
Or target specific elements:
retroify.apply('#game-container');
retroify.apply([target])Apply retro styling to the page or a specific element.
target (optional): CSS selector or HTMLElement// Apply to entire page
retroify.apply();
// Apply to specific element
retroify.apply('#game-section');
retroify.remove([target])Remove retro styling.
target (optional): CSS selector or HTMLElementretroify.remove();
retroify.toggle()Toggle retro styling and scanlines on/off.
retroify.toggle();
retroify.toggleScanlines([enable])Toggle CRT scanline effect.
enable (optional): Boolean to force state// Toggle scanlines
retroify.toggleScanlines();
// Force enable
retroify.toggleScanlines(true);
retroify.destroy()Clean up and remove all Retroify modifications.
retroify.destroy();
Customize the appearance using CSS variables:
.retroify {
--retroify-shadow-color: 0 0 0; /* RGB values for shadows */
--retroify-shadow-opacity: 0.3; /* Shadow opacity (0-1) */
}
Retroify dispatches custom events:
retroify:applied - Fired when styles are appliedretroify:removed - Fired when styles are removedwindow.addEventListener('retroify:applied', (e) => {
console.log('Retroify applied to:', e.detail.target);
});
<!DOCTYPE html>
<html>
<head>
<title>Retroify Example</title>
<script src="path/to/retroify.js"></script>
</head>
<body>
<div id="game">
<h1>My Retro Game</h1>
<button>Start Game</button>
</div>
<script>
retroify.apply('#game');
</script>
</body>
</html>
const toggleButton = document.querySelector('#retro-toggle');
toggleButton.addEventListener('click', () => {
retroify.toggle();
});
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License - see the LICENSE file for details.
FAQs
A library to apply retro 8-bit styling to web pages
We found that retroify.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Security News
GPT-6 Astra hits 100% on ExploitBench and finds zero-days autonomously, while independent tests reveal scope violations and monitoring gaps.
Product
Socket can now send alerts and supply chain attack notifications to Microsoft Teams, with filters that route the right updates to each channel.
Security News
pnpm 12 rewrites the package manager in Rust, cutting install times by up to 90% while preserving pnpm 11 workflows and lockfiles.