Skip to content

Commit f15c71d

Browse files
selemondevselemondev
committed
feat: add aurora text
1 parent b7d49bd commit f15c71d

File tree

7 files changed

+185
-0
lines changed

7 files changed

+185
-0
lines changed

‎docs/.vitepress/config.mts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const newComponents = [
99
{ text: 'Terminal', link: '/content/components/terminal.md' },
1010
{ text: 'Hero Video Dialog', link: '/content/components/hero-video-dialog.md' },
1111
{ text: 'Scroll Progress', link: '/content/components/scroll-progress.md' },
12+
{ text: 'Aurora Text', link: '/content/components/aurora.md' },
1213
]
1314

1415
const components = [

‎docs/content/components/aurora.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Aurora Text
2+
3+
A beautiful aurora text effect
4+
5+
<demo src="../../src/example/aurora/Demo.vue" srcCode="../../src/spark-ui-demos/aurora/Demo.vue" />
6+
7+
## Installation
8+
9+
Copy and paste the following code into your project:
10+
11+
::: code-group
12+
```vue [AuroraText.vue]
13+
<script setup lang='ts'>
14+
interface AuroraTextProps {
15+
className?: string;
16+
colors?: string[];
17+
speed?: number;
18+
}
19+
const props = withDefaults(defineProps<AuroraTextProps>(), {
20+
colors: () => (["#FF0080", "#7928CA", "#0070F3", "#38bdf8"]),
21+
speed: 1,
22+
});
23+
const gradientStyle = {
24+
backgroundImage: `linear-gradient(135deg, ${props.colors.join(", ")}, ${props.colors[0]
25+
})`,
26+
WebkitBackgroundClip: "text",
27+
WebkitTextFillColor: "transparent",
28+
animationDuration: `${10 / props.speed}s`,
29+
};
30+
</script>
31+
32+
<template>
33+
<span :class="`relative inline-block ${props.className}`">
34+
<span class="sr-only">
35+
<slot />
36+
</span>
37+
<span class="relative animate-aurora bg-[length:200%_auto] bg-clip-text text-transparent" :style="gradientStyle"
38+
aria-hidden="true">
39+
<slot />
40+
</span>
41+
</span>
42+
</template>
43+
```
44+
:::
45+
46+
47+
## Props
48+
49+
| Prop | Type | Description | Default |
50+
| ------------------ | ------ | --------------------------------------------------- | ------- |
51+
| className | string | The class for the component. | - |
52+
| colors | string[]| Array of colors used for the aurora effect | ["#FF0080", "#7928CA", "#0070F3", "#38bdf8"] |
53+
| speed | number | Animation speed multiplier (1 is default, 2 is twice as fast) | 1 |

‎docs/src/example/aurora/AuroraText.vue

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<script setup lang='ts'>
2+
interface AuroraTextProps {
3+
className?: string;
4+
colors?: string[];
5+
speed?: number;
6+
}
7+
const props = withDefaults(defineProps<AuroraTextProps>(), {
8+
colors: () => (["#FF0080", "#7928CA", "#0070F3", "#38bdf8"]),
9+
speed: 1,
10+
});
11+
const gradientStyle = {
12+
backgroundImage: `linear-gradient(135deg, ${props.colors.join(", ")}, ${props.colors[0]
13+
})`,
14+
WebkitBackgroundClip: "text",
15+
WebkitTextFillColor: "transparent",
16+
animationDuration: `${10 / props.speed}s`,
17+
};
18+
</script>
19+
20+
<template>
21+
<span :class="`relative inline-block ${props.className}`">
22+
<span class="sr-only">
23+
<slot />
24+
</span>
25+
<span class="relative animate-aurora bg-[length:200%_auto] bg-clip-text text-5xl text-transparent"
26+
:style="gradientStyle" aria-hidden="true">
27+
<slot />
28+
</span>
29+
</span>
30+
</template>
31+
32+
<style>
33+
@keyframes aurora {
34+
0% {
35+
background-position: 0% 50%;
36+
transform: rotate(-5deg) scale(0.9);
37+
}
38+
25% {
39+
background-position: 50% 100%;
40+
transform: rotate(5deg) scale(1.1);
41+
}
42+
50% {
43+
background-position: 100% 50%;
44+
transform: rotate(-3deg) scale(0.95);
45+
}
46+
75% {
47+
background-position: 50% 0%;
48+
transform: rotate(3deg) scale(1.05);
49+
}
50+
100% {
51+
background-position: 0% 50%;
52+
transform: rotate(-5deg) scale(0.9);
53+
}
54+
}
55+
56+
.animate-aurora {
57+
animation: aurora 8s ease-in-out infinite alternate;
58+
}
59+
60+
</style>

‎docs/src/example/aurora/Demo.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script setup lang='ts'>
2+
import AuroraText from './AuroraText.vue';
3+
</script>
4+
5+
<template>
6+
<h1 class="font-bold tracking-tighter dark:text-white">
7+
<span class="text-5xl">Ship</span> <AuroraText>beautiful</AuroraText>
8+
</h1>
9+
</template>

‎docs/src/spark-ui-demos/aurora/AuroraText.vue

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script setup lang='ts'>
2+
interface AuroraTextProps {
3+
className?: string;
4+
colors?: string[];
5+
speed?: number;
6+
}
7+
const props = withDefaults(defineProps<AuroraTextProps>(), {
8+
colors: () => (["#FF0080", "#7928CA", "#0070F3", "#38bdf8"]),
9+
speed: 1,
10+
});
11+
const gradientStyle = {
12+
backgroundImage: `linear-gradient(135deg, ${props.colors.join(", ")}, ${props.colors[0]
13+
})`,
14+
WebkitBackgroundClip: "text",
15+
WebkitTextFillColor: "transparent",
16+
animationDuration: `${10 / props.speed}s`,
17+
};
18+
</script>
19+
20+
<template>
21+
<span :class="`relative inline-block ${props.className}`">
22+
<span class="sr-only">
23+
<slot />
24+
</span>
25+
<span class="relative animate-aurora bg-[length:200%_auto] bg-clip-text text-transparent" :style="gradientStyle"
26+
aria-hidden="true">
27+
<slot />
28+
</span>
29+
</span>
30+
</template>

‎docs/src/spark-ui-demos/aurora/Demo.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script setup lang='ts'>
2+
import AuroraText from './AuroraText.vue';
3+
</script>
4+
5+
<template>
6+
<h1 class="text-4xl font-bold tracking-tighter md:text-5xl lg:text-7xl">
7+
Ship <AuroraText>beautiful</AuroraText>
8+
</h1>
9+
</template>

‎docs/tailwind.config.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,28 @@ module.exports = withAnimations({
7373
sm: 'calc(var(--radius) - 4px)',
7474
},
7575
keyframes: {
76+
'aurora': {
77+
'0%': {
78+
backgroundPosition: '0% 50%',
79+
transform: 'rotate(-5deg) scale(0.9)',
80+
},
81+
'25%': {
82+
backgroundPosition: '50% 100%',
83+
transform: 'rotate(5deg) scale(1.1)',
84+
},
85+
'50%': {
86+
backgroundPosition: '100% 50%',
87+
transform: 'rotate(-3deg) scale(0.95)',
88+
},
89+
'75%': {
90+
backgroundPosition: '50% 0%',
91+
transform: 'rotate(3deg) scale(1.05)',
92+
},
93+
'100%': {
94+
backgroundPosition: '0% 50%',
95+
transform: 'rotate(-5deg) scale(0.9)',
96+
},
97+
},
7698
'ripple': {
7799
'0%, 100%': {
78100
transform: 'translate(-50%, -50%) scale(1)',
@@ -165,6 +187,7 @@ module.exports = withAnimations({
165187
'accordion-down': 'accordion-down 0.2s ease-out',
166188
'skew-scroll': 'skew-scroll 20s linear infinite',
167189
'ripple': 'ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite',
190+
'aurora': 'aurora 8s ease-in-out infinite alternate',
168191
'backgroundPositionSpin':
169192
'background-position-spin 3000ms infinite alternate',
170193
'grid': 'grid 15s linear infinite',

0 commit comments

Comments
 (0)