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.
- 🎮 8-bit pixel-perfect styling
- 🖼️ Pixelated image rendering
- 📝 Retro typography using "Press Start 2P" font
- 🔲 Pixel-perfect buttons and form elements
- 📺 Optional CRT scanline effect
- 🎨 Customizable shadow colors
- ♿ Accessibility-friendly
- 📱 Responsive design
- 🔄 Easy to implement and remove
- 🌐 Wide browser support
<script src="https://cdn.jsdelivr.net/npm/retroify.js/out/retroify.min.js"></script>npm install retroify.js- Add the script to your HTML:
<script src="path/to/retroify.js"></script>- Apply retro styling to your entire page:
retroify.apply();Or target specific elements:
retroify.apply('#game-container');Apply retro styling to the page or a specific element.
target(optional): CSS selector or HTMLElement- Returns: Retroify instance
// Apply to entire page
retroify.apply();
// Apply to specific element
retroify.apply('#game-section');Remove retro styling.
target(optional): CSS selector or HTMLElement- Returns: Retroify instance
retroify.remove();Toggle retro styling and scanlines on/off.
- Returns: Retroify instance
retroify.toggle();Toggle CRT scanline effect.
enable(optional): Boolean to force state- Returns: Retroify instance
// Toggle scanlines
retroify.toggleScanlines();
// Force enable
retroify.toggleScanlines(true);Clean up and remove all Retroify modifications.
- Returns: Retroify instance
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 removed
window.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();
});- Chrome 49+
- Firefox 44+
- Safari 9.1+
- Edge 16+
- Opera 36+
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License - see the LICENSE file for details.