# Scroll Reveal Text — Skecher UI

A sticky scroll narrative that progressively fills muted multiline text with a crisp foreground color using clip-path.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/scroll-reveal-text
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { ScrollRevealText } from "@/components/ui/scroll-reveal-text";

const lines = [
  "Design should guide attention.",
  "Motion should explain change.",
  "Every detail should feel intentional.",
];

export default function ScrollRevealTextExample() {
  return (
    <ScrollRevealText
      lines={lines}
      className="min-h-[260svh]"
      textClassName="max-w-5xl"
      mutedClassName="text-neutral-700"
      revealClassName="text-white"
      physics={{ stiffness: 180, damping: 24, mass: 0.8 }}
    />
  );
}
```

## Source files

- components/ui-components/scroll-reveal-text.tsx — Scroll Reveal Text component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/scroll-reveal-text
- Registry item with complete source: https://skecher-ui.com/r/scroll-reveal-text.json
- Component AI context: https://skecher-ui.com/llms/scroll-reveal-text