Components
Move your mouse to see the parallax effect
Three layers of stars moving at different speeds
Loading preview...
import { StarsBackground } from '../components/ui/parallax-star';
export const ParallaxStarDemo = () => {
return (
<div className="w-full h-screen">
<StarsBackground
className="absolute inset-0 flex items-center justify-center"
speed={30}
starColor="#ffffff"
factor={0.1}
>
<div className="z-10 text-white text-center px-4">
<h1 className="text-5xl font-bold mb-6">Parallax Stars</h1>
<p className="text-xl opacity-90 mb-4">Interactive star field with mouse parallax</p>
<div className="text-sm opacity-70">
<p>• 1600+ animated stars across 3 layers</p>
<p>• Smooth spring-based mouse tracking</p>
<p>• Customizable speed, colors, and density</p>
</div>
</div>
</StarsBackground>
</div>
);
};
export default ParallaxStarDemo;Loading preview...