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
The npm package retroify.js receives a total of 6 weekly downloads. As such, retroify.js popularity was classified as not popular.
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.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A new federal program will let vetted U.S. cybersecurity firms help investigate and disrupt foreign cybercrime groups under government direction.
Research
/Security News
The campaign amassed more than 75,000 installs by targeting Russian-speaking users seeking access to blocked services.
Company News
Open source maintainers are under more pressure than ever. We're raising our open source program from the Team plan to the Business plan, free.