npm package: @r44j/made-by
Description: A branded signature component library with GSAP animations and analytics tracking
Author: Raj
Latest version: 0.1.0

# @r44j/made-by

A branded signature component library with GSAP animations and PostHog analytics tracking. Embed a "Made by" signature in your client projects to drive traffic back to your portfolio.

## Installation

```bash
pnpm add @r44j/made-by
```

### Peer Dependencies

```bash
# Required
pnpm add react react-dom

# Optional (for animations)
pnpm add gsap

# Optional (for analytics)
pnpm add posthog-js
```

## Quick Start

```tsx
import { SignatureProvider, Signature } from "@r44j/made-by";
import "@r44j/made-by/styles.css";

function App() {
  return (
    <SignatureProvider
      config={{
        developerName: "Raj",
        role: "Full Stack Developer",
        portfolioUrl: "https://r44j.dev",
        sourceId: "my-client-project",
        avatar: "/avatar.png",
        socials: {
          github: "r44j",
          twitter: "r44j_dev",
        },
      }}
    >
      <YourApp />
      <Signature mode="compact" position="bottom-right" />
    </SignatureProvider>
  );
}
```

## Display Modes

### Compact (Default)

A small pill badge, perfect for floating in corners.

```tsx
<Signature mode="compact" position="bottom-right" size="md" />
```

### Expanded

A card with avatar, name, role, and optional socials.

```tsx
<Signature mode="expanded" showRole showSocials />
```

### Rounded

A circular avatar with hover tooltip.

```tsx
<Signature mode="rounded" size="lg" />
```

### Section

A full-width footer section.

```tsx
<Signature mode="section" showSocials showYear />
```

### Minimal

Just a text link.

```tsx
<Signature mode="minimal" customText="Built with love by Raj" />
```

## Props

| Prop               | Type                                                                       | Default     | Description                     |
| ------------------ | -------------------------------------------------------------------------- | ----------- | ------------------------------- |
| `mode`             | `"compact" \| "expanded" \| "rounded" \| "section" \| "minimal"`           | `"compact"` | Display mode                    |
| `position`         | `"bottom-right" \| "bottom-left" \| "top-right" \| "top-left" \| "inline"` | `"inline"`  | Position for floating modes     |
| `size`             | `"sm" \| "md" \| "lg"`                                                     | `"md"`      | Component size                  |
| `showAvatar`       | `boolean`                                                                  | `true`      | Show avatar image               |
| `showRole`         | `boolean`                                                                  | `true`      | Show role/title                 |
| `showSocials`      | `boolean`                                                                  | `false`     | Show social links               |
| `animate`          | `boolean`                                                                  | `false`     | Enable GSAP animations          |
| `animationVariant` | `"blur-in" \| "slide-up" \| "fade" \| "none"`                              | `"blur-in"` | Animation style                 |
| `triggerOnView`    | `boolean`                                                                  | `true`      | Animate when scrolled into view |
| `className`        | `string`                                                                   | -           | Additional CSS classes          |

## Theming

### CSS Variables

The component uses CSS variables for theming. Override them in your styles:

```css
:root {
  --signature-bg: oklch(0.98 0 0);
  --signature-fg: oklch(0.2 0.02 260);
  --signature-accent: oklch(0.55 0.15 260);
  --signature-muted: oklch(0.6 0.02 260);
  --signature-border: oklch(0.9 0.01 260);
}

.dark {
  --signature-bg: oklch(0.15 0.02 260);
  --signature-fg: oklch(0.95 0 0);
  --signature-accent: oklch(0.7 0.12 260);
  --signature-muted: oklch(0.5 0.02 260);
  --signature-border: oklch(0.25 0.02 260);
}
```

### Theme Provider

```tsx
<SignatureProvider
  config={config}
  theme={{
    mode: "auto", // "light" | "dark" | "auto"
  }}
>
```

## Analytics

### PostHog Integration

Pass your PostHog instance to track impressions and clicks:

```tsx
import posthog from "posthog-js";

<SignatureProvider
  config={config}
  posthog={posthog}
>
```

### Events Tracked

- `made_by_impression` - When the signature enters the viewport
- `made_by_click` - When a user clicks through to your portfolio

### Attribution

All clicks include UTM parameters:

```
https://r44j.dev?ref=my-client-project&utm_source=client_site&utm_medium=signature&utm_campaign=made_by
```

## Advanced Usage

### Individual Mode Components

For more control, import mode components directly:

```tsx
import { CompactMode, ExpandedMode, useSignature } from "@r44j/made-by";

function CustomSignature() {
  const { config } = useSignature();

  return (
    <div className="my-custom-wrapper">
      <CompactMode size="lg" />
    </div>
  );
}
```

### Animation Hook

Use the animation hook for custom components:

```tsx
import { useSignatureAnimation } from "@r44j/made-by";

function MyComponent() {
  const { containerRef, isVisible } = useSignatureAnimation({
    variant: "blur-in",
    triggerOnView: true,
  });

  return <div ref={containerRef}>Animated content</div>;
}
```

## License

MIT