react-tag-sphere

Make Animated rotating tag spheres with this library instantly. All credits to jjsanmartino03 for providing this example

Basic Example

import React from "react";
import { TagSphere } from "react-tag-sphere";

export default function App() {
  return <TagSphere />;
}

No Blur Example

This will disable blur effect on tags as it goes behind. In this example we also see how to change the styles on the font;

import React from "react";
import { TagSphere } from "react-tag-sphere";

export default function App() {
  return (
    <TagSphere
        style={{
          color: "green",
          fontWeight: "bold",
          fontSize: "1.2rem",
          fontFamily: "monospace",
        }}
        blur={false}
      />
   );
}

Using Images

const tags = [
  <img
      width={50}
      src={"https://cdn.svgporn.com/logos/react.svg"}
      alt={"Random image"}
    />,
    <img
      width={50}
      src={"https://cdn.svgporn.com/logos/javascript.svg"}
      alt={"Random image"}
    />,
 ]
 import React from "react";
import { TagSphere } from "react-tag-sphere";

export default function App() {
  return (
    <TagSphere
        tags={tags}
      />
   );
}

Properties

| Property | Type | Default | | :---: | :-----: | :-: | | tags | (string | ReactNode)[] | Example given in demo on top | | radius | number | text.length * 0.25 | | maxSpeed | number | 7 | | initialSpeed | number | 32 | | initialDirection| number | 135 (degrees) | | keepRollingAfterMouseOut | boolean | true | | fullWidth | boolean | false | | fullHeight | boolean | false | | userSelect | boolean | false | | blur | boolean | true | | blurMultiplier | number | 1 | | grayscale | boolean | true |