react-tag-sphere

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