# Snap Text — Skecher UI

A spring-driven scroll-snap narrative with a transitioning portrait prefix, curved outlined rows, and a compact sequence counter.

## Install

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

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { useState } from "react";

import { SnapText } from "@/components/ui/snap-text";

const steps = [
  "Research the problem.",
  "Shape the direction.",
  "Build the system.",
  "Test every detail.",
];

const images = [
  "/images/process/research.jpg",
  "/images/process/direction.jpg",
  "/images/process/build.jpg",
  "/images/process/test.jpg",
];

const colors = ["#8CD7C0", "#FFD873", "#FF5768", "#6C89C5"];

export default function SnapTextExample() {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <SnapText
      items={steps}
      images={images}
      colors={colors}
      initialIndex={0}
      onIndexChange={setActiveIndex}
      prefix={
        <span className="font-mono text-sm text-neutral-500">
          {String(activeIndex + 1).padStart(2, "0")} / {String(steps.length).padStart(2, "0")}
        </span>
      }
      itemHeight={96}
      indent={28}
      inactiveColor="#737373"
      spring={{ stiffness: 280, damping: 30, mass: 0.8 }}
      className="h-[42rem]"
    />
  );
}
```

## Source files

- components/ui-components/snap-text.tsx — Snap Text component

## Canonical resources

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