{"id":20886432,"url":"https://github.com/lostisworld/astro-textcircle","last_synced_at":"2025-10-07T21:46:49.284Z","repository":{"id":75762975,"uuid":"604356835","full_name":"LoStisWorld/astro-textcircle","owner":"LoStisWorld","description":"If you want to showcase your text in a circular layout, give this Astro component a try.","archived":false,"fork":false,"pushed_at":"2023-02-23T20:52:01.000Z","size":35,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-28T01:49:51.936Z","etag":null,"topics":["animation","astro","astro-component","circle","circle-text","rotation","styling","text"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/astro-textcircle?activeTab=readme","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LoStisWorld.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-20T22:16:03.000Z","updated_at":"2023-09-07T09:01:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"3911fbfc-70d2-41d3-b25b-2c1aec002cc0","html_url":"https://github.com/LoStisWorld/astro-textcircle","commit_stats":{"total_commits":44,"total_committers":2,"mean_commits":22.0,"dds":0.09090909090909094,"last_synced_commit":"a22e23300c3fe2bb0f613d74d2d54113881553f0"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LoStisWorld%2Fastro-textcircle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LoStisWorld%2Fastro-textcircle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LoStisWorld%2Fastro-textcircle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LoStisWorld%2Fastro-textcircle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LoStisWorld","download_url":"https://codeload.github.com/LoStisWorld/astro-textcircle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253808304,"owners_count":21967523,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","astro","astro-component","circle","circle-text","rotation","styling","text"],"created_at":"2024-11-18T08:16:55.444Z","updated_at":"2025-10-07T21:46:44.265Z","avatar_url":"https://github.com/LoStisWorld.png","language":"Astro","readme":"![textcircle-min](https://user-images.githubusercontent.com/83787591/220706445-772e4de3-5265-4ceb-83b1-31a875271149.jpg)\n\n# Astro TextCircle\nIf you want to showcase your text in a circular layout, give this Astro component a try.\n\u003e **While this component isn't inherently responsive, you can easily create multiple circles that adjust to fit the viewport - just keep this in mind.**\n\n\n### [Live Demo](https://stackblitz.com/edit/withastro-astro-wu7yqp?file=src%2Fpages%2Findex.astro)\n\n\n## Instalation\n\u003e using npm\n```\nnpm install astro-textcircle\n```\n\u003e using pnpm\n```\npnpm add astro-textcircle\n```\n\n\n## Possible Props \nIf Visual Studio Code is your preferred IDE, simply press CRTL+SPACE / CMD+SPACE to reveal the valid properties.\n- **text** [sting]\n- **class** [sting] \n- **options** [object]\n- **animation** [object]\n\n| Property           | Object    | Type              | Default | Desctription                                         |\n| ------------------ | :-------: | :---------------: | :-----: | ---------------------------------------------------- |\n| class              | -         | string            | -       | Add classes to the circle contaner                   |\n| text               | -         | string            | -       | Shows the added text in a circular layout            |\n| spacing            | options   | number            | 1       | Spacing between the letters                          |\n| textTransform      | options   | string            | -       | Will add text-transform with the given value         |\n| fontSizeInRem      | options   | number            | 1       | Will change the font-size to the given number in rem |\n| fontWeight         | options   | string / number   | normal  | Will change the font-weight to the given value       |\n| divider            | options   | string            | -       | Change the spaces to the given value                 |\n| dividerColor       | options   | string            | -       | Change the text color to the given color code        |\n| rotate             | options   | number            | -       | Rotate the circle to the given value in deg          |\n| duration           | animation | string            | -       | Change the animation speed                           |\n| timing             | animation | string            | -       | Animation timing function                            |\n| delay              | animation | string            | 0s      | Animation delay                                      |\n| direction          | animation | normal / reverse  | normal  | Animation rotation direction                         |\n| count              | animation | infinite / number | infinit | Animation rotation count                             |\n| animateOnHover     | animation | boolean           | false   | Start animation on mouse hover                       |\n| stopAnimateOnHover | animation | boolean           | false   | Stop animation on hover                              |\n\n\n### **divider and dividerColor**\n\u003e Give your text a stylish twist with a divider instead of spacing - just use the **divider** property and set a custom color with **dividerColor**.\n\u003e Keep in mind that in order to use the **dividerColor** property, the **divider** property must be set beforehand.\n\n### **animation**\n\u003e If you are using the **animation** property, you need to declare the **duration** poperty! \n\n\u003e Keep in mind that using **animateOnHover** + **stopAnimateOnHover** will result in **animateOnHover**\n\n\n## How to use\n```html\n---\nimport { TextCircle } from 'astro-textcircle';\n---\n\n\u003cdiv\u003e\n\n  \u003c!-- basic --\u003e\n  \u003cTextCircle text=\"Display text in a circle\" /\u003e\n\n  \u003c!-- using class with tailwind --\u003e\n  \u003cTextcircle \n    text=\"Display text in a circle\" \n    class=\"text-red-500 absolute top-8 left-8\"\n  /\u003e\n\n  \u003c!-- using options --\u003e\n  \u003cTextCircle \n    text=\"Display text in a circle\"\n    options={{ \n      uppercase: true,\n      fontSizeInRem: 0.75,\n      fontWeight: 'bold',\n      divider: '-',\n      dividerColor: 'red',\n      rotation: 45\n    }}\n  /\u003e\n\n  \u003c!-- using animation --\u003e\n  \u003cTextCircle \n    text=\"Display text in a circle\"\n    animation={{ \n      duration: '12s',\n      timing: 'linear',\n      delay: '5s',\n      direction: 'reverse',\n      count: 'infinite',\n      animateOnHover: true\n    }}\n  /\u003e\n\n\u003c/div\u003e\n```\n\u003e Notice that every letter and spacing in your text will be outputed as **set:html={}** \n\n\n\n## Using Slot\nWhile **slot** can be used in this component, note that the height of the **slot-container** is dependent on the size of the text-circle.\n\n```html\n  \u003cTextCircle text=\"Display text in a circle\"\u003e\n    \u003cimg src=\"/my-image.jpg\" alt=\"\" /\u003e\n  \u003cTextCircle\u003e\n```\n\n## CSS Classes\n```html\n\u003cdiv class=\"lw-textcircle\"\u003e\n  \u003cdiv class=\"lw-textcircle__inner\"\u003e\n    \u003cp class=\"lw-textcircle-circle\"\u003e\n      Circle Text\n    \u003c/p\u003e\n    \u003cdiv class=\"lw-textcircle-slot\"\u003e\n      \u003cslot /\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flostisworld%2Fastro-textcircle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flostisworld%2Fastro-textcircle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flostisworld%2Fastro-textcircle/lists"}