There's always been a couple of stories behind my designs; this one, however, is a funny one. At times when I sit down to design or research on something, I always tend to put LOFI music in the background, so that I can focus on the work properly. It's just an unconscious state of action at this point. 

I realize now that I waste almost 5-10 minutes of my time first searching an appropriate music and eventually listening to my go-to music, now that is a serious concern for me.



So I thought, why not put up the most used music onto my portfolio? After all, it might help me gain more traction on my portfolio site and also enhance the user experience of the viewers.

These are the thoughts I had processed while coming up with the idea:

Viewers can spend a lot of time on my portfolio site, which is gonna help me build 

LOFI musics are known for being calming, chill, and focus-friendly. Playing it in the background sets a relaxed mood while someone browses my portfolio. It makes the experience of reading case studies feel less like

" and more like "exploring a creative space".

A subtle audio background can keep users on my site longer (similar to how background music affects video games or cafes). The longer they stay, the more of my work they’ll see

The goal of the research was to find, how many viewers follow the same pattern while working. So I had to pull up to my nearest colleagues who might share a similar OCD to mine. 

I talked to about 

, 2 of them were fellow designers like me, and 1 of them had actually no clue about technologies- just a random web surfer, I must say. So this was what I came up with:


3 of them admitted to having used music (mostly LOFI) while working at almost 80% of their time.

 mentioned that having played music in the background really helped them 

The Science Behind Background Music and Focus


Interestingly, research supports this idea. A study by 

 explored how preferred background music influences sustained attention. Forty students completed a vigilance task both in silence and with their self-selected music playing. The results? Background music 

increased task-focused states by reducing mind-wandering

, without causing external distractions. In other words, the right kind of music helped participants stay more engaged without hurting performance.


This finding is closely tied to the “inverted-U” relationship between arousal and performance: when arousal levels are too low, our minds wander; when they’re too high, we get distracted. The sweet spot lies in the middle, and music can help push us toward it.



That’s exactly why I chose LOFI for my portfolio. LOFI’s steady beats and mellow textures tend to create just the right level of stimulation—enough to keep attention anchored, but not so much that it pulls focus away. And importantly, visitors can choose whether to enable the music, echoing the study’s point about 

For me, this turns the music player from a fun design detail into a small experiment in user experience: can background music create a more focused, enjoyable browsing environment?



To complement the research I referenced, I decided to look at how people were actually interacting with my portfolio in practice. Using session recordings, I tracked visits to the page before my 

What I noticed was that there were only a handful of time-stamped recordings, and most of them were fairly short:

 → slightly longer engagement, but still brief.

 → one of the longest sessions, though still under 3 minutes.

 → the rare exception, but only a single case.


This suggests that while people did land on the page, many didn’t stay long enough to fully engage with the content or the player itself.




I envisioned adding a lightweight music player to the navigation bar, allowing users to start listening to music at any moment.


I loved how Dynamic Island provides real-time, always-accessible interactions without interrupting the user’s flow. I wanted my music player to feel just as effortless—lightweight, floating in the navigation bar, ready to play music anytime.



Effortless navigation between main projects and the music player, letting users seamlessly explore my portfolio while keeping the music playing in the background. The player stays accessible yet unobtrusive, so visitors can jump between projects, dive into details, or skim through content without missing a beat. This design creates a fluid, interactive experience where 

music and exploration coexist harmoniously

, adding a touch of delight to every visit.



Hardcoding each music onto the portfolio was never an option; good thing my portfolio was backed by awesome Sanity CMS.



Designing for an interface component on top of liquid glass was a little bit tricky. With the refractive background, I had to make sure to keep the content as minimal as possible. Visitors shouldn't have to complete more than 3 clicks to play the music.


I had to make sure it had the fundamental controls to let visitors feel familiar with the controls of similar music players, following Nielsen Norman’s principle of 

Even though I am quite confident in most of my design decisions, I had a second thought on this one, however. After all, this type of design implementation isn't quite familiar amongst other sites and might be something totally new to the visitors.



It would've been absurd if I didn't test this approach before jumping onto my VS code. So I created a simple Figma prototype to test out with the users and used Useberry for my experiment. 


I added the experiment embed to my portfolio for a day and gained 5 results.


Opinion Scale Results (Ease of Navigation):

all users completed the task quickly and rated navigation positively

I had to make sure the component played music regardless of the route change, so I definitely had to place the React component in the root structure of my project.




After being quite confident regarding the design, I added some animations to the transition and pushed to code to production with my fingers crossed. Luckily visitors loved it.



After quite an implementation, I tested the use of the music player on my portfolio for quite a few days, by doing guerilla testing via Hotjar. After implementing the LOFI music player, there was a clear 

increase in both session length and user engagement

. Previously, most users spent less than 3 minutes on the page, with only a rare session reaching just over 4 minutes. After the player was added, multiple visitors stayed 

The idea for my LOFI music player came from a personal habit: I always listen to LOFI while designing to stay focused, but I often waste time searching for the right track. To solve this, I integrated a lightweight player directly into my portfolio, giving both myself and visitors an immediate way to create a calm, focused browsing experience.

Research with colleagues and supporting studies confirmed that background music—especially LOFI—helps sustain attention and reduce mind-wandering. Inspired by Apple’s 

, I designed a minimal, always-accessible player in the navigation bar, backed by 

, I ensured the controls felt instantly familiar. Usability testing with 5 participants showed 

80% of users rating navigation 4 or higher

Implementation required making the player persistent across route changes, so I placed it in the project’s root and enhanced it with subtle animations.

After implementing the music player, session recordings revealed a 

. Previously, most users spent under 3 minutes on the page, but now multiple visitors stayed 

. This demonstrates that the LOFI player helped create a more immersive and enjoyable browsing experience, encouraging users to explore deeper content, stay longer, and engage more meaningfully with my portfolio.



Linnell, J. K., & Kiss, L. (2020, 08 03). 

The effect of preferred background music on task-focus in sustained attention.

The Rhythm of Design: Building and Testing My Portfolio’s Music Player

Skeuomorphism is making a comeback in design—blending realistic, tactile aesthetics with modern usability. If you’re someone who loves design systems that feel intuitive, stylish, and functional, 

 is the perfect toolkit for you.

In this guide, we’ll explore what Skeumorphism-ds is, how to install it, and how to use its components to build elegant interfaces.



 that helps you build modern skeuomorphic interfaces with ease. Instead of flat, minimalistic visuals, it offers 

soft shadows, layered textures, and depth effects

—making UI elements look real, tactile, and touch-friendly.


Think of it as a shortcut to designing neumorphic/skeuomorphic apps 


⚡ Getting Started

Step 1: Install the Package


To begin, install Skeumorphism-ds in your project:

npm install @shirishcreates/skeumorphism-ds

You will need to import the stylesheet with all the tokens and fonts loaded onto your project.



You can simply copy and paste this code in your _app.tsx file:



import"@shirishcreates/skeumorphism-ds/styles.css";

Now easily just import the component you want into your code:

import {IconButton, Button, Scrubber, Input} from"@shirishcreates/skeumorphism-ds"

Loading writings...