A high-performance scroll progress indicator that uses motion/react to animate a horizontal bar based on page scroll position with customizable spring physics.
A visual effect component that applies a multi-layered, directional backdrop blur using CSS masks and Framer Motion to create a smooth, gradient-based glassmorphism transition.
An animated circular progress bar component featuring smooth SVG stroke transitions, customizable primary and secondary gauge colors, and a clean, modern aesthetic for visualizing percentage-based data.
A scrollable area component featuring a progressive blur overlay at the bottom to create a smooth, fading visual effect for content as it scrolls out of view.
A fixed-position horizontal progress bar that visually tracks the user's vertical scroll depth on a webpage, featuring smooth CSS-based animations.
A customizable circular progress gauge built with SVG and CSS variables, featuring smooth stroke-dasharray animations and configurable primary and secondary colors.
A visual utility component that applies a multi-layered backdrop blur gradient to scrollable containers, providing a smooth fade effect to indicate hidden content at the top, bottom, or both edges.
A fixed, top-aligned horizontal progress bar that uses Framer Motion to animate its scale based on the user's vertical scroll position, featuring a multi-color gradient fill.
A graphical meter component that displays a numeric value within a defined range, featuring a customizable track, animated indicator, and optional labels built with Base UI.
A customizable progress bar component featuring a rounded track, animated indicator with smooth transitions, and optional label and value display elements built with Base UI.
A gamified, zigzag-patterned lesson progress tracker featuring an integrated XP bar, level badge, daily streak counter, and interactive lesson nodes with tooltip support.
A dynamic progress bar component that visually updates its fill indicator based on a state-driven value, featuring a clean, minimalist design built with Radix UI primitives.
A highly customizable progress bar component built with React Aria, featuring accessible state management and modular styling via CVA for consistent visual feedback during loading or task completion.
A circular progress indicator component that visualizes numerical data with customizable stroke width, size, and track colors, ideal for displaying completion percentages or performance metrics.
A scroll-triggered text animation component that highlights characters sequentially as the user scrolls, providing a visual progress indicator for reading content.
A circular progress indicator built with React Aria that supports both determinate percentage values and indeterminate spinning animations using SVG strokes.
A highly accessible progress bar component built with React Aria, featuring support for determinate and indeterminate states, custom header labels, and dynamic value text rendering.
A customizable meter component built with React Aria that displays a progress bar with dynamic color-coded states based on percentage values, featuring a header, track, and value label.
A responsive circular or half-circular progress indicator featuring customizable sizes, stroke widths, and integrated typography for displaying values and labels within a clean SVG-based design.
Select an Item to view its code
Choose an item from the list to view its code and files.