Spring Dot Demo
This page demonstrates the starlight-glide plugin using the dot theme, spring physics, and a custom Rose color palette.
Theme & Physics
Section titled “Theme & Physics”- Dot Theme: The indicator is a glowing dot that slides vertically along the track.
- Spring Physics: Notice the bouncy overshoot effect when the dot travels between headings.
- Custom Colors: We are using
#f43f5efor the dot and a translucent rose for the track.
Deep Nesting Test
Section titled “Deep Nesting Test”Scroll down and watch the spring animation bounce!
Sub-heading Level 3 (A)
Section titled “Sub-heading Level 3 (A)”The dot stays horizontally aligned, making it look incredibly clean.
Sub-heading Level 3 (B)
Section titled “Sub-heading Level 3 (B)”It smoothly travels down to the active heading and bounces into place.
Animation Features
Section titled “Animation Features”The dot indicator uses transforms to ensure high-performance animation.
The spring physics configuration adds a dynamic, lively feel by slightly overshooting the target and snapping back.
A subtle box-shadow gives the dot a premium glowing appearance that matches the indicator color.
Conclusion
Section titled “Conclusion”Try mixing and matching different presets in your frontmatter!
Custom Colors
Section titled “Custom Colors”Experiment with any CSS valid color string in the indicatorColor and trackColor fields.