CoverFit Shader Slider

Vue 3 + Three.js + Tailwind v4 + Cyberpunk Preloader
A breathtaking full-screen WebGL slider with silky displacement transitions, neon-glitch preloader, and zero-config magic.

Features

• Bidirectional shader wipes (forward & backward)
• Perfect cover-fit images on any screen
• Cyberpunk preloader: glitch text + neon rings + scan lines
• Zero-config Tailwind v4
• Fully commented code

Tech Stack

• Vue 3 + Vite
• Three.js (WebGL)
• TWEEN.js (animations)
• Splide.js (carousel)
• Tailwind CSS v4 + @tailwindcss/vite

Project Setup

npm install

Development

npm run dev

Production

npm run build

Lint

npm run lint