Planet Rising
Three.js dotted sphere animation with rotation, breathing dots, and mouse parallax.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
bgColor | string | #1e40af | Background color (hex) |
dotColor | string | #ffffff | Dot/particle color (hex) |
height | string | 100vh | Container height (CSS value) |
parallax | boolean | true | Enable mouse parallax effect |
lightDirection | string | top | Light source direction: top, top-left, top-right, left, right, bottom-left, bottom-right |
density | number | 1 | Dot density multiplier (1.5 = 50% more dots) |
Usage
---
import PlanetRising from '@components/flare/PlanetRising.astro';
---
<PlanetRising
bgColor="#1e40af"
dotColor="#ffffff"
height="100vh"
parallax=true
lightDirection="top-left"
density=6
/>Animations
- Rotation — Slow continuous Y-axis rotation
- Tilt — Subtle oscillating X-axis tilt
- Breathing — Dot sizes pulse gently over time
- Floating — Subtle vertical bobbing motion
- Parallax — Sphere tilts towards mouse position
- Grain — Animated film grain overlay
Light Direction
Control where the "sun" illuminates the sphere:
Top-Left Light (Sunrise Effect) — 6x Density
Top-Right Light
Color Variations
Different color schemes for various contexts: