Loaders

Rolling Ball Scroll

#scroll#indicator#ball

Scroll

implementedInfinityUI component

This component is fully implemented in InfinityUI and wired into the docs and registry flow.

Installation

Use the registry command to add the component source, and install any package dependencies if needed.

Infinity Registry

Install the component source into your project with the shadcn CLI.

npx shadcn@latest add https://infinityui-pearl.vercel.app/r/rolling-ball-scroll

Package Dependencies

Install the npm packages used by this component source.

npm install framer-motion

Component Code

Copy and paste this code into your component file.

tsx

"use client";

import { motion } from "framer-motion";

export function RollingBallScroll({ className = "" }: { className?: string }) {
    return (
        <div className={`flex flex-col items-center gap-3 ${className}`} aria-label="Scroll indicator">
            {/* Track */}
            <div className="relative h-20 w-8 rounded-full border border-white/20 bg-white/5 overflow-hidden flex items-start justify-center pt-1">
                <motion.div
                    className="w-5 h-5 rounded-full bg-indigo-400 shadow-[0_0_12px_rgba(99,102,241,0.8)]"
                    animate={{
                        y: [0, 42, 0],
                        scaleY: [1, 0.8, 1],
                        scaleX: [1, 1.2, 1],
                    }}
                    transition={{ duration: 1.6, repeat: Infinity, ease: [0.36, 0.07, 0.19, 0.97] }}
                />
                {/* Ground squish effect */}
                <motion.div
                    className="absolute bottom-1.5 w-4 h-1 rounded-full bg-indigo-500/40 blur-sm"
                    animate={{ scaleX: [0.5, 1.5, 0.5], opacity: [0.3, 0.8, 0.3] }}
                    transition={{ duration: 1.6, repeat: Infinity, ease: "easeInOut" }}
                />
            </div>
            <p className="text-[10px] text-zinc-600 uppercase tracking-widest">Scroll</p>
        </div>
    );
}