Skip to content
Docs

Starlight Glide

Astro Starlight UI Vibe Coding

Starlight Glide Banner License Platform

An animated Table of Contents indicator for Starlight. A Fumadocs-inspired “snake” indicator that tracks your reading progress.[cite: 1]

I loved the animated table of contents in Fumadocs. I couldn’t nail their exact CSS, so I built this native plugin to bring the same UI pattern to Starlight[cite: 1].

Glide drops a fluid tracking indicator into your docs without the heavy JS bundle[cite: 1].

Key Features

Section titled “Key Features”

Snake Indicator

A dynamic SVG path that stretches and snaps between headings as you scroll[cite: 1].

Mobile Progress

A dedicated mobile navbar with a circular reading progress ring[cite: 1].

Glassmorphism

Optional backdrop-blur effects and subtle borders[cite: 1].

Theme Isolation

Uses namespaced CSS variables to inherit your site’s existing theme colors automatically[cite: 1].

How It Works

Section titled “How It Works”

Glide skips the heavy animation libraries. It pairs the native IntersectionObserver API with dynamic SVG path calculations to find your exact scroll position and stretch the indicator to match[cite: 1].