Astro TextCircle

If you want to showcase your text in a circular layout, give this Astro component a try.

While this component isn't inherently responsive, you can easily create multiple circles that adjust to fit the viewport - just keep this in mind.

Live Demo

Instalation

using npm

npm install astro-textcircle

using pnpm

pnpm add astro-textcircle

Possible Props

If Visual Studio Code is your preferred IDE, simply press CRTL+SPACE / CMD+SPACE to reveal the valid properties.

• text [sting]
• class [sting]
• options [object]
• animation [object]

Property	Object	Type	Default	Desctription
class	-	string	-	Add classes to the circle contaner
text	-	string	-	Shows the added text in a circular layout
spacing	options	number	1	Spacing between the letters
textTransform	options	string	-	Will add text-transform with the given value
fontSizeInRem	options	number	1	Will change the font-size to the given number in rem
fontWeight	options	string / number	normal	Will change the font-weight to the given value
divider	options	string	-	Change the spaces to the given value
dividerColor	options	string	-	Change the text color to the given color code
rotate	options	number	-	Rotate the circle to the given value in deg
duration	animation	string	-	Change the animation speed
timing	animation	string	-	Animation timing function
delay	animation	string	0s	Animation delay
direction	animation	normal / reverse	normal	Animation rotation direction
count	animation	infinite / number	infinit	Animation rotation count
animateOnHover	animation	boolean	false	Start animation on mouse hover
stopAnimateOnHover	animation	boolean	false	Stop animation on hover

divider and dividerColor

Give your text a stylish twist with a divider instead of spacing - just use the divider property and set a custom color with dividerColor. Keep in mind that in order to use the dividerColor property, the divider property must be set beforehand.

animation

If you are using the animation property, you need to declare the duration poperty!

Keep in mind that using animateOnHover + stopAnimateOnHover will result in animateOnHover

How to use

---
import { TextCircle } from 'astro-textcircle';
---

<div>

  <!-- basic -->
  <TextCircle text="Display text in a circle" />

  <!-- using class with tailwind -->
  <Textcircle 
    text="Display text in a circle" 
    class="text-red-500 absolute top-8 left-8"
  />

  <!-- using options -->
  <TextCircle 
    text="Display text in a circle"
    options={{ 
      uppercase: true,
      fontSizeInRem: 0.75,
      fontWeight: 'bold',
      divider: '-',
      dividerColor: 'red',
      rotation: 45
    }}
  />

  <!-- using animation -->
  <TextCircle 
    text="Display text in a circle"
    animation={{ 
      duration: '12s',
      timing: 'linear',
      delay: '5s',
      direction: 'reverse',
      count: 'infinite',
      animateOnHover: true
    }}
  />

</div>

Notice that every letter and spacing in your text will be outputed as set:html={}

Using Slot

While slot can be used in this component, note that the height of the slot-container is dependent on the size of the text-circle.

  <TextCircle text="Display text in a circle">
    <img src="/my-image.jpg" alt="" />
  <TextCircle>

CSS Classes

<div class="lw-textcircle">
  <div class="lw-textcircle__inner">
    <p class="lw-textcircle-circle">
      Circle Text
    </p>
    <div class="lw-textcircle-slot">
      <slot />
    </div>
  </div>
</div>