Stars Background

<script setup lang="ts">
import StarsBackground from '@/components/animate-ui/backgrounds/stars/StarsBackground.vue'
import { useDark } from '@/lib/use-dark'

const dark = useDark()
</script>

<template>
  <StarsBackground
    :star-color="dark ? '#fff' : '#000'"
    class="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,#f5f5f5_0%,#fff_100%)] dark:bg-[radial-gradient(ellipse_at_bottom,#262626_0%,#000_100%)]"
  />
</template>

InstallationCopy Anchor Link

npx shadcn-vue@latest add https://animate-ui.com/r/vue/backgrounds-stars.json

pnpm dlx shadcn-vue@latest add https://animate-ui.com/r/vue/backgrounds-stars.json

yarn dlx shadcn-vue@latest add https://animate-ui.com/r/vue/backgrounds-stars.json

bun x shadcn-vue@latest add https://animate-ui.com/r/vue/backgrounds-stars.json

UsageCopy Anchor Link

<script setup lang="ts">
import StarsBackground from '@/components/animate-ui/backgrounds/stars/StarsBackground.vue';
</script>

<template>
  <section class="relative h-[480px] overflow-hidden">
    <StarsBackground class="absolute inset-0" />
  </section>
</template>

AnimationCopy Anchor Link

• Three layers of stars (1, 2 and 3px) scroll upwards in a loop at different speeds, for depth: the smallest crosses 2000px in speed seconds, the others take two and three times longer. They move with hardware-accelerated transforms.
• The sky shifts away from the mouse on a spring (factor, transition), relative to the center of the container, for parallax. On touch screens, a tap shifts it too.
• The loops pause off screen and while the tab is hidden.
• Under reduced motion, the stars hold still and there is no parallax.

API ReferenceCopy Anchor Link

StarsBackgroundCopy Anchor Link

CreditsCopy Anchor Link

• Credits to umangladani for the inspiration