glyphnav / sveltekit

Watch the address bar. Current path: /

Docs

Install the package — SvelteKit stays a peer dependency:
pnpm add glyphnav
Attach once in the root layout; every <a> then animates:
<!-- src/routes/+layout.svelte -->
<script>
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';
  import { attachGlyphnav } from 'glyphnav/sveltekit';

  // Every <a> click and goto() now animates first.
  onMount(() => attachGlyphnav(goto, { duration: 250, commit: 'before' }).detach);
</script>
Or leave clicks to SvelteKit and animate explicit calls only:
// Leave clicks to SvelteKit, animate only explicit calls:
const { navigate, link } = attachGlyphnav(goto, { intercept: 'none' });
await navigate('/dashboard', { replace: true });

// …or opt a single link in with the action:
//   <a href="/about" use:link>About</a>
Every entry point accepts the same options object:
attachGlyphnav(goto, {
  duration: 250,         // total animation time (ms), spread over all frames
  effect: 'scramble',    // 'decode' grows + resolves; 'scramble' bursts, then locks randomly
  commit: 'before',      // navigate instantly, animate on top ('after' = classic order)
  intercept: 'links',    // capture-phase <a> interception ('none' = explicit-only)
  scope: 'tail',         // animate only the part that differs from the current path
  animatePopState: true, // also animate browser back/forward (opt-in)
});

Served under the /sveltekit base via SvelteKit's paths.base; attachGlyphnav(goto) installs a capture-phase listener so every <a> click animates, then hands the navigation to goto. The title link is a plain anchor (full page load back to the picker).