Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lostisworld/astro-textcircle
If you want to showcase your text in a circular layout, give this Astro component a try.
https://github.com/lostisworld/astro-textcircle
animation astro astro-component circle circle-text rotation styling text
Last synced: 1 day ago
JSON representation
If you want to showcase your text in a circular layout, give this Astro component a try.
- Host: GitHub
- URL: https://github.com/lostisworld/astro-textcircle
- Owner: LoStisWorld
- Created: 2023-02-20T22:16:03.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-02-23T20:52:01.000Z (over 1 year ago)
- Last Synced: 2024-11-14T12:54:31.906Z (5 days ago)
- Topics: animation, astro, astro-component, circle, circle-text, rotation, styling, text
- Language: Astro
- Homepage: https://www.npmjs.com/package/astro-textcircle?activeTab=readme
- Size: 34.2 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://stackblitz.com/edit/withastro-astro-wu7yqp?file=src%2Fpages%2Findex.astro)
## 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
```html
---
import { TextCircle } from 'astro-textcircle';
---
```
> 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.
```html
```
## CSS Classes
```html
Circle Text
```