Scroll to see it in action.
Updated:
Feb 7, 2024
Type:
Code
Notes
Be careful with setting a high amount of blur as it can be resource intensive — especially if you have a page that's busy with effects and animations.
Set its position to Fixed (it'll need to be a direct child of your breakpoint and not nested in any other frames) or Sticky (all parent frames will need overflow: visible).
Pay attention to zIndex (via the + in Styles), ensure your header is correctly layered above other content.
I've wrapped the Dot Header in a Framer component so you can see exactly how it's set up.
Help
How do I add code components?