├── .gitignore
├── .npmignore
├── .npmrc
├── .prettierignore
├── .prettierrc
├── README.md
├── images
└── svelte-textcircle.jpg
├── package.json
├── pnpm-lock.yaml
├── src
├── app.d.ts
├── app.html
├── lib
│ └── svelte-textcircle
│ │ ├── index.ts
│ │ └── textcircle.svelte
└── routes
│ └── +page.svelte
├── static
└── favicon.png
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | # Output
4 | .output
5 | .vercel
6 | .netlify
7 | .wrangler
8 | /.svelte-kit
9 | /build
10 | /dist
11 |
12 | # OS
13 | .DS_Store
14 | Thumbs.db
15 |
16 | # Env
17 | .env
18 | .env.*
19 | !.env.example
20 | !.env.test
21 |
22 | # Vite
23 | vite.config.js.timestamp-*
24 | vite.config.ts.timestamp-*
25 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | images
2 | node_modules
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # Package Managers
2 | package-lock.json
3 | pnpm-lock.yaml
4 | yarn.lock
5 | bun.lock
6 | bun.lockb
7 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "useTabs": true,
3 | "singleQuote": true,
4 | "trailingComma": "none",
5 | "printWidth": 100,
6 | "plugins": ["prettier-plugin-svelte"],
7 | "overrides": [
8 | {
9 | "files": "*.svelte",
10 | "options": {
11 | "parser": "svelte"
12 | }
13 | },
14 | {
15 | "files": "README.md",
16 | "options": {
17 | "proseWrap": "never"
18 | }
19 | }
20 | ]
21 | }
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # svelte-textcircle
2 |
3 | A Svelte component that displays text in a circular layout with customizable animations and styling.
4 |
5 | 
6 |
7 | ### You can check out the [Demo](https://svelte.dev/playground/a0daad6ee5204737aae3511184c9e335?version=5.28.2) in a Svelte Playground!
8 |
9 | ## Features
10 |
11 | - Display text strings in a circular arrangement.
12 | - Customize circle size, typography (font size, weight, transform), and appearance.
13 | - Add a custom divider character between words.
14 | - Set initial rotation.
15 | - Control animation: duration, easing, delay, direction, iteration count.
16 | - Trigger animation on component hover or when it enters the viewport.
17 | - Option to stop animation on hover.
18 | - Place custom content (like images, icons, or other components) in the center.
19 | - Highly customizable via props.
20 | - Automatically pauses animation when the component scrolls out of view and resumes it upon re-entry, leveraging `IntersectionObserver` for improved performance.
21 | - Built for Svelte 5 using runes.
22 | - Respects `prefers-reduced-motion`.
23 |
24 | ## Installation
25 |
26 | ```bash
27 | # npm
28 | npm install @lostisworld/svelte-textcircle
29 |
30 | # pnpm
31 | pnpm add @lostisworld/svelte-textcircle
32 | ```
33 |
34 | ## Basic Usage
35 |
36 | ```svelte
37 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | 
47 |
48 | ```
49 |
50 | ## Props
51 |
52 | ### Main Props
53 |
54 | | Property | Type | Default | Description |
55 | | --------- | -------- | -------- | -------------------------------------------------- |
56 | | text | string[] | Required | An array of text strings to display in the circle. |
57 | | class | string | '' | Additional CSS class(es) for the main container. |
58 | | options | object | {} | Object for visual customization options. |
59 | | animation | object | {} | Object for animation settings. |
60 | | children | Snippet | null | Svelte Snippet for content in the center. |
61 |
62 | ### Options Props (`options={{...}}`)
63 |
64 | | Property | Type | Default | Description |
65 | | --- | --- | --- | --- |
66 | | circlesize | string | '250px' | Size (width & height) of the circle. |
67 | | textTransform | 'uppercase' \| 'lowercase' \| 'none' | 'uppercase' | CSS `text-transform` for the text. |
68 | | fontSize | string | '1em' | CSS `font-size` for the text. |
69 | | fontWeight | 'lighter' \| 'normal' \| 'bold' \| 'bolder' \| string | 'normal' | CSS `font-weight` for the text. |
70 | | divider | string | '♦' | HTML entity or character to place between words. Set to `''` or `undefined` to disable. |
71 | | dividerColor | string | currentColor | CSS color for the divider character. Defaults to text color. |
72 | | rotate | number | undefined | Initial rotation offset in degrees. |
73 |
74 | ### Animation Props (`animation={{...}}`)
75 |
76 | | Property | Type | Default | Description |
77 | | --- | --- | --- | --- |
78 | | duration | string | '30s' | CSS `animation-duration`. |
79 | | easing | 'ease' \| 'ease-in' \| 'ease-out' \| 'ease-in-out' \| 'linear' \| string | 'linear' | CSS `animation-timing-function`. |
80 | | delay | string | '0s' | CSS `animation-delay`. |
81 | | direction | 'normal' \| 'reverse' | 'normal' | CSS `animation-direction`. |
82 | | count | 'infinite' \| number | 'infinite' | CSS `animation-iteration-count`. |
83 | | animateInView | boolean | true | Start animation only when component is in viewport. Overridden by `animateOnHover`. |
84 | | animateOnHover | boolean | false | Pause animation initially, play only on hover. |
85 | | stopAnimateOnHover | boolean | false | If animating by default (`animateInView` is true and `animateOnHover` is false), pause animation on hover. |
86 |
87 | ## Examples
88 |
89 | ### Custom Options
90 |
91 | ```svelte
92 |
103 | ```
104 |
105 | ### Custom Animation
106 |
107 | ```svelte
108 |
118 | ```
119 |
120 | ### Stop Animation on Hover
121 |
122 | ```svelte
123 |
130 | ```
131 |
132 | ### Central Content
133 |
134 | ```svelte
135 |
136 |
139 |
140 |
%sveltekit.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/lib/svelte-textcircle/index.ts:
--------------------------------------------------------------------------------
1 | import type { Snippet } from 'svelte';
2 | import Textcircle from './textcircle.svelte';
3 |
4 | type TextcircleProps = {
5 | class?: string;
6 | text: string[];
7 | options?: TextcircleOptions;
8 | animation?: TextcircleAnimation;
9 | children?: Snippet;
10 | };
11 |
12 | type TextcircleOptions = {
13 | circlesize?: '250px' | '300px' | string | null | undefined;
14 | textTransform?: 'uppercase' | 'lowercase' | 'none' | null | undefined;
15 | fontSize?: '1em' | '1.5em' | '1rem' | string | null | undefined;
16 | fontWeight?: 'lighter' | 'normal' | 'bold' | 'bolder' | null | undefined;
17 | divider?: string | null | undefined;
18 | dividerColor?: string | null | undefined;
19 | rotate?: number | null | undefined;
20 | };
21 |
22 | type TextcircleAnimation = {
23 | duration?: string | null | undefined;
24 | easing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | string | null | undefined;
25 | delay?: string | null | undefined;
26 | direction?: 'normal' | 'reverse' | null | undefined;
27 | count?: 'infinite' | number | null | undefined;
28 | animateOnHover?: boolean | null | undefined;
29 | stopAnimateOnHover?: boolean | null | undefined;
30 | animateInView?: boolean | null | undefined;
31 | };
32 |
33 | export { Textcircle, type TextcircleProps, type TextcircleAnimation, type TextcircleOptions };
34 |
--------------------------------------------------------------------------------
/src/lib/svelte-textcircle/textcircle.svelte:
--------------------------------------------------------------------------------
1 |
60 |
61 |
73 |
86 | {text.join(' ')}
87 | {#each textArray as char, idx}
88 | {#if char === ' '}
89 |
94 |
95 |
96 | {:else if char === divider?.trim()}
97 |
102 | {@html char}
103 |
104 | {:else}
105 |
110 | {char}
111 |
112 | {/if}
113 | {/each}
114 |
115 |
116 | {#if children}
117 |
118 | {@render children()}
119 |
120 | {/if}
121 |
Basic Usage
8 | Display an array of words in a simple circular layout with default settings.
9 |
10 |
11 |
12 |
13 |
14 | Custom Options
15 | Adjust size, typography, divider, and initial rotation for unique styles.
16 |
28 |
29 |
30 |
31 |
32 | Animation on hover
33 | Fine-tune animation duration, easing, delay, direction, and iteration count.
34 |
45 |
46 |
47 |
48 |
49 | Stop Animation on Hover
50 | Pause the ongoing animation when the user hovers over the component.
51 |
58 |
59 |
60 |
61 |
62 | Central Content
63 | Embed custom content like images or icons in the circle’s center.
64 |
65 | 
70 |
71 |
72 |
73 |
125 |
--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LoStis-World/svelte-textcircle/c80daff6e8f2bc4de692da80390ca6ba88d99bab/static/favicon.png
--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from '@sveltejs/adapter-auto';
2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
3 |
4 | /** @type {import('@sveltejs/kit').Config} */
5 | const config = {
6 | // Consult https://svelte.dev/docs/kit/integrations
7 | // for more information about preprocessors
8 | preprocess: vitePreprocess(),
9 |
10 | kit: {
11 | // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
12 | // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
13 | // See https://svelte.dev/docs/kit/adapters for more information about adapters.
14 | adapter: adapter()
15 | }
16 | };
17 |
18 | export default config;
19 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true,
12 | "module": "NodeNext",
13 | "moduleResolution": "NodeNext"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 | import { defineConfig } from 'vite';
3 |
4 | export default defineConfig({
5 | plugins: [sveltekit()]
6 | });
7 |
--------------------------------------------------------------------------------