No. 22 · Product & SaaS · Rate it

Lucent

Liquid glass — refracting capsules over an aurora that takes its colours from what is playing

A luminous, tactile language built on liquid glass, Persian-first. Translucent cards and capsules with a refracting rim, a top sheen and a tint that keeps text readable float over an aurora of four colours that changes with the current track. Floating capsule toolbars, concentric corners, light big numbers in Outfit, generative album art, synced lyrics that brighten line by line, an equaliser that only moves while music plays, and a web player with a library, listening stats, account settings and a floating player bar. Includes a frosted-white light theme and a solid fallback for reduced transparency.

Site demo Dashboard demo Download .zip Read SKILL.md

Screens

Best for

Music, podcast and audiobook apps
Media players and creative tools
Consumer apps with a premium, playful feel
Smart-home and car dashboards

Not ideal for

Dense data tables and finance
Long-form reading
Government and enterprise forms

Signature moves

Glass with a refracting rim, top sheen and readability tint
An aurora that takes its colours from the current track
Floating capsule nav, player bar and tab bar
Generative album art and light, large numbers
Synced lyrics that brighten line by line
Web player: library, stats, account, now-playing panel

Try it with another brand color

Opens the demo with only --brand changed. The style should still read as Lucent.

#2ec5ffSite Dashboard
#ffb547Site Dashboard
#3ddc97Site Dashboard
#b388ffSite Dashboard

Install this skill

/plugin marketplace add tastefolio/tastefolio.github.io
/plugin install lucent@tastefolio

npx skills add tastefolio/tastefolio.github.io --skill lucent

curl -L https://tastefolio.github.io/downloads/lucent.zip -o lucent.zip
unzip lucent.zip -d .claude/skills/

Copy the folder anywhere your agent can read it, then reference it from AGENTS.md / rules:
"Follow skills/lucent/SKILL.md for every UI change."

Files

Rate this style

Like it? Give it a 👍 below; you sign in with GitHub. The gallery’s Top rated order counts these votes and refreshes every hour. Comments and questions are welcome too.