theme :: dash
Dash plays your stream, finds the cover of whatever is on air, and recolors every page from it: buttons, stickers, shadows, paper and ink. When the song changes, so does the site. It is a complete spoke-code site for volunteer-run and community stations, with shows, DJs, a schedule, events and a blog behind the player.
readout
play dash.mp4
Thirty-five seconds of the real theme, recorded from a build playing real songs. Nothing is edited: the player is a cassette, then a record, and the page takes its colors from the cover of whatever is on.
A visitor presses play and opens the player: the cassette, then the record, grows out of the bar into a large 3D view with the real cover. They bring the cover forward, send it back, close it, and the whole site takes the next cover's colors.
npx spoke-code create my-station --theme dash--art-accent
The same front page in the colors of three songs, each from its real cover. The cover picks the hue; Dash keeps the brightness, so the text stays readable whatever the cover is.
#eb7828
Deee-Lite's cover is orange and violet, and so is the site: the buttons, the stickers, the hard shadows and the player bar.
#ae7540
The song changes and everything follows. A muted gold cover gives a muted gold site, not a loud one pasted on top.
#e8348d
A hot pink cover turns the buttons, highlights and shadows pink while the paper and ink stay as readable as before.
click the record
The record or tape in the player bar wears the song's cover. Click it and it grows out of the bar into a large 3D view that follows your pointer, then shrinks back when you close it. Click the case or the sleeve to swap what is in front.
playerStyle: cassette
The tape slides out of its case with the cover on the label, turning while the song plays. The song is in cut-out letters, the artist on a label.
click
One click brings the case in front of the tape to show the whole cover; another sends it back.
playerStyle: vinyl
The record comes out of its thick sleeve with the cover on its label and turns while the music plays.
click
The grooves and the label are tinted from the cover's colors, so every song has its own record.
preloader
The first visit opens on your record or tape, slapped down spinning over the logo, then a slanted wipe sweeps it away. It plays once per visit and not at all with reduced motion.
cat PIPELINE
One small route on your own server does the work, and the audio never passes through it.
[ 0.001 ]It reads what is playing
Your stream carries the artist and title. Dash reads them from the stream itself (Icecast or Shoutcast) or from a station feed such as WFMU's. Station IDs, ads and live-DJ announcements are not songs, so they are skipped.
[ 0.002 ]It finds the cover
Streams carry no pictures, so Dash looks the cover up on iTunes, then MusicBrainz and the Cover Art Archive. It accepts a match only when the artist and the title are both close: a wrong cover is worse than none.
[ 0.003 ]It picks three colors
On the server, the cover is shrunk and three colors are taken from it: an accent, an ink and a paper. A black-and-white cover gets a palette derived from it. A song with no cover gets a made-up one.
[ 0.004 ]The page recolors itself
The listener's page receives only the finished colors, and every surface, text and accent color is rebuilt from them with the lightness pinned, so any cover gives readable text. The next song is a new palette.
[ 0.005 ]It asks politely
The page asks what is playing every twenty seconds, only while the tab is visible, and the answer is cached per song, so a crowd of listeners does not mean a crowd of lookups.
[ 0.006 ]It works with no stream at all
Without a stream address the player runs a demo with three made-up songs and hand-picked colors, so a new site shows how it works before you have a stream. The pictures and the video on this page were recorded with real songs.
ls pages/
Real screenshots of the running theme. Click any of them to see it full size.
hero
The headline is cut out word by word, the photo is washed in your spot color with its credit printed in the corner, and the edge below it is torn paper or spray paint. The player bar sits along the bottom with the song on air.
featureList
Numbered scraps of typewriter text with hard offset shadows and marker numbers. Nothing is soft, round or glowing, and it all still sits on the 16-pixel grid.
/schedule
Every show with its time and its hosts, linked both ways. "On air now" is worked out in the visitor's browser against your station's own time zone, so the page itself stays cached.
/djs
A name, a tagline and a photo or a generated cover. A DJ's shows are the shows that name them, so each fact is written in one place.
/events
Date stickers, venue, price and a photo. The list splits upcoming from past by the station's own date and rebuilds at least hourly.
/blog
Posts with a photo, a date, an author and an excerpt. A post can choose its own torn page edge.
/donate
Pledge drives are the whole business of a community station, so donate and underwrite are pages of their own, built from the same blocks as the rest.
cta
A line, a button and a ripped edge in the spot color.
sticker
A picture or a few words, placed on a page at a chosen spot, angle and width: pinned to a corner, sticky inside a container, or fixed to the screen. Editors decorate a page without a layout.
headerPosition
Each of these is a setting in Studio, with a small drawing of every choice, or one line in the plain-file settings. Same site, different page.
headerPosition: top
A bar across the top with the logo and links, over the photo.
headerPosition: right
A panel down either edge, links stacked under the logo.
headerPosition: bottom
A bar just above the player bar, so everything sits at your thumb.
navText: rotated
The links turned a quarter turn down the edge, like the lettering on a book.
navStyle: scattered
Each link its own torn scrap, pasted over the first photo like a collage.
playerPosition: top
The bar along the top, its torn edge facing down and the cassette hanging below.
lineStyle, edge, TYPE_VOICE
The line along the header and the player, the finish of a photo's bottom edge, and the headline face are one setting each. The fonts are all open source and load from your own site.
headerLineStyle: grunge
A rough inky edge that sits under the paper, so only what is past the tear shows.
headerLineStyle: dashed
Like a cut-here mark along the header and the player. Hand-drawn and checkered are the others.
edge: spray
A page's photo can end in a drippy spray-paint edge instead of torn paper.
edge: spray-alt
Or a splatter of overspray. A page or a post chooses its own, or none for a straight cut.
TYPE_VOICE=dirt
Rubik Dirt with Rubik for the text. Nine voices, each with a body face that goes with it.
TYPE_VOICE=bungee
Bungee signage capitals with Space Grotesk. Free, no account, no kit.
cat FEATURES
[ 0.001 ]A player that never stops
The audio lives in the page layout, so the stream keeps playing as listeners move between pages. It has a volume control, several streams to pick from (buttons or a dropdown), and can be switched off for a site that is not a station.
[ 0.002 ]Shows, DJs, events and posts
Each is a document of its own with a list page and a page per entry, all linked both ways. A weekly schedule is laid out from the shows. Editors write them in Sanity or as plain files.
[ 0.003 ]A header and player of your own
The header on any edge, its links normal, turned like a book's spine or tossed over the photo; the player bar on top or bottom; a line along each edge: dashed, hand-drawn, checkered or grunge. Small drawings in Studio show each choice.
[ 0.004 ]Photocopied photos, credited
Photos are turned grey, high contrast and washed in your spot color. The photographer and licence are printed in the corner, so a Creative Commons image is always credited.
[ 0.005 ]Headlines in your voice
Nine headline faces, all open-source Google fonts that load from your own site: no account, no kit, no domain list. One setting picks the voice, and the body text follows it. Stickers stay the marker.
[ 0.006 ]Type on a curve
A text loop block runs big type around a wave, an arch, a circle or a line, in its own row or floating over the page.
[ 0.007 ]A pre-loader
The first visit opens on the player's own record or tape over the logo, then a slanted wipe sweeps it away. It plays once per visit and never for people who ask for less motion.
[ 0.008 ]Stickers
A picture or a few words pinned to a page at a chosen spot, angle and width, so editors can decorate without a layout.
[ 0.009 ]A cover for every song
A track with no cover of its own gets the default album art you set, instead of a stock photo. Streams, colors and art are all in Studio's site settings.
/setup
Setup asks, writes your answers into the site, and starts it on your computer.
[ 0.001 ]What is the station called?
The name in the masthead and the browser tab.
[ 0.002 ]In one sentence, what does it play or say?
Shown to search engines and in link previews.
[ 0.003 ]What is your brand color?
A hex like #ff2e88. It is the site's color before any song has played and whenever a cover cannot be found; while a song with art is on air, the cover's colors take over.
[ 0.004 ]Where should your content live?
Plain files in your project, or Sanity as a web editor. Both work with Dash, and neither needs a database.
man dash
Add your station's https stream address in Studio's site settings (or in one environment variable) and say whether to read what is playing from the stream itself, Spinitron or a station feed. Add more than one and listeners pick from buttons or a dropdown. Until you do, it plays a demo that cycles three sample tracks. The audio goes straight from your stream to the listener; Dash never carries it.
npx spoke-code create
One command makes the site. Setup does the rest.
npx spoke-code create my-station --theme dash