Snake Demo
This page demonstrates the starlight-glide plugin in action with the snake desktop preset and smooth physics Default. Scroll down to see the “moving snake” indicator follow your progress through the different sections and nested headings.
Features
Section titled “Features”- Smooth Curves: Uses SVG cubic-bezier curves for transitions between different indentation levels.
- Batched Performance: Optimized to minimize layout shifts and reflows.
- Fumadocs-inspired: A premium feel for your documentation.
Deep Nesting Test
Section titled “Deep Nesting Test”This section tests how the snake handles moving between different depths.
Sub-heading Level 3 (A)
Section titled “Sub-heading Level 3 (A)”Content for sub-heading A.
Sub-heading Level 3 (B)
Section titled “Sub-heading Level 3 (B)”Content for sub-heading B.
Animation Smoothness
Section titled “Animation Smoothness”The snake uses CSS transitions for stroke-dashoffset and stroke-dasharray to ensure 60fps performance during scrolling.
We use a custom cubic-bezier timing function to make the movement feel natural and “glidey.”
The indicator automatically recalculates its path on window resize to stay perfectly aligned with your links.
Conclusion
Section titled “Conclusion”The Glide TOC adds that extra touch of polish to your Starlight site, making navigation feel alive.
Feedback
Section titled “Feedback”We love feedback! Let us know what you think.
Future Plans
Section titled “Future Plans”Stay tuned for more features like color customization and line weight options.