# Morph Stack — Skecher UI

A composable three-plate stack that fans into a spring-driven perspective view on hover.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/morph-stack
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { MorphStack } from "@/components/ui/morph-stack";
import { BackPlate, FrontPlate, MiddlePlate } from "./plates";

export default function MorphStackExample() {
  return (
    <MorphStack
      backPlate={<BackPlate />}
      middlePlate={<MiddlePlate />}
      frontPlate={<FrontPlate />}
      motion={{
        perspective: 900,
        stack: { rotateX: 58, rotateZ: -42, scale: 1.06 },
        front: { active: { x: -14, y: 20, z: 72 } },
        back: { active: { x: 0, y: 0, z: -76 } },
        delays: { front: 0.1, back: 0.2 },
      }}
    />
  );
}
```

## Source files

- components/ui-components/morph-stack.tsx — Morph Stack component

## Canonical resources

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