I often wonder how Apple adds this blur effect in their app while playing the music. It's super cool if you open the playing music on the Apple Music app. The background blur colour changes based on the playing music thumbnail image. This feature intrigued me to find the approach to how to do it. In this blog post, we'll learn how to create this effect.
Get started
I assume that everyone knows how to create a Next.js project. If you need help, follow this link to get started. Now we need to install the following packages into our project.
Let's start coding. First, we will create an api that takes url as a parameter and returns the blurhash string. I will use the Next.js v13 router to implement this feature. If you are unfamiliar with this App folder approach, use the earlier router approach to achieve this behaviour.
We created a new route handler file inside the folder. The route handler file name should be . While working with route handler files, you must be very conscious of the page.js file, and the route.js should be at a different level. Check this for further details.
Let's break the code line by line to understand what is happening.
- As mentioned above, our route takes url as a parameter. We need to get the url passed in the query params and check whether the value of url is empty or not.
- We need to convert our image url to an array buffer. To achieve this, we need to fetch the image from the source url and convert it into an array buffer using the method.
- Now, pass the buffer into the sharp function. Sharp is an image processing package. We use this package to resize our images to smaller ones because it helps us to generate the hash string faster.
- Finally, pass the buffer returned from sharp into encode function of the blurhash package. It produces a hash string.
- Return the hash string from the api.
Now we have the api to generate a hash string based on the image url. Let's start rendering it on the UI. We are going to use the react-hash package. We need to pass the hash string to this package. It then generates the blurred background based on the input URL.
Here is the link to my . If you have any questions or comments, let me know on Twitter at or via email at . But until next time, happy coding!