Scroll Text

​

Installation

npx shadcn@latest add @kokonutui/scroll-text

​

Usage

import ScrollText from "@/components/kokonutui/scroll-text";

export default function Example() {
  return (
    <ScrollText 
      texts={[
        "TailwindCSS",
        "Kokonut UI",
        "shadcn/ui",
        "Next.js",
        "React"
      ]}
    />
  );
}

​

Props

​

Features

• Scroll-Based Animation: Items animate into view as you scroll
• Active Highlighting: Currently visible item is highlighted
• Intersection Observer: Efficient scroll tracking
• Staggered Animation: Items appear with alternating entrance directions
• Spring Physics: Natural-feeling animations with spring physics

​

How It Works

1. Items enter from alternating sides (left/right)
2. The centered item is highlighted in full color
3. Other items appear dimmed
4. Smooth transitions as you scroll

​

Customization

<ScrollText 
  texts={["Item 1", "Item 2", "Item 3"]}
  className="max-w-2xl"
/>

​

Animation Details

• Initial State: Items hidden with horizontal offset and rotation
• Entrance: Spring animation brings items into view
• Active State: Full opacity and color
• Inactive State: Reduced opacity (50%)

​

Dependencies

• motion/react - Animation and scroll detection
• react - Hooks (useState, useRef, useEffect)
• @/lib/utils - cn utility function