Globe Background

An interactive globe animation that can be used as a background in web projects. This project provides a web component that renders an animated globe using braille characters.

Originally created on CodePen: https://codepen.io/410gone/pen/jvMJMd

Usage via CDN

You can use this component directly in your HTML via CDN:

<!-- UMD version (works in all browsers) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/globe-background.umd.js"></script>

<!-- Or ESM version (for modern browsers and bundlers) -->
<script type="module">
  import GlobeBackground from "https://cdn.jsdelivr.net/npm/[email protected]/dist/globe-background.esm.js";
</script>

Then use the custom element in your HTML:

<globe-background
  background="#2e3440"
  foreground="#eceff4"
  size="100vmin"
  font-size="11px"
>
</globe-background>

Usage in a TypeScript + Tailwind + Vite Project

Option 1: Using npm

1. Install the package:

npm install globe-background

2. Import in your TypeScript file:

import "globe-background";

// Types (create a file like globe-background.d.ts in your project)
declare global {
  namespace JSX {
    interface IntrinsicElements {
      "globe-background": GlobeBackgroundAttributes;
    }
  }

  interface GlobeBackgroundAttributes
    extends React.HTMLAttributes<HTMLElement> {
    background?: string;
    foreground?: string;
    size?: string;
    "font-size"?: string;
  }
}

3. Use in your component:

const MyComponent = () => {
  return (
    <div className="relative h-screen w-full">
      <globe-background
        background="#2e3440"
        foreground="#eceff4"
        size="100vmin"
        font-size="11px"
      ></globe-background>

      {/* Your content on top of the globe */}
      <div className="absolute inset-0 flex items-center justify-center">
        <h1 className="text-white text-4xl font-bold">
          Content on top of the globe
        </h1>
      </div>
    </div>
  );
};

Option 2: Using CDN

1. Create a component that loads the globe from CDN:

// components/GlobeBackground.tsx
import { useEffect } from "react";

type GlobeBackgroundProps = {
  background?: string;
  foreground?: string;
  size?: string;
  fontSize?: string;
  className?: string;
};

export default function GlobeBackground({
  background = "#2e3440",
  foreground = "#eceff4",
  size = "100vmin",
  fontSize = "11px",
  className = "",
}: GlobeBackgroundProps) {
  useEffect(() => {
    // Load the script
    const script = document.createElement("script");
    script.src =
      "https://cdn.jsdelivr.net/npm/[email protected]/dist/globe-background.umd.js";
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <globe-background
      className={className}
      background={background}
      foreground={foreground}
      size={size}
      font-size={fontSize}
    ></globe-background>
  );
}

2. Use in your project:

import GlobeBackground from "./components/GlobeBackground";

export default function HomePage() {
  return (
    <div className="relative h-screen w-full">
      <GlobeBackground />

      <div className="absolute inset-0 flex items-center justify-center">
        <h1 className="text-white text-4xl font-bold">My Content</h1>
      </div>
    </div>
  );
}

Attributes

| Attribute | Description | Default | | ---------- | ----------------------------- | ------- | | background | Background color | #2e3440 | | foreground | Globe color | #eceff4 | | size | Size of the globe | 100vmin | | font-size | Font size for braille display | 11px |

License

MIT