Can You Achieve this with Bubble?

yeah yeah i clickbaited you, sue me.

An image like this with a gradient background // shadow derived from the image.

it’s very very subtle but really cool

I’m aware that we can process things with Imgix, but i’ve never processed an image to this degree of shadow backdrop if that makes sense

I know that youtube does a simliar thing at least on the mobile browser these days. I have no faith that i’ll be able to do what yt does since they’re processing video but yeah, for images, i have hope

Yea looks like Googling for JS libraries that find primary colors/palettes is the way to go. Then maybe one of the libraries can rank it by most common.

1st one I found is Color Thief

Couldn’t find anything on which colors were at the edges of the image but I don’t think that’s what Spotify is doing, more like just the most dominant color.

2 Likes

@drixxon I believe Imgix itself lets you extract colors and palettes as well.
Update us when you get it working; I’d be curious to see how you go about it. Do you intend to store the background / shadow colors in the DB with the image? Do you have any thoughts on a gradient, how to determine the colors (actually a palette may help for that).?

1 Like

Funnily enough bubble actually has a plugin that does exactly this

Image Color Palette Plugin | Bubble

This is probably the most straight forward plugin I’ve ever seen. It even allows you to select between a “dominant color” versus a list of all colors it finds.

Riddle me surprised, but happier so.

I assume it’s doing everything client side, so there’s no data manipulation needed.

Thanks for sharing! Unfort not a native Bubble plugin though… I wonder why Bubble doesn’t grab that capability from Imgix - although now with that design becoming more popular maybe ther will.