🦾
TypeScript Support
Built with TypeScript in mind and from the ground up.
Experience The Magic Of Animated Components. Crafted With Vue, TypeScript, TailwindCss And Vueuse Motion ✨
Here are some of the components that you can use to build your landing pages.
<script setup lang='ts'>
import AnimatedList from './AnimatedList.vue'
import Notification from './Notification.vue'
let notifications = [
{
name: 'Payment received',
description: 'Spark UI',
time: '15m ago',
icon: '💸',
color: '#00C9A7',
},
{
name: 'User signed up',
description: 'Spark UI',
time: '10m ago',
icon: '👤',
color: '#FFB800',
},
{
name: 'New message',
description: 'Spark UI',
time: '5m ago',
icon: '💬',
color: '#FF3D71',
},
{
name: 'New event',
description: 'Spark UI',
time: '2m ago',
icon: '🗞️',
color: '#1E86FF',
},
]
notifications = Array.from({ length: 30 }, () => notifications).flat()
</script>
<template>
<AnimatedList>
<template #default>
<Notification
v-for="(item, index) in notifications" :key="index" :name="item.name" :description="item.description"
:icon="item.icon" :color="item.color" :time="item.time"
/>
</template>
</AnimatedList>
</template>
<script setup lang='ts'>
import Meteors from './Meteors.vue'
</script>
<template>
<div
class="relative flex h-[450px] w-[300px] md:w-[500px] flex-col items-center justify-center overflow-hidden rounded-lg"
border
>
<div class="absolute top-10 inset-x-0">
<Meteors :number="30" />
</div>
<span
class="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent"
>
Meteors
</span>
</div>
</template>
<script setup lang='ts'>
import { Icon } from '@iconify/vue'
import { cn } from '@/libs/utils'
import AnimatedGradientText from './animatedGradientText.vue'
</script>
<template>
<AnimatedGradientText>
🎉
<hr class="mx-2 h-4 w-[1px] shrink-0 bg-gray-300">
<span
:class="cn(
`inline animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
)"
>
Introducing Spark UI
</span>
<Icon
icon="ic:sharp-keyboard-arrow-right"
class="ml-1 size-3 transition-transform w-4 h-4 text-black dark:text-white duration-300 ease-in-out group-hover:translate-x-0.5"
/>
</AnimatedGradientText>
</template>
<style>
.animate-gradient {
background-size: var(--bg-size);
animation: gradientAnimation 8s ease infinite;
}
@keyframes gradientAnimation {
0% {
background-position: var(--bg-size) 0;
}
50% {
background-position: 0 0;
}
100% {
background-position: var(--bg-size) 0;
}
}
</style>
Spark UI
Magic UI
Spark UI
Magic UI
Spark UI
Magic UI
Spark UI
Magic UI
<script setup lang='ts'>
import SkewedInfiniteScroll from './SkewedInfiniteScroll.vue'
const items = [
{ id: '1', text: 'Spark UI' },
{ id: '2', text: 'Magic UI' },
{ id: '3', text: 'Spark UI' },
{ id: '4', text: 'Magic UI' },
{ id: '5', text: 'Spark UI' },
{ id: '6', text: 'Magic UI' },
{
id: '7',
text: 'Spark UI',
},
{
id: '8',
text: 'Magic UI',
},
]
</script>
<template>
<SkewedInfiniteScroll :items="items" />
</template>
✨ Introducing Spark UI
<script setup lang='ts'>
import { Icon } from '@iconify/vue'
import { cn } from '@/libs/utils'
import AnimatedShinyText from './AnimatedShinyText.vue'
</script>
<template>
<div class="grid place-items-center min-h-screen w-full">
<div class="z-10 flex min-h-[16rem] items-center justify-center">
<div
:class="cn(
'group rounded-full border border-black/5 bg-neutral-100 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800')"
>
<AnimatedShinyText class="inline-flex items-center justify-center px-4 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400">
<span>✨ Introducing Spark UI</span>
<Icon icon="ic:sharp-keyboard-arrow-right" class="ml-1 text-neutral-400 w-5 h-5 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
</AnimatedShinyText>
</div>
</div>
</div>
</template>
<script setup lang='ts'>
import RetroGrid from './retroGrid.vue'
</script>
<template>
<div
class="relative flex h-[400px] w-[200px] lg:w-[600px] flex-col items-center justify-center overflow-hidden rounded-lg border bg-background"
>
<span
class="pointer-events-none z-10 whitespace-pre-wrap bg-gradient-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-center text-7xl font-bold leading-none tracking-tighter text-transparent"
>
Retro Grid
</span>
<RetroGrid />
</div>
</template>
<script setup lang='ts'>
import BlurFade from './BlurFade.vue'
</script>
<template>
<div class="flex flex-col space-y-2">
<BlurFade in-view :delay="250">
<span class="text-[45px] font-bold tracking-tighter dark:text-white leading-1">
Hello World 👋
</span>
</BlurFade>
<BlurFade in-view :delay="350 * 2">
<span class="font-[500] text-[20px] dark:text-white tracking-tighter">
Nice to meet you ✨
</span>
</BlurFade>
</div>
</template>
<script setup lang='ts'>
import BlurIn from './BlurIn.vue'
</script>
<template>
<BlurIn word="Spark UI ✨" class="font-bold text-black dark:text-white" />
</template>
<script setup lang='ts'>
import Globe from './Globe.vue'
</script>
<template>
<div>
<div
class="relative flex h-[400px] w-[500px] max-w-[32rem] items-center justify-center overflow-hidden rounded-lg border px-40 pb-40 pt-8 md:pb-48"
>
<span
class="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10"
>
Globe
</span>
<Globe />
<div
class="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]"
/>
</div>
</div>
</template>