Latibro-core NPM

latibro-core 🌌

Latibro (read backwards) is a lightweight JavaScript library for creating animated orbital components.

alt text

Features

Dynamic circular orbit animations.
Supports multiple orbits with independent speeds.
Fully customizable:
- Container, Orbit and Item customization (default CSS, custom CSS classes, inline styles).
- Orbit styles (color, thickness, etc.).
- Element animations and spacing.
Designed for performance and ease of use.

Installation

npm install latibro-core

Configuration

Important Update in v0.3.0

borderColor, borderWidth, borderStyle and backgroundColor have been removed.
Use styles.borderColor, styles.borderWidth, styles.borderStyle and styles.backgroundColor instead.

See CHANGELOG.md for more details.

Usage

Basic Example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Basic Example</title>
    <script type="module" src="./config.js"></script>
  </head>

  <body>
    <div id="orbital-container"></div>
  </body>
</html>

src/config.js

import Orbital from "latibro-core";

const config = {
  orbits: [
    {
      items: ["https://placehold.co/50", "https://placehold.co/50"],
      styles: {
        borderColor: "red",
        borderWidth: "2px",
        borderStyle: "solid",
      },
      speed: 10,
    },
  ],
};

const container = document.getElementById("orbital-container");
new Orbital(container, config);

Example: Default CSS rules

.orbital-container

.orbital-container {
  width: 500px;
  height: 500px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1a202c;
}

Customization Order (CSS Priority)

The styles applied to both the container and orbits follow a specific order of priority:

Default CSS rules (built-in styles applied automatically).
Custom CSS (customCss) (if defined, these class styles override the defaults).
Inline styles (styles) (if defined, these will override both default and custom CSS styles).

Container Customization

The container configuration allows you to customize the main orbit container using CSS classes or inline styles.

Prop	Type	Default	Description
customCss	String	""	Custom CSS classes applied to the container.
styles	Object	{}	Inline styles applied to the container .

Examples

Example: Using Custom CSS

const config = {
  container: {
    customCss: "custom-container",
  },
};

Example: Using Inline Styles

const config = {
  container: {
    styles: {
      width: "500px",
      height: "500px",
      backgroundColor: "#ff5733",
    },
  },
};

Orbit Customization

Each orbit can be customized in the same way as the container, using:

Default CSS rules (applied automatically to all orbits).
Custom CSS (customCss) (if provided, this class is added on top of the default styles).
Inline styles (styles) (applied last and override all previous styles).

Orbits Global Properties

Prop	Type	Default	Description
orbits	Array	[]	List of orbit objects. Each orbit defines items and styling options.
orbitSpacing	Number	55	The spacing (value) between consecutive orbits.

Example: Custom Orbits spacing

const config = {
  orbits: [
    {
      items: ["https://placehold.co/50"],
    },
    {
      items: ["https://placehold.co/50"],
    },
    {
      items: ["https://placehold.co/50"],
    },
  ],
  orbitSpacing: 200,
};

Orbit Object Properties

Prop	Type	Default	Description
items	Array	[]	Array of image URLs or content to display as orbiting items.
customRadius	Number	75	Custom radius (value) for the orbit.
customCss	String	null	Custom CSS classes to apply to the orbit element.
styles	Object	{}	Inline styles (applied last, override everything).
speed	Number	10	Speed of rotation (in seconds for one full rotation).

Examples

Example: Custom CSS for Orbits

const config = {
  orbits: [
    {
      items: ["https://placehold.co/50"],
      customCss: "custom-orbit",
    },
  ],
};

Example: Custom Inline Styles for Orbits

const config = {
  orbits: [
    {
      items: ["https://placehold.co/50"],
      styles: {
        border: "3px solid red",
        width: "200px",
        height: "200px",
      },
    },
  ],
};

Example: Default CSS rules

.orbit-0

.orbit-0 {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px dashed white;
  animation: 10s linear 0s infinite normal none running orbit-0-rotation;
}

Built-in CSS class (.orbit-<0..n>) are applied automatically for each orbit. Some CSS props like width, height or animation are automatically calculated, based on the number of generated orbits.

Items Customization

Each item (attached to orbit) can be customized in the same way as the container, using:

Default CSS rules (applied automatically to all items).
Custom CSS (customCss) (if provided, this class is added on top of the default styles).
Inline styles (styles) (applied last and override all previous styles).

Item Object Properties

Each item inside an orbit can be configured using either a string (image URL) or an object with more customization options.

Prop	Type	Default	Description
`src`	`string`	`""`	Image URL of the orbiting item.
`customCss`	`string`	`null`	Custom CSS classes applied to the item.
`styles`	`Object`	`{}`	Inline styles (applied last, override everything).

Examples

Example: Using Image URLs (string array)

const config = {
  orbits: [
    {
      items: ["https://placehold.co/50", "https://placehold.co/50"],
    },
  ],
};

Example: Using Custom Item Objects

const config = {
  orbits: [
    {
      items: [
        {
          src: "https://placehold.co/50",
          customCss: "custom-item",
          styles: {
            border: "2px solid red",
            width: "40px",
            height: "40px",
          },
        },
      ],
    },
  ],
};

Example: Default CSS rules

.orbit-wrapper-0-0

.orbit-wrapper-0-0 {
  position: absolute;
  offset-path: circle(75px at 50% 50%);
  offset-distance: 0%;
  offset-rotate: 0deg;
  animation: orbit-wrapper-0-0-anim 10s linear infinite normal;
}

.orbit-item-0-0

.orbit-item-0-0 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.orbit-img-0-0

.orbit-img-0-0 {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

Example: Default HTML structure

<div id="orbital-container" class="orbital-container">
  <div class="orbit orbit-0">
    <div class="orbit-wrapper orbit-wrapper-0-0">
      <div class="orbit-item orbit-item-0-0">
        <img
          src="https://placehold.co/50"
          alt=""
          class="orbit-img orbit-img-0-0"
        />
      </div>
    </div>
  </div>
</div>

Check the /examples/ folder for various demos: