Gravity Stars

An interactive particle field that simulates gravitational pull or repulsion based on mouse proximity. Built with high-performance Canvas rendering.

Installation

npx raya-ui@latest add gravity-stars

File Structure

your-project

components

gravity-stars

GravityStars.vue

API Reference

Props

starsCount

number

75

The density of the star field. Higher values increase CPU usage.

mouseInfluence

number

100

The radius (in pixels) around the cursor where physics forces are applied.

gravityStrength

number

50

The intensity of the gravitational force.

mouseGravity

enum

"attract"

Determines physics behavior. attract pulls stars in; repel pushes them away.

Gravity

Move your mouse to interact

Settings

Interaction Mode

Star Density100

Influence Radius200px

Gravity Strength50

source-code.vue

<script setup lang="ts">
import { GravityStars } from '@/components/ui/gravity-stars'
</script>

<template>
  <div class="relative w-full h-[500px] overflow-hidden bg-background">
    <GravityStars
    :stars-count="100"
    :mouse-influence="200"
      class="text-foreground"
    />

    <div class="relative z-10 flex items-center justify-center h-full pointer-events-none">
      <h1 class="text-5xl font-bold tracking-tighter">Gravity Field</h1>
    </div>
  </div>
</template>