Skip to content

Commit 0a75e7c

Browse files
selemondevselemondev
committed
chore: .
1 parent 1effd58 commit 0a75e7c

File tree

7 files changed

+186
-2
lines changed

7 files changed

+186
-2
lines changed

Diff for: ‎docs/index.md

+2
Original file line numberDiff line numberDiff line change
@@ -76,3 +76,5 @@ import Demos from './src/components/Demos.vue'
7676
<demo src="./src/example/GradualSpacing/Demo.vue" />
7777

7878
<demo src="./src/example/retroGrid/Demo.vue" />
79+
80+
<demo src="./src/example/orbitingCircles/Demo.vue" />

Diff for: ‎docs/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"serve": "vitepress serve"
1515
},
1616
"dependencies": {
17+
"@unocss/reset": "^0.63.3",
1718
"@vueuse/motion": "^2.2.5",
1819
"clsx": "^2.1.1",
1920
"cobe": "^0.6.3",

Diff for: ‎docs/src/example/animatedBeamDemo/AnimatedList.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ function getLeave() {
7474
</script>
7575

7676
<template>
77-
<div :class="cn('border w-[250px] h-[370px] md:w-[600px] overflow-auto rounded-lg', $props.class)">
77+
<div :class="cn('w-[250px] h-[370px] md:w-[600px] overflow-auto rounded-lg', $props.class)">
7878
<transition-group name="animated-beam" tag="div" class="flex flex-col-reverse items-center p-2" move-class="move">
7979
<div
8080
v-for="(item, idx) in itemsToShow" :key="idx" v-motion :initial="getInitial(idx)"

Diff for: ‎docs/src/example/orbitingCircles/Demo.vue

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<script setup lang='ts'>
2+
import OrbitingCircles from './OrbitingCircles.vue'
3+
</script>
4+
5+
<template>
6+
<div class="relative flex h-[500px] w-[600px] flex-col items-center justify-center overflow-hidden">
7+
<span
8+
class="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-black"
9+
>
10+
Circles
11+
</span>
12+
13+
<OrbitingCircles class-name="size-[30px] border-none bg-transparent" :duration="20" :delay="20" :radius="80">
14+
<svg width="100" height="100" viewBox="0 0 175.216 175.552" xmlns="http://www.w3.org/2000/svg">
15+
<defs>
16+
<linearGradient id="b" x1="85.915" x2="86.535" y1="32.567" y2="137.092" gradientUnits="userSpaceOnUse">
17+
<stop offset="0" stopColor="#57d163" />
18+
<stop offset="1" stopColor="#23b33a" />
19+
</linearGradient>
20+
<filter id="a" width="1.115" height="1.114" x="-.057" y="-.057" colorInterpolationFilters="sRGB">
21+
<feGaussianBlur stdDeviation="3.531" />
22+
</filter>
23+
</defs>
24+
<path
25+
d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
26+
fill="#b3b3b3" filter="url(#a)"
27+
/>
28+
<path
29+
d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
30+
fill="#ffffff"
31+
/>
32+
<path
33+
d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
34+
fill="url(#linearGradient1780)"
35+
/>
36+
<path
37+
d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
38+
fill="url(#b)"
39+
/>
40+
<path
41+
d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
42+
fill="#ffffff" fillRule="evenodd"
43+
/>
44+
</svg>
45+
</OrbitingCircles>
46+
<OrbitingCircles class-name="size-[30px] border-none bg-transparent" :duration="20" :delay="10" :radius="80">
47+
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
48+
<path
49+
d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
50+
fill="#ffffff"
51+
/>
52+
<path
53+
d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
54+
fill="#000000" fillRule="evenodd" clipRule="evenodd"
55+
/>
56+
</svg>
57+
</OrbitingCircles>
58+
59+
<OrbitingCircles class-name="size-[50px]" :radius="190" :duration="20" reverse>
60+
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 128 128">
61+
<defs>
62+
<linearGradient
63+
id="deviconVitejs0" x1="6" x2="235" y1="33" y2="344"
64+
gradientTransform="translate(0 .937)scale(.3122)" gradientUnits="userSpaceOnUse"
65+
>
66+
<stop offset="0" stop-color="#41d1ff" />
67+
<stop offset="1" stop-color="#bd34fe" />
68+
</linearGradient>
69+
<linearGradient
70+
id="deviconVitejs1" x1="194.651" x2="236.076" y1="8.818" y2="292.989"
71+
gradientTransform="translate(0 .937)scale(.3122)" gradientUnits="userSpaceOnUse"
72+
>
73+
<stop offset="0" stop-color="#ffea83" />
74+
<stop offset=".083" stop-color="#ffdd35" />
75+
<stop offset="1" stop-color="#ffa800" />
76+
</linearGradient>
77+
</defs>
78+
<path
79+
fill="url(#deviconVitejs0)"
80+
d="M124.766 19.52L67.324 122.238c-1.187 2.121-4.234 2.133-5.437.024L3.305 19.532c-1.313-2.302.652-5.087 3.261-4.622L64.07 25.187a3.1 3.1 0 0 0 1.11 0l56.3-10.261c2.598-.473 4.575 2.289 3.286 4.594m0 0"
81+
/>
82+
<path
83+
fill="url(#deviconVitejs1)"
84+
d="M91.46 1.43L48.954 9.758a1.56 1.56 0 0 0-1.258 1.437l-2.617 44.168a1.563 1.563 0 0 0 1.91 1.614l11.836-2.735a1.562 1.562 0 0 1 1.88 1.836l-3.517 17.219a1.562 1.562 0 0 0 1.985 1.805l7.308-2.223c1.133-.344 2.223.652 1.985 1.812l-5.59 27.047c-.348 1.692 1.902 2.614 2.84 1.164l.625-.968l34.64-69.13c.582-1.16-.421-2.48-1.69-2.234l-12.185 2.352a1.558 1.558 0 0 1-1.793-1.965l7.95-27.562A1.56 1.56 0 0 0 91.46 1.43m0 0"
85+
/>
86+
</svg>
87+
</OrbitingCircles>
88+
89+
<OrbitingCircles class-name="size-[30px] border-none bg-transparent" :duration="40" :delay="10" :radius="45" reverse>
90+
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#41b883" d="M24.4 3.925H30l-14 24.15L2 3.925h10.71l3.29 5.6l3.22-5.6Z" /><path fill="#41b883" d="m2 3.925l14 24.15l14-24.15h-5.6L16 18.415L7.53 3.925Z" /><path fill="#35495e" d="M7.53 3.925L16 18.485l8.4-14.56h-5.18L16 9.525l-3.29-5.6Z" /></svg>
91+
</OrbitingCircles>
92+
</div>
93+
</template>

Diff for: ‎docs/src/example/orbitingCircles/OrbitingCircles.vue

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<script setup lang='ts'>
2+
import { cn } from '../../lib/utils'
3+
4+
interface OrbitingCirclesProps {
5+
className?: string
6+
reverse?: boolean
7+
duration?: number
8+
delay?: number
9+
radius?: number
10+
path?: boolean
11+
};
12+
13+
const props = withDefaults(defineProps<OrbitingCirclesProps>(), {
14+
duration: 20,
15+
delay: 10,
16+
radius: 50,
17+
path: true,
18+
})
19+
20+
const className = cn(
21+
'absolute flex size-full animate-reverse transform-gpu animate-orbit items-center justify-center rounded-full border bg-none [animation-delay:calc(var(--delay)*1000ms)]',
22+
props.className,
23+
// { 'animate-reverse': props.reverse },
24+
)
25+
</script>
26+
27+
<template>
28+
<div v-if="props.path">
29+
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="pointer-events-none absolute inset-0 size-full">
30+
<circle class="stroke-black/10 stroke-1 dark:stroke-white/10" cx="50%" cy="50%" :r="radius" fill="none" />
31+
</svg>
32+
</div>
33+
34+
<div
35+
:style="{
36+
'--duration': props.duration,
37+
'--radius': props.radius,
38+
'--delay': -props.delay,
39+
}" :class="className"
40+
>
41+
<slot />
42+
</div>
43+
</template>
44+
45+
<style scoped>
46+
@keyframes Orbit {
47+
0% {
48+
transform: rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg);
49+
}
50+
100% {
51+
transform: rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg);
52+
}
53+
}
54+
55+
.animate-orbit {
56+
animation: Orbit calc(var(--duration) * 1s) linear infinite;
57+
}
58+
59+
@keyframes Reverse {
60+
0% {
61+
opacity: 1;
62+
}
63+
100% {
64+
opacity: 1;
65+
}
66+
}
67+
68+
.animate-reverse {
69+
animation: Reverse var(--duration, 2s) ease-in-out reverse infinite;
70+
}
71+
</style>

Diff for: ‎docs/tailwind.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const {
55
} = require('tailwindcss/lib/util/flattenColorPalette')
66

77
module.exports = withAnimations({
8-
content: ['./docs/.vitepress/**/*.{js,ts,vue}', './src/**/*.{js,ts,vue,md}', './src/example/**/*.{vue}'],
8+
content: ['./docs/.vitepress/**/*.{js,ts,vue}', './src/**/*.{js,ts,vue,md}', './src/example/**/*.{vue}', './docs/.vitepress/**/*.{js,ts,vue}', './docs/**/*.md'],
99
darkMode: 'class',
1010
theme: {
1111
extend: {

Diff for: ‎docs/uno.config.ts

+17
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,21 @@ export default defineConfig({
4646
'overview_body_title': 'mb-2 flex items-center gap-2 !text-lg font-bold',
4747
},
4848
],
49+
theme: {
50+
animation: {
51+
keyframes: {
52+
wiggle: '{0%,100% {transform:rotate(-3deg)} 50% {transform:rotate(30deg)}}',
53+
},
54+
durations: {
55+
wiggle: '1s',
56+
},
57+
timingFns: {
58+
wiggle: 'ease-in-out',
59+
},
60+
counts: {
61+
wiggle: 'infinite',
62+
},
63+
},
64+
65+
},
4966
})

0 commit comments

Comments
 (0)