I’ve been collecting wallpapers for years, but most wallpaper sites felt slow, cluttered, or filled with ads.
So I decided to build my own — WallpaperVerse.
🔗 Live site: https://wallpaperverse.akshthakkar.me
What I wanted to build
A clean, distraction-free wallpaper gallery
Fast performance, even with large images
Smooth animations that feel intentional
Bulk downloads without friction
Tech stack
I intentionally avoided frameworks to focus on fundamentals.
Vanilla HTML, CSS, JavaScript
GSAP for motion & micro-interactions
JSZip for bulk downloads
Optimized images (WebP, lazy loading)
One interesting challenge
The auto-scrolling wallpaper carousels.
Here’s the simplified logic behind the infinite horizontal scroll:
The "Infinite" Scroll Logic
const grid = document.querySelector('.collection-grid');
const scrollSpeed = 0.5;
// 1. Clone items to double the content length
// This ensures we always have content to scroll into
Array.from(grid.children).forEach(item => {
grid.appendChild(item.cloneNode(true));
});
function loop() {
// 2. Move scroll position slightly every frame
grid.scrollLeft += scrollSpeed;
// 3. The Magic Reset
// When we've scrolled past the original set of items (halfway),
// instantly snap back to the start (0).
// Since the content is identical, the user sees no jump.
if (grid.scrollLeft >= grid.scrollWidth / 2) {
grid.scrollLeft = 0;
}
requestAnimationFrame(loop);
}
// Start the animation
loop();
This approach keeps the motion smooth and continuous without needing complex state management.
What I learned
UI polish matters more than flashy features
Performance is a feature
Vanilla JS scales surprisingly well when structured properly
AI tools help most when they speed up thinking, not replace it
This project helped me understand frontend tradeoffs far better than tutorials ever did.
If you’re curious, you can check it out here:
👉 https://wallpaperverse.akshthakkar.me
Feedback is always welcome 🙌
Top comments (0)