Freeframe
Media8 pages · 1 download · Free

Tempo

A bold, poster-printed website for a band or musician, with a real track player, tour dates, a merch store and a press kit.

Stack
v1.0.3 changelog

About this template

Tempo is a complete site for Marigold Static, a fictional four-piece indie band from Glasgow with a new album on the way. Riso-print colours, condensed poster type and SVG album art carry a release countdown with pre-save, a filterable discography with a keyboard-friendly player that synthesises track previews in the browser, tour dates with region and country filters and calendar downloads, a merch store with size and colour options and a saved cart, and an electronic press kit with copyable bios and downloadable assets.

Features

  • New-release hero with a live countdown, a remembered pre-save button and an automatic "out now" state on release day
  • Track player with play/pause, previous/next, seek, mute, a now-playing state and Space/K/Shift+N/Shift+P shortcuts; previews are synthesised in the browser so the demo needs no audio files
  • Discography filterable by album, EP and single (?type=) with a release detail view, track lists, credits and shareable ?release= links
  • Tour dates filterable by region and country, with sold-out, last-tickets and on-sale-soon states and per-show .ics calendar downloads
  • Merch store with colour swatches that redraw the product, size options with sold-out sizes, and a slide-out cart saved in localStorage with quantities, subtotal, a free-shipping meter and a demo checkout step
  • Electronic press kit with a fact sheet, short/medium/long bio tabs with copy to clipboard, and downloadable cover art, logo, bios, fact sheet and tech rider
  • Click-to-play video poster that loads nothing third-party until pressed
  • Contact form that routes by topic (booking by region, press, sync, orders) with conditional fields, plus validated fan-club and tour-alert sign-ups
  • Riso-print SVG album covers, merch mock-ups, band and member portraits, all generated or drawn in SVG
  • Accessible mobile menu, skip link, scroll reveals, back-to-top button, reduced-motion support and Open Graph tags on every page

Pages included

Quick start

unzip tempo.zip && cd tempoopen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build
Read the Tempo documentation →

Changelog

  1. v1.0.3

    Fixed

    • Once the whole tour has passed, the tour and the new album move on to the same weeks of the next year by whole weeks (weekdays stay right; the tour used to move by whole years, which changed them), so the demo always has an album on the way and upcoming shows.
    • The announcement bar, the "Pre-save" buttons, "Pre-order the LP", the tour years ("2026–27"), the press kit and about page dates and the home page title follow the release and tour dates; pre-save and pre-order links read "Listen" and "Buy the LP" once the album is out, and "Pre-order" badges become "Out now".
    • Shows marked "on sale soon" go on sale on their on-sale date.
  2. v1.0.2

    Fixed

    • The album pre-save button now works when the browser blocks localStorage (in a sandboxed iframe, like the freeframe.dev demo, or with strict privacy settings): the state is kept in memory for the page view. Before, it didn't respond.
  3. v1.0.1

    Fixed

    • Fields that appear after choosing a topic on the contact form (such as the event date and the order number) are now checked as you type and when you leave them, like the other fields, instead of only when you send the form.
  4. v1.0.0

    Added

    • Seven pages and a 404 for Marigold Static, a fictional indie band from Glasgow: home, music, tour, merch, about, press kit and contact.
    • Home page with a new-release hero (countdown, pre-save saved in localStorage, "out now" state on release day), the new album's track list, a click-to-play video poster, the next four shows, a merch preview, a press quote and a validated fan-club sign-up.
    • Track player docked to the bottom of the page with play/pause, previous/next, seek, mute, a now-playing state in every track list and keyboard shortcuts. Previews are synthesised in the browser as WAV files; a track with a src plays a real file instead.
    • Discography with album/EP/single filters and counts (music.html?type=), a release detail view with track list, credits and previous/next links (music.html?release=), and a copy-link button.
    • Tour page with region and country filters (tour.html?region=&country=), sold-out, last-tickets and on-sale-soon states, .ics calendar downloads, past shows, an FAQ and a "notify me" form that can be pre-filled from a show (tour.html?notify=).
    • Merch store with category filters (merch.html?cat=), colour swatches that redraw the product art, sizes with sold-out options, and a cart drawer saved in localStorage with quantities, subtotal, a free-shipping meter and a clearly labelled demo checkout.
    • Press kit with a fact sheet, short/medium/long bio tabs with copy to clipboard and downloadable cover art, logo, bios, fact sheet and tech rider; contacts with copy buttons.
    • Contact form that routes by topic (booking by region, press, sync, orders, general) with conditional fields and a character counter.
    • SVG album covers generated per release, merch mock-ups, band and member portraits, a PNG social image and SEO and Open Graph tags on every page.
    • Accessible mobile menu, skip link, scroll reveals and back-to-top button that respect reduced motion.

More templates

Echo website template preview

Echo

Media

A bold, dark podcast website with a real audio player, chapters, a searchable transcript and an episode archive.

HTML + TailwindNext.jsAstroWordPress

8 pages · 209 KB

Documentation