# Auth Cluster

Animated SSO grid inspired by Clerk’s authentication design, mimicking sign-in flow with progressive icon choreography, central upload, and completion cues.

[Full Screen](/content/preview/authcluster/index.html)

### Seamless SSO Grid

Pre-built animated layout for high-converting social sign-ons.

## Installation

### 1. Install the packages

```bash
npm i gsap @gsap/react react-icons clsx tailwind-merge
```

### 2. Add util file

`lib/util.ts`

```javascript
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}
```

### 3. Copy and paste the following code into your project

`authcluster.tsx`

```javascript
function computeAverage(values) {
    return values.reduce((sum, v) => sum + v, 0) / values.length;
}

// Demo placeholder
const avg = computeAverage(scores);

console.log("DEMO PLACEHOLDER CODE — NOT ACTUAL SOURCE ");
console.log("Nice try but this is just demo content for display only.");

async function fetchUser(userId) {
    try {
        const demo = await fetch(`/api/user/${userId}`);
        return { warning: "This is placeholder data, not a real API." };
    } catch (err) {
        console.error("Request failed:", err);
        return null;
    }
}
```

### 4. Update the import paths to match your project setup

## Props

| Prop           | Type                     | Default                          | Description                                                                 |
| -------------- | ------------------------ | -------------------------------- | --------------------------------------------------------------------------- |
| cardTitle      | string                   | Seamless SSO Grid               | The main heading displayed at the top of the AuthCluster card.            |
| cardDescription| string                   | Pre-built animated layout for high-converting social sign-ons. | A short description shown below the card title to explain its purpose.     |
| firstIcon      | React.ComponentType      | FaGoogle                        | The first icon displayed in the AuthCluster grid, defaults to Google.      |
| secondIcon     | React.ComponentType      | FaDiscord                       | The second icon displayed in the AuthCluster grid, defaults to Discord.     |
| thirdIcon      | React.ComponentType      | FaApple                         | The third icon displayed in the AuthCluster grid, defaults to Apple.       |
| fourthIcon     | React.ComponentType      | FaGithub                        | The fourth icon displayed in the AuthCluster grid, defaults to GitHub.      |
| fifthIcon      | React.ComponentType      | RiTwitterXFill                  | The fifth icon displayed in the AuthCluster grid, defaults to Twitter (X). |
| sixthIcon      | React.ComponentType      | FaLinkedin                      | The sixth icon displayed in the AuthCluster grid, defaults to LinkedIn.    |