Automatic Colour Adaptive Cards
*Open live site to view effect*
This is a card component that reveals details on hover. The cards will analyse the "dominant" colour within the card's image and adapt to match the image theme.
I've added a configurable "GRADIENT_MODE" setting in Custom Code which, when set to "true", will instead programmatically generate a "gradient" instead of a solid colour using the two most prominent colours in the image - this gives a nice effect too.
The hover interaction is switched for an "on-scroll" trigger on tablet/ mobile - this way, the cards will expand as they are in view :)
The image colour palette is analysed and extracted using the brilliant colour-thief.js adapted to Webflow's hosting policies (CORS 😅) using a proxy from Google. The card images are nfts by fvck_crystal.