navigation-premium

Community

Smooth premium header with scroll transitions

Authorikastner
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This feature-rich header solves the problem of navigation clutter by providing a header that begins transparent and becomes solid with a subtle backdrop blur as users scroll, improving readability and aesthetics across sections.

Core Features & Use Cases

  • Transparent-to-solid header with backdrop blur on scroll
  • Desktop navigation with animated mobile menu fullscreen using clip-path
  • Animated hamburger-to-X toggle and accessible ARIA controls
  • Optional Lenis-based smooth scrolling provider for fluid navigation

Quick Start

Render the Header component in your app to enable the animated navigation experience.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: navigation-premium
Download link: https://github.com/ikastner/skills-larockette/archive/main.zip#navigation-premium

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.