Gravity Stars Background

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

<template>
  <GravityStarsBackground class="absolute inset-0" />
</template>

InstallationCopy Anchor Link

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

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

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

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

UsageCopy Anchor Link

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

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

AnimationCopy Anchor Link

• Stars drift across a canvas at movement-speed, slow down little by little, wrap around its edges and glow.
• Near the pointer (mouse-influence), they are pulled in or pushed away (mouse-gravity) and glow brighter. The pointer's last position keeps acting after it leaves (before the first move, it is the top-left corner).
• The stars take the text color (currentColor), so they follow light and dark mode.
• The canvas is sized to its container at the device pixel ratio. A resize scatters the stars again.
• The simulation advances one step per displayed frame, so it runs faster on 120Hz screens.
• It pauses off screen and while the tab is hidden.
• Under reduced motion, the stars hold still.

API ReferenceCopy Anchor Link

GravityStarsBackgroundCopy Anchor Link

CreditsCopy Anchor Link

• Credits to Brett Jackson for the initial Framer component.