Transform your Hero Section into a mesmerizing cosmic experience with this Interactive Star component. Unlike static videos, this is a React Code Component that tracks your visitor's mouse movement, creating a unique black hole gravity effect in real-time.
✨ Key Features:
Mouse Physics: Particles are magnetically pulled towards the cursor, creating a satisfying 'suction' animation.
Dynamic Speed: Stars accelerate as they get closer to the center (your mouse), simulating real gravity.
Lightweight: Built with code, not heavy video files, ensuring your site loads fast.
Seamless Loop: When the mouse stops, the particles continue to flow naturally.
Perfect for creative portfolios, space-themed projects, or high-tech landing pages that want to leave a lasting impression.
Setup is easy, but follows specific layout rules to work as a background:
Drag & Drop: Place the component into your Desktop/Hero frame.
Positioning: Set Position to 'Absolute' in the right sidebar.
Full Screen: Set all Pins (Left, Right, Top, Bottom) to 0 to ensure it fills the screen.
Layering: Set Z-Index to 0 (or send to back) so your text and buttons appear on top of the stars.
Customization: Use the property controls to adjust particle count or speed if available.
Transform your Hero Section into a mesmerizing cosmic experience with this Interactive Star component. Unlike static videos, this is a React Code Component that tracks your visitor's mouse movement, creating a unique black hole gravity effect in real-time.
✨ Key Features:
Mouse Physics: Particles are magnetically pulled towards the cursor, creating a satisfying 'suction' animation.
Dynamic Speed: Stars accelerate as they get closer to the center (your mouse), simulating real gravity.
Lightweight: Built with code, not heavy video files, ensuring your site loads fast.
Seamless Loop: When the mouse stops, the particles continue to flow naturally.
Perfect for creative portfolios, space-themed projects, or high-tech landing pages that want to leave a lasting impression.
Setup is easy, but follows specific layout rules to work as a background:
Drag & Drop: Place the component into your Desktop/Hero frame.
Positioning: Set Position to 'Absolute' in the right sidebar.
Full Screen: Set all Pins (Left, Right, Top, Bottom) to 0 to ensure it fills the screen.
Layering: Set Z-Index to 0 (or send to back) so your text and buttons appear on top of the stars.
Customization: Use the property controls to adjust particle count or speed if available.
