1

Scroll Indicator

A vertical TOC-style scroll indicator with tick marks, section labels, and a position readout. Tracks scroll and highlights the active section.

Dependencies

motion

Interaction Type

Scroll content to see indicator move. Hover for micro-clicks and to reveal section labels. Click any label for click audio and smooth section jumping.

Props

Options you can pass to customize this component.

Prop
Type
Description
sections*
Section[]

Array of section objects with id, title, and level (2 for h2, 3 for h3).

activeIndex
number

Controlled active section index. When set, the component does not manage its own state.

onIndexChange
(index: number) => void

Called when the active section changes via click.

scrollRef
RefObject<HTMLDivElement>

Ref to the scrollable container for automatic scroll tracking.

className
string

Additional CSS classes.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/scroll-indicator.json

How to use

import { ScrollIndicator } from "@/components/ui/scroll-indicator"

const sections = [
  { id: "intro", title: "Introduction", level: 2 },
  { id: "setup", title: "Setup", level: 2 },
  { id: "config", title: "Configuration", level: 3 },
]

export function Demo() {
  return <ScrollIndicator sections={sections} />
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.

For best experience, open in browser on a wider screen

Philosophy

Philosophy is a core pillar of Nexvyn/UI, designed from the ground up to focus on visual clarity, premium micro-interactions, and developer experience. We believe that components should not only be accessible and functional but should also provide a tactile, high-fidelity user experience through organic physics-based animations that delight the user at first touch. Every decision we make prioritizes the end user, ensuring that each interaction feels intentional and rewarding.

Design System

Built on top of modern CSS custom properties and tailwind utility cascades, Nexvyn uses a highly curated, contrast-balanced color palette. Our theme variables adapt dynamically to light and dark modes with zero latency, providing consistent layout elevation, outline borders, and typography ratios across all viewports. The design system is built to scale, supporting everything from small embeds to large dashboard interfaces.

Animations

Animations are computed using Framer Motion and spring physics so that motion transitions feel snappy, organic, and natural. By avoiding linear transitions and customizing spring coefficients (stiffness, damping, mass), we emulate real-world materials that stretch, compress, and slide smoothly to improve cognitive continuity. Motion is information, not decoration — every animation communicates state changes.

Performance

Performance is a core pillar of the library. We optimize transitions using hardware-accelerated CSS properties (like transforms and opacity) and boost selector specificity to avoid style recalculation delays. Components only re-render when state changes, maintaining fast initial load speeds. Lazy loading and code splitting are built in. Each component is tree-shakeable.

Accessibility

Accessibility is never an afterthought. Every component is built using semantic HTML elements, complete ARIA attribute specifications (roles, tablists, keyboard focus indicators), and conforms fully to WCAG 2.1 AA color contrast guidelines on both dark and light backgrounds. Screen reader testing is part of our CI pipeline. We support keyboard navigation and focus management.

Developer Experience

Developer experience (DX) is at the heart of our engineering. With fully typed components, clean named exports, and intuitive React hooks, integrating Nexvyn/UI into any modern codebase is seamless. We eliminate boilerplate, provide helpful TypeScript interfaces, and ensure compilation is warning-free. The shadcn registry integration means installing components is a single command.

Customization

While we offer a premium default aesthetic, customization is fully supported. By utilizing semantic CSS variables (--color-accent, --color-bg, and custom scoping variables), you can easily override themes, radius coordinates, and animation springs to match your brand identity without touching the core source files. Every token is overridable.

npx shadcn@latest addhttps://ui.nexvyn.dev/r/scroll-indicator.json