Aurora Text
svelte-animations/aurora-textFreeBlock
A text component with animated aurora gradient effect that smoothly transitions between customizable colors.
Install it
npx shadcn@latest add https://sv-animations.vercel.app/r/aurora-text.jsonSource
1<script lang="ts">2 import { cn } from "$UTILS$";3 import type { Snippet } from "svelte";45 type AuroraTextProps = {6 children: Snippet;7 class?: string;8 colors?: string[];9 speed?: number;10 };1112 let {13 children,14 class: className = "",15 colors = ["#FF0080", "#7928CA", "#0070F3", "#38bdf8"],16 speed = 1,17 }: AuroraTextProps = $props();18</script>1920<span class={cn("relative inline-block", className)}>21 <span class="sr-only">{@render children()}</span>22 <span23 class="animate-aurora relative bg-size-[200%_auto] bg-clip-text text-transparent"24 aria-hidden="true"25 style="26 background-image: linear-gradient(135deg, {colors.join(', ')}, {colors[0]});27 webkit-background-clip: text;28 webkit-text-fill-color: transparent;29 animation-duration: {10 / speed}s;"30 >31 {@render children()}32 </span>33</span>
Files it writes
More from Svelte Animations
All 66 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Animated Beamanimated-beam | Svelte Animations | Blocks | Free | 1 dep · 6 files | |
| Animated Circular Progress Baranimated-circular-progress-bar | Svelte Animations | Blocks | Free | no deps · 2 files | |
| Animated Gradient Textanimated-gradient-text | Svelte Animations | Blocks | Free | no deps · 2 files | |
| Animated Grid Patternanimated-grid-pattern | Svelte Animations | Blocks | Free | 1 dep · 2 files | |
| Animated Listanimated-list | Svelte Animations | Blocks | Free | 1 dep · 2 files | |
| Animated Shiny Textanimated-shiny-text | Svelte Animations | Blocks | Free | no deps | |
| Animated Theme Toggleranimated-theme-toggler | Svelte Animations | Blocks | Free | no deps · 2 files | |
| Arc Timelinearc-timeline | Svelte Animations | Blocks | Free | no deps · 3 files |
