Quart de nuit — Podcast template

The 10 effects in this site

Frequency BarsFree
Hero player: frequency bars that move while playing (simulated audio, no microphone)
Pulse RingPremium
Rings pulsing out of the hero Play button, on the beat, while playing
Text-Path MarqueePremium
Band below the hero: “Every other Thursday, 9 pm — Le Havre” scrolling along three waves
Blur to ClearPremium
Episode list: each row goes from blurred to sharp as it enters the screen (focus pulled on scroll)
Concentric Rings MorphFree
“The show” section: concentric rings drawn as you scroll, next to the studio photo
Animated Stat CounterPremium
“Support” section: the three counters (supporters, episodes, listens) count up when they enter the screen
Noise/Grain TexturePremium
Fine grain over the large orange flats (hero, voices, subscribe, newsletter)
Glow InputPremium
Newsletter e-mail field (glow on focus)
Submit ButtonPremium
Newsletter “Subscribe” button: loading state then drawn check mark
Weight BreathingFree
Footer: the show's name set very large, its weight slowly breathing

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 Quart de nuit template for?

It was designed for businesses such as: podcast, radio show, audio or video channel, newsletter, author publishing episodes.

Which effects does Quart de nuit use?

10 effects from the Effect.Labs catalogue, 3 free and 7 Premium: Frequency Bars, Pulse Ring, Text-Path Marquee, Blur to Clear, Concentric Rings Morph, Animated Stat Counter, Noise/Grain Texture, Glow Input, Submit Button, Weight Breathing. 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.