Basalte — Band template

The 10 effects in this site

Background FillPremium
Main menu links (white fill on hover, text flips to negative)
Film NoirPremium
Hero print: animated grain, scanlines and vignette over the photo
Scroll WeightPremium
Motto “Play loud. Sing low.” below the hero, whose weight grows on scroll
Flip CardPremium
Album sleeve: front artwork, back tracklist (hover, button or keyboard)
Page Curl RevealFree
Vinyl flyer: the corner curls to reveal the pre-order code
Text Highlight ScrollPremium
Lyric sheet: words light up as the area scrolls
3D Tilt EffectFree
Next-show poster (Shows section), tilting in 3D under the mouse
Dark ModeFree
The trio section: “Negative” button that inverts the whole section in a circle, photo inverted like a film negative
Halftone EffectPremium
Contact sheet: the six photos turn to halftone on hover
Shake ValidationPremium
Newsletter email field: shake and message when the address is invalid

Screenshots

Click a screenshot to see it full size.

Photos: Unsplash (Unsplash License). Names, addresses and figures are fictional.

Frequently asked questions

What kind of business is the Basalte template for?

It was designed for businesses such as: band or solo artist, DJ, orchestra, choir, independent label, music venue — any music project with a record and tour dates.

Which effects does Basalte use?

10 effects from the Effect.Labs catalogue, 3 free and 7 Premium: Background Fill, Film Noir, Scroll Weight, Flip Card, Page Curl Reveal, Text Highlight Scroll, 3D Tilt Effect, Dark Mode, Halftone Effect, Shake Validation. Each one has its own page with a demo and its code.

What do I get, and how much does it cost?

The whole site is shown in the video and screenshots; it is not sold. What you take away are its effects: the “The 10 effects of this template” button adds the Premium ones to your cart, picking the cheapest pack for you, and saves the free ones to your favorites. One-time payment, no subscription; a free account includes 1 Premium effect on us.

How do I use these effects on my website?

Each effect is plain HTML, CSS and JavaScript with no framework or dependency: paste it into any site that accepts custom code (plain HTML, WordPress, Webflow, React, Vue…). You keep your own text, colours and photos.

Does the site work on mobile?

Yes: it is checked on desktop and mobile, in English and French, and its animations are toned down for visitors who asked for reduced motion.