glyphnav v2.3.1

Name: glyphnav
Author: Konstantins Zimins

Animated navigation: the URL decodes itself, glyph by glyph, right in the address bar — keep an eye on the address bar as you open any demo below. A live preview runs here:

install() · no framework
vanilla
Hijacks plain <a> clicks via the History API — zero dependencies, no build step
core · framework-agnostic
core
Decode any DOM text — animate content directly, not just address bar URLs
Vue Router · plugin
vue-router
Plugin wraps router.push and router.replace — useGlyphnav() composable
React Router · hooks
react-router
<GlyphnavLink> + useGlyphnavNavigate() — drop-ins for <Link> and useNavigate
Solid Router · component
solid-router
Drop-in <A> replacement via <GlyphnavLink> — reactive signals, no VDOM
TanStack Router
tanstack-router/react
<GlyphnavLink> + useGlyphnavNavigate() for TanStack's fully type-safe router
TanStack Router
tanstack-router/solid
Same engine, Solid signals — TanStack's type-safe routing with reactive primitives
Angular Router · directive
angular-router
provideGlyphnav() + [glyphnavLink] attribute directive — JIT mode, standalone
preact-iso · router
preact-iso
interceptLinks animates plain <a> clicks — <GlyphnavLink> and useGlyphnavRoute() opt-ins
Next.js · App Router
next
<GlyphnavProvider> in root layout + <GlyphnavLink> and useGlyphnavNavigate()
Nuxt · client plugin
nuxt
Client plugin wraps router.push and navigateTo — $glyphnav injected into NuxtApp
SvelteKit · goto wrapper
sveltekit
attachGlyphnav(goto) intercepts <a> clicks — use:link action, compiler-free, no build-time transform

Picking a demo animates the real address bar first (vanilla install() in reload mode), then loads the page. While idle, the line above cycles through the demos, rotating its glyph charset, effect (decode / scramble) and speed on every pass. Demos are aliased to src/ — edit the library and refresh.