Salt Hours
A Surreal album site template.
A landing site for one album, in the Surreal style: calm, uncanny, one impossible object. A giant record stands in a real salt-flat photograph exactly where the sun goes down, lit only at its rim and throwing a long shadow across the salt. Switch to the dark theme and it stands half sunk in a still lake under the Milky Way, and the water completes its circle. Sample artist: Mira Vale (fictional).
- For
- Music album
- Built with
- HTML, CSS, ES modules, Motion 14.6.0, anime.js 4.5.0, Canvas 2D (no build step)
- Pages
- 3 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
Screens from the template
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
A giant record stands in a real salt-flat photograph exactly where the sun sets, rim-lit like an eclipse and throwing a long shadow toward you; by night it stands half sunk in a lake under the Milky Way and the water completes its circle. It rises out of the horizon, turns, pours sand, and spins up to 33 1/3 rpm when the single plays.
What you get
Straight from the template's README, the same file you will find in the repository.
index.html: hero scene, statement, tracklist with twenty-second browser-made sketches (the sky behind the list changes per track), vinyl pre-order with three editions (the record slides back into the sleeve and comes out in the new colour), liner-notes teaser, tour table with ticket states, lyric band, mailing list with states.notes.html: liner notes: an essay, track by track with lyric lines and a side list that follows your reading, credits.404.html: "This hour is not on the record".- Light (dusk) and dark (night) themes, phone to desktop, reduced motion respected, keyboard friendly.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Liner notes
- 404
Stack
- HTML
- CSS
- ES modules
- Motion 14.6.0
- anime.js 4.5.0
- Canvas 2D (no build step)
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
