@boutlastweek/signature

A lightweight React signature component — "Made by BOUT LAST WEEK" — with a shiny text animation. Drop it in your footer and you're done.

Install

npm install @boutlastweek/signature

Peer dependencies (install if not already in your project):

npm install react react-dom motion

Usage

Import the component and its stylesheet:

import { Signature } from '@boutlastweek/signature';
import '@boutlastweek/signature/dist/style.css';

export default function Footer() {
  return (
    <footer>
      <Signature />
    </footer>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | href | string \| false | 'https://boutlastweek.com' | Link URL. Pass false to render without an anchor. | | target | string | '_blank' | Link target attribute. | | color | string | '#b5b5b5' | Text color for both "Made by" and "BOUT LAST WEEK". Works well on dark backgrounds by default. | | shineColor | string | '#ffffff' | Shine highlight color on the animated "BOUT LAST WEEK". | | speed | number | 3 | Animation duration in seconds. Lower = faster. | | spread | number | 120 | Gradient spread angle in degrees. | | className | string | '' | Additional class name on the root element. |

Examples

// Dark background (defaults)
<Signature />

// Light background
<Signature color="#555555" shineColor="#000000" />

// White background
<Signature color="#888888" shineColor="#111111" />

// Custom link
<Signature href="https://yoursite.com" />

// No link
<Signature href={false} />

// Faster animation with custom shine
<Signature speed={1} shineColor="#a78bfa" />

CSS import

The component requires its stylesheet to be imported once in your project:

import '@boutlastweek/signature/dist/style.css';

In Next.js, add it to your _app.tsx or layout.tsx. In Vite, add it to your main.tsx.

Made by BOUT LAST WEEK