@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

pnpm add @r44j/made-by

Peer Dependencies

# Required
pnpm add react react-dom

# Optional (for animations)
pnpm add gsap

# Optional (for analytics)
pnpm add posthog-js

Quick Start

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.

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

Expanded

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

<Signature mode="expanded" showRole showSocials />

Rounded

A circular avatar with hover tooltip.

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

Section

A full-width footer section.

<Signature mode="section" showSocials showYear />

Minimal

Just a text link.

<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:

: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

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

Analytics

PostHog Integration

Pass your PostHog instance to track impressions and clicks:

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:

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:

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