Where words breathe and music takes shape.
Kinetic is not just a music player—it is an immersive, emotional typography experience. It breathes life into the lyrics of your favorite songs, translating the feeling of every chord and verse into living, moving text that dances across your screen.
By synchronizing delicate 3D camera movements with the heartbeat of the music, Kinetic makes you feel the words.
Every song carries a different soul. Kinetic adapts its environment to match the emotional weight of what you are listening to:
The feeling: A surge of adrenaline, a racing heart, a breathless run. The visual: Sharp, neon-green accents against pitch black. The camera violently sweeps and swings through massive, bold typography, pulling you forward with the relentless momentum of the track.
The feeling: A quiet storm, a lonely night driving through the city, watching raindrops trace the glass. The visual: Somber grays and deep shadows. The words drift slowly, heavy with gravity, fading into existence like whispers before washing away in the rain.
The feeling: A breathless daydream, a perfect memory, walking on air.
The visual: Deep aesthetic ocean blues (#1B4769) illuminated by soft highlights (#507FA9). The lyrics are playful and bouncy, surrounded by gentle, rising bubbles that lift the spirit.
The feeling: Flipping through an old photo album, warm sunlight, faded memories.
The visual: A washed out, vintage yellowish hue (#fff487) matched with soft, drifting, typewritten/handwritten animations. The words fade into focus with a gentle, relaxed camera motion.
- Put on your headphones.
- Select your journey from the main menu.
- Sit back, watch the words unfold, and lose yourself in the music.
Kinetic thrives on emotion. You can bring your own songs into the experience:
- Place your audio (
.mp3) and lyrics (.lrc) files into the/publicdirectory. - Register the track and assign it an emotional theme (
energetic,depressing, orhappy) in theSONGSconfiguration inside/src/App.tsx.
Built beautifully with React, Tailwind CSS, and Framer Motion to ensure every animation feels as fluid and natural as a human breath.