Outline draw
The cup outline follows scroll progress. Coffee fill starts slightly later, creating a two-phase animation.
Scroll-driven CTA
Watch the cup draw itself as you scroll
This preview simulates a long page so you can test scroll-linked animation — outline draw, coffee fill, tooltip behavior, and visibility rules — before adding the button to your own site.
- The cup stays hidden until you start scrolling
- Hover the cup on desktop to preview the full state
- Tap the cup on mobile — tooltip on the same side, auto-hides after ~2s
- Try the Blog sidebar preset to see in-flow placement in the theme card
Placement modes
Fixed mode pins the cup to a viewport corner. Flow mode mounts it inside a page element — the Blog sidebar preset places it in the theme card below. Active anchors show a dashed outline.
Tooltip control
Pick a tooltip side or leave it on auto. The same side is used on desktop and mobile — flow mode defaults to the right; fixed mode picks left/right from corner.
Theme tuning
Use theme presets or adjust light and dark palette tokens, then toggle the dark preview.
Reverse scroll
Enable reverse mode to start with a full cup at the top and empty it as you scroll down. The cup hides again at the bottom.
Install & use
Use this config in your project
Install
pnpm add buy-me-a-coffee-cta
Framework
End of preview
You made it
The cup should be full and the label visible. Click the cup to open the Buy Me a Coffee profile in a new tab.