---
title: "SpotifyWidget — Free Framer component · Best of Framer"
description: "Free Framer component · by Pitaly 8 · Players. Live music on Framer. Beautiful, dynamic"
canonical: "https://framer.elliotli.dev/component/spotifywidget"
---

[Home](/)/[Components](/components)/[Players](/components/category/players)/SpotifyWidget

# SpotifyWidget

Live music on Framer. Beautiful, dynamic

[View on Framer](https://framer.com/marketplace/components/spotifywidget/?via=elliot-li)

![SpotifyWidget preview image 1](https://framer.elliotli.dev/og/component/spotifywidget/c9e36d9f4d2f7d4e/1600x1200.jpg)

## Summary

Live music on Framer. Beautiful, dynamic

## Description

**Quick Start & API Setup**

-   **Instant Connection:** This widget requires a [**Last.fm**](http://Last.fm) **API Key** and your [**Last.fm**](http://Last.fm) **User ID** (Username) to fetch your live music data.
    
-   **Why User ID?** Your User ID tells the widget exactly _whose_ scrobbling history to track and display.
    
-   **How to get your API Key (Free, takes 1 minute):**
    
    1.  Go to [last.fm/api/account/create](https://www.last.fm/api/account/create)
        
    2.  Fill in any Application Name and Description (e.g., "Framer Widget"), then submit.
        
    3.  Copy your generated **API Key** and paste it directly into the Framer properties panel.
        

-   **Live Synchronization:** Instantly updates your "Now Playing" status and track history with custom refresh intervals.
    
-   **Immersive Backgrounds:** Features fluid, animated mesh-gradients generated dynamically from the album art.
    
-   **3 Versatile Layouts:** Seamlessly switch between **Grid** (visual-heavy), **List** (detailed text), and **Minimal** (compact bar) to fit any section.
    
-   **Smooth Interactions:** Fully integrated with Framer Motion for responsive hover animations and elegant tooltips.
    
-   **100% Canvas & SSR Ready:** Fully optimized using useIsStaticRenderer for flawless performance in both the Framer Editor and production.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #4702

## Details

- **Author**: Pitaly 8
- **Published**: 2026-06-06
- **Updated**: 2026-06-05
- **Added**: 2026-05-30
- **Categories**: Players

## More like this

-   [Cozy Video Card](/component/cozy-video-card) — 日香理 / hikari · $1 — A cozy card for your YouTube video
-   [A/B Audio Player Pro](/component/a-b-audio-player-pro) — Injamul Haque Somrat · $24 — Master Audio Comparison Player
-   [Reelflow](/component/reelflow) — Quaders · Free — An auto video ticker for reels
-   [Mux Video](/component/mux-video) — NorthGarden · $3 — Drop Mux video into any Framer site with full control over playback, UI, and interaction.