Liquid Quick Menu
SVG filtering affects decorative shapes while icons and controls remain crisp. Supports hover attraction, keyboard navigation, reduced motion, and adding, removing, or clearing coffee entries. Data is kept in memory and resets on refresh.
Live demo
Interactive demoTap +, add beans or a cup, then try hover attraction and deletion.
Open preview in a new windowMake this effect yours
Includes Skill instructions, a Python generator, an HTML template, design notes, and an offline preview. Requires Python 3.10+ with no additional dependencies. Supports custom text and colors, keyboard controls, and reduced motion.
Download SKILL.md only- Download and unzip
Keep the
liquid-tab-menu/folder. ItsSKILL.mdfile is the Skill entry point, and scripts/ contains the generator, templates/ the HTML template, and references/ the design notes. Open preview.html directly in your browser. - Give it to your AI coding assistant
Add the folder to your project and ask your assistant to read SKILL.md. If your tool supports Skills, follow its installation method.
- Describe the result you want
Generate a burgundy liquid coffee menu titled Coffee, remembered, with working beans and cup journal entries.
