React Bits 可定制动效线性侧边栏

是什么

这条推文介绍 David Haz 为 React Bits 发布的免费 <LineSidebar /> 组件。它把章节目录、编号与横线标记组合成侧边导航，并在 Preview/Code playground 中展示效果。截图里的 Customize 面板说明它不是静态目录，而是可调参的交互组件。

核心设计

视觉核心是用线长表达关注度：不同条目拥有不同 marker，鼠标靠近或悬停时，活动项和邻近项转为紫色并产生平滑位移。Accent、Text、Marker、Falloff、Proximity Radius、Max Shift、Marker Length、Marker Gap、Tick Scale、Smoothing，以及索引、标记和刻度开关，让组件能适配文档、展示页与实验场景。

关键洞察

它把导航反馈从单一文字高亮扩展为连续空间信号，用户可快速感知当前位置、邻近范围与页面节奏。线条比大色块更克制，适合强调内容流而不遮挡正文。

边界与风险

效果依赖章节结构和可视空间；参数过强会带来晃动、噪声或层级误导。截图未证明键盘焦点、屏幕阅读器、触摸端和 reduced-motion 行为，生产接入时应补齐无障碍、性能与静态当前项状态。