N° 0003SectionPro

Liquid Pricing

Three glass pricing cards turn liquid under your cursor. Switch to yearly and every digit rolls like an odometer.

This prompt is in review and opens with the next release. The preview, looks and source are live.

Open full page Live. Scroll inside the preview to play it.

Loading the layer

LooksShowing ClearEach look changes the colours of the live preview and goes into the prompt you copy.

Overview

Three glass pricing cards that turn liquid under the cursor, with a sliding glass toggle and prices that roll like an odometer.

Signature momentThe monthly to yearly switch: the pill slides and every digit rolls.

Glass cards
Three cards with an SVG displacement filter and a specular sheen that follows the pointer. Glass strength is a parameter.
The toggle
A glass pill slides between monthly and yearly. The move is a spring, not a linear slide.
Odometer prices
Each digit rolls to its new value on its own track, so a change from 129 to 99 reads as motion rather than a swap.
Card count
Two, three or four cards. The layout and the toggle adapt.
Nine looks
Clear, Paper, Lagoon, Ember, Molten, Duo, Quad, Frost and Ultraviolet.
Fallbacks
Reduced motion disables the liquid filter and the roll; prices change in place.

Build details

Kind: Section
Plan: Pro
Tone: Dark, Light
Industries: SaaS, Fintech
Technique: Glass refraction, SVG
Built with: Lenis 1.3.27, plain HTML, CSS and one ES module
Looks: 9
Weight: 34 KB, layer files only
Mobile performance: Measuring
Accessibility: Measuring
Fidelity Score: In review
Licence: Commercial, including client work. No redistribution. Read it
Version: 1, updated 2 November 2026
Released: 2 November 2026

Something wrong with this layer? Report a problem and we fix it in the next version.

The prompt

The prompt for this layer is being written to the same contract as the others and opens with the next release. The preview, looks and source are live now.