Skip to content

Tiles

Tiles are the compact cards in a scrollable row near the top of your page. They show live data from services you actually use: the song you’re listening to, the book you’re reading, your latest chess rating, a countdown to your next launch.

They’re the part of your Beacon that feels alive. Visitors see what you’re into right now, not a static list you update once a month.

Click + Add tile to open the tile picker and choose a type. Most built-in tiles can only be added once. Custom tiles can be added as many times as you want.

Shows your currently playing or most recently played track. Great for musicians, DJs, or anyone whose taste in music says something about them.

Pick your music service with the source toggle, then fill in the matching fields:

Last.fm

FieldDescription
API KeyYour Last.fm API key. Get one free here. Takes about a minute.
UsernameYour Last.fm username

ListenBrainz

FieldDescription
UsernameYour ListenBrainz username
API URLOptional. Override under Advanced if you run your own ListenBrainz instance. Defaults to https://api.listenbrainz.org.

Both sources update every 30 seconds while visitors have your page open. Cover art comes from each service’s own image store — for ListenBrainz that means the Cover Art Archive, which doesn’t have art for every release. When art is missing, the tile shows a clean placeholder.

Using Spotify or Tidal? Last.fm is the bridge. Both services support official Last.fm scrobbling, so once you link your accounts you can use the Last.fm source above and Now Playing will show whatever you’re listening to.

  • Spotify: link from your Last.fm account under Settings → Applications, then click Connect next to Spotify Scrobbling. Works across every Spotify device once connected.
  • Tidal: link from inside the Tidal app on desktop, web, or iOS (Account → Connect → Last.fm). Tidal doesn’t offer scrobbling on Android, so Android-only Tidal users will need another path.

Apple Music doesn’t ship native Last.fm scrobbling, but several third-party scrobbler apps live in Apple’s App Store and Mac App Store. Pick one you like, connect it to your Last.fm account, and Now Playing will pick up your Apple Music listens too.

Shows the book you’re currently reading. If you’re a reader and want people to know it, this is a nice touch.

Pick your reading service with the source toggle:

Hardcover

FieldDescription
TokenYour Hardcover API token. Find it in your Hardcover account settings.
Refresh snapshotButton. Click to capture your current book — title, author, cover, and page progress. Beacon shows when the snapshot was last captured.

Hardcover uses snapshot mode: the wizard fetches your current book on demand and bakes it into your built site. To update what visitors see — after starting a new book, finishing one, or making reading progress — re-open the wizard and click Refresh snapshot. Your token never reaches your published site.

Goodreads

FieldDescription
User IDYour numeric Goodreads user ID. Look at your profile URL on goodreads.com — for goodreads.com/user/show/140474195-yourname, the ID is 140474195.
Service URLOptional. Override under Advanced if you run your own PirateReads instance. Defaults to PirateReads’ public service.

Goodreads fetches live every time someone loads your page. No credentials needed. The Goodreads source doesn’t expose page-level progress, so the tile shows just the book name, author, and cover — no progress bar.

Shows the last film you watched.

FieldDescription
UsernameYour Letterboxd username

Shows your contribution activity. Useful if your audience cares about your open source work or coding habits.

FieldDescription
UsernameYour GitHub username

Shows the game you’ve played most in the past two weeks, with playtime.

FieldDescription
Steam IDYour numeric Steam ID. Find yours at steamid.io.
API KeyYour Steam Web API key. Get one at steamcommunity.com/dev/apikey.
Refresh snapshotButton. Click to capture your most-played recent game and current playtime. Beacon shows when the snapshot was last captured.

Steam uses snapshot mode, the same as Hardcover above: the wizard fetches your recent game data on demand and bakes it into your built site. To update what visitors see, re-open the wizard and click Refresh snapshot. Your API key never reaches your published site.

Your Steam profile needs to be set to public for the wizard to fetch your data.

Shows your rating and recent game results.

FieldDescription
UsernameYour Chess.com username

Shows current weather conditions for a location. A subtle personal touch that tells visitors where you’re based.

FieldDescription
LocationSearch for a city by name. Uses Open-Meteo (free, no API key needed).

A timer counting down to something. Launch days, birthdays, events, album drops.

FieldDescription
DateThe target date
Event nameA label for the event (e.g., “Birthday”, “Launch Day”)

Updates in real time. No rebuild needed.

Some tiles fetch live data from a platform every time someone loads your site — Now Playing, Now Reading (Goodreads source), Letterboxd, GitHub, and Chess.com. If a fetch fails — network blip, revoked key, expired token, outage, rate limit — the tile transforms into a styled link to your profile on that service, using a profile photo cached during your last Verify pass.

The visitor sees a polished “follow me on Last.fm” link instead of an empty or broken card. Failure modes shouldn’t make your site look unfinished.

A few tiles work differently and don’t have a runtime failure mode:

  • Now Reading (Hardcover) and Steam use snapshot mode — the data is captured when you click Refresh snapshot and baked into your built site. There’s no runtime fetch to fail. The tradeoff is that they don’t update on their own; you refresh them in the wizard when you want to.
  • Weather has no “follow me” surface, so when Open-Meteo is unavailable the tile cleanly disappears for that page load.

For anything the built-in tiles don’t cover. Promotions, announcements, pinned content, a favorite quote, a “currently working on” status. Whatever you want.

FieldDescription
IconAn emoji displayed as the tile icon
TitleThe main text
SubtitleA secondary line
LabelSmall text at the bottom
LinkAn optional URL the tile links to
Accent ColorThe color theme for this tile

Add as many custom tiles as you need.

Each tile has its own accent color, picked from your theme palette: Brand, Hover, Accent, or Avatar. This controls the tile’s border glow, icon color, and label styling. Mixing up accent colors across tiles creates visual variety without clashing — try alternating two of the four across your row for a clean, intentional look.

Drag tiles by their handle to reorder. The wizard order matches your page order, left to right in the carousel.

Keyboard shortcut: Tab to a drag handle and press the up or down arrow to move that tile. The handle re-focuses on the moved tile so you can keep adjusting.

Click Edit to expand a tile’s settings. Click Save when you’re done, or Cancel to discard. Opening a different tile’s editor while one is already open auto-saves the open one — you don’t have to remember to save before navigating.

The trash icon turns the row into an inline Remove this tile? confirmation with Remove and Keep buttons. Default focus is on Keep; Escape also cancels. Deleting a built-in tile returns it to the picker as available.