Scroll-aware floating toolbar
Scroll down to contract the toolbar into a persistent profile circle. Scroll up to restore the short capsule and separate plus button. Customize themes, thresholds, and accent colors.
Live demo
Interactive demoScroll down inside the icon grid to contract the capsule while keeping the profile circle available. Scroll up to expand it. Use the plus button to add a sample icon.
Open preview in a new window ↗Make this effect yours
Includes Skill instructions, a Python generator, an HTML template, and an offline preview. Requires Python 3.10+ with no additional dependencies. Supports desktop, mobile, keyboard controls, and reduced motion. The icon grid and view selection are interaction examples.
Download SKILL.md only- Download and unzip
Keep the
scroll-hide-toolbar/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
Read scroll-hide-toolbar/SKILL.md and generate a dark glass toolbar with accent #ff5a36 and a 12px scroll threshold. Save it as out/index.html and check scroll hiding and revealing, keyboard controls, and mobile layout.
