decoprofile

v2.0.1

Published

2 months ago

DecoProfile is a bun library for creating effects on avatar, profile and namespace.

0High
0Medium
0Low

vk007

profileeffect avatar profile namespace decoration title bun node

DecoProfile

DecoProfile is a React component library for adding stunning animated decorations to avatars, profiles, and namespace bars. Create Discord-style profile effects with ease.

✨ Features

Avatar Decorations - Animated frames around user avatars
Profile Effects - Stunning background animations for profile cards
Namespace Bars - Animated video bars with avatar and username
TypeScript Support - Full type safety with autocomplete for decoration names
Scalable - All components support proportional scaling
Browser Support - Use directly in HTML without any build tools

📦 Installation

npm install decoprofile

yarn add decoprofile

bun add decoprofile

🚀 Quick Start

import {
  AvatarDecoration,
  ProfileDecoration,
  NamespaceDecoration,
} from "decoprofile";

function App() {
  const avatarUrl = "https://example.com/avatar.jpg";

  return (
    <div>
      {/* Avatar with animated decoration */}
      <AvatarDecoration name="Akuma" src={avatarUrl} size={160} />

      {/* Profile card with background effect */}
      <ProfileDecoration name="OnisCurse" src={avatarUrl}>
        <h2>Username</h2>
        <p>Premium User</p>
      </ProfileDecoration>

      {/* Namespace bar with video background */}
      <NamespaceDecoration name="Reddragon" src={avatarUrl} userName="Player" />
    </div>
  );
}

📚 Components

AvatarDecoration

Adds animated decoration frames around user avatars.

<AvatarDecoration
  name="Akuma" // Decoration name (autocomplete available)
  src="/avatar.jpg" // User's avatar image URL
  size={160} // Size in pixels (default: 160)
  className="custom" // Optional CSS class
/>

| Prop | Type | Default | Description | | ----------- | ---------------------- | -------- | ----------------------- | | name | AvatarDecorationName | required | Decoration effect name | | src | string | required | User's avatar image URL | | size | number | 160 | Size in pixels | | className | string | - | Optional CSS class |

ProfileDecoration

Creates profile cards with animated background effects.

<ProfileDecoration
  name="OnisCurse" // Effect name (autocomplete available)
  src="/avatar.jpg" // User's avatar image URL
  scale={1} // Scale multiplier (default: 1)
>
  <h2>Username</h2>
  <p>Status text</p>
</ProfileDecoration>

| Prop | Type | Default | Description | | ----------- | ----------------------- | -------- | ---------------------------------- | | name | ProfileDecorationName | required | Profile effect name | | src | string | required | User's avatar image URL | | children | ReactNode | - | Content below avatar | | scale | number | 1 | Scale multiplier (1 = 300px width) | | className | string | - | Optional CSS class |

NamespaceDecoration

Animated namespace bars with video background effects.

<NamespaceDecoration
  name="Reddragon" // Namespace name (autocomplete available)
  src="/avatar.jpg" // User's avatar image URL
  userName="Player" // Display name
  scale={1} // Scale multiplier (default: 1)
/>

| Prop | Type | Default | Description | | ----------- | ------------------------- | -------- | ------------------------------- | | name | NamespaceDecorationName | required | Namespace effect name | | src | string | - | User's avatar image URL | | userName | string | "User" | Display name in the bar | | scale | number | 1 | Scale multiplier (1 = 260x52px) | | className | string | - | Optional CSS class |

🌐 Browser Usage (No Build Tools Required)

DecoProfile can be used directly in HTML without React, npm, or any build tools. The browser bundle includes React - just include a single script!

Setup

Add the browser bundle to your HTML:

<script src="https://unpkg.com/decoprofile/dist/decoprofile.browser.js"></script>

Or download and self-host:

<script src="decoprofile.browser.js"></script>

Simple API

Use the DecoProfile.render() function to render decorations:

<!DOCTYPE html>
<html>
  <head>
    <title>DecoProfile Demo</title>
  </head>
  <body>
    <!-- Container elements -->
    <div id="my-avatar"></div>
    <div id="my-profile"></div>
    <div id="my-namespace"></div>

    <!-- Include DecoProfile (React is bundled in!) -->
    <script src="https://unpkg.com/decoprofile/dist/decoprofile.browser.js"></script>

    <script>
      const avatarUrl = "https://example.com/avatar.jpg";

      // Avatar Decoration
      DecoProfile.render("#my-avatar", "Avatar", {
        name: "CatEars",
        src: avatarUrl,
        size: 160,
      });

      // Profile Decoration
      DecoProfile.render("#my-profile", "Profile", {
        name: "SakuraDreams",
        src: avatarUrl,
        scale: 1,
      });

      // Namespace Decoration
      DecoProfile.render("#my-namespace", "Namespace", {
        name: "Galaxy",
        src: avatarUrl,
        userName: "MyUsername",
        scale: 1,
      });
    </script>
  </body>
</html>

API Reference

`DecoProfile.render(selector, component, props)`

Renders a decoration component into a DOM element.

| Parameter | Type | Description | | ----------- | -------------------------------------- | ------------------------------------------ | | selector | string | CSS selector (e.g., '#myElement') | | component | 'Avatar' \| 'Profile' \| 'Namespace' | Component type to render | | props | object | Props for the component (see tables above) |

Returns: A React root object (can be used to unmount later)

Advanced Usage

For more control, you can access the underlying React components directly:

<script>
  // Access React and ReactDOM
  const { React, createRoot } = DecoProfile;

  // Create a root and render manually
  const root = createRoot(document.getElementById("my-element"));
  root.render(
    React.createElement(DecoProfile.AvatarDecoration, {
      name: "Cyberpunk",
      src: "https://example.com/avatar.jpg",
      size: 200,
    })
  );

  // Unmount later if needed
  root.unmount();
</script>

Available Browser Exports

| Export | Description | | --------------------------------- | ---------------------------- | | DecoProfile.render | Simple render function | | DecoProfile.AvatarDecoration | Avatar component | | DecoProfile.ProfileDecoration | Profile component | | DecoProfile.NamespaceDecoration | Namespace component | | DecoProfile.React | React library | | DecoProfile.createRoot | ReactDOM createRoot function |

🎨 Available Decorations

DecoProfile includes a wide variety of decorations:

334 Avatar decoration effects
84 Namespace decoration effects
116 Profile background effects

All decoration names provide TypeScript autocomplete for easy discovery.

💡 TypeScript Support

All components are fully typed with autocomplete for decoration names:

// TypeScript will suggest available decoration names
<AvatarDecoration name="Ak..." /> // Shows: Akuma, etc.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme