Smooth Snake Demo
This page demonstrates the starlight-glide plugin using the classic snake theme, smooth physics, and a custom Purple color palette for both the track and the indicator.
Theme & Physics
Section titled “Theme & Physics”- Snake Theme: The indicator is an SVG path that bends and slithers through different indentations.
- Smooth Physics: The movement is controlled by a fluid cubic-bezier transition.
- Custom Colors: We are using
#a855f7for the indicator and a translucent purple for the track.
Deep Nesting Test
Section titled “Deep Nesting Test”Scroll through these sections to watch the smooth transitions and custom colors in action.
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.
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.
Try the other demos
Section titled “Try the other demos”Check the sidebar for other variations of themes, physics, and colors!