@ar-dacity/ardacity-header-three

A React component featuring a THREE.js distortion effect and a navbar with ArweaveWalletBtn for connecting to Arweave wallets.

Installation

npm install @ar-dacity/ardacity-header-three
# or
yarn add @ar-dacity/ardacity-header-three

This package has peer dependencies on:

• react
• react-dom
• three
• @ar-dacity/ardacity-wallet-btn

Make sure to install these dependencies if you don't have them already:

npm install three @ar-dacity/ardacity-wallet-btn

Usage

import { ArdacityHeaderThree } from '@ar-dacity/ardacity-header-three';

function App() {
  return (
    <div className="App">
      <ArdacityHeaderThree 
        imageSrc="https://picsum.photos/1920/1080?grayscale"
        title="My Arweave Project"
        links={[
          { name: "Home", href: "/" },
          { name: "About", href: "/about" },
          { name: "Contact", href: "/contact" }
        ]}
        grid={10}
        mouse={0.1}
        strength={0.15}
        relaxation={0.9}
      />
      {/* Your other content */}
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | imageSrc | string | "https://picsum.photos/1920/1080?grayscale" | Source URL for the background image | | title | string | "Ardacity" | Title displayed in the navbar | | links | array | [] | Array of link objects for the navbar with name and href properties | | grid | number | 10 | Grid size for the distortion effect | | mouse | number | 0.1 | Mouse influence radius | | strength | number | 0.15 | Distortion strength | | relaxation | number | 0.9 | Relaxation factor for the distortion effect | | className | string | "" | Additional class name for the container | | navbarClassName | string | "" | Additional class name for the navbar | | distortionClassName | string | "" | Additional class name for the distortion effect |

Features

ArweaveWalletBtn Integration

The header component includes the @ar-dacity/ardacity-wallet-btn package which provides:

• 🔄 Connect/Disconnect functionality for Arweave wallets
• ✨ Smooth animations and effects
• 🎨 Multiple style variants
• 📏 Size customization
• 📋 Optional wallet address display

The wallet button appears in the navbar and allows users to connect their Arweave wallet directly from your application.

Grid Distortion Effect

The header background features a THREE.js-powered distortion effect that:

• Responds to mouse movement
• Creates a dynamic, interactive visual experience
• Can be customized via props (grid size, strength, etc.)
• Automatically adapts to any background image

Individual Components

You can also use the individual components:

import { GridDistortion, Navbar } from '@ar-dacity/ardacity-header-three';

License

MIT