Obsidian & Nebulas
Dark cosmic portfolio with obsidian textures and nebula effects.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| nebulaColor1 | string | #8b5cf6 | First nebula color (purple). |
| nebulaColor2 | string | #ec4899 | Second nebula color (pink). |
| nebulaColor3 | string | #06b6d4 | Third nebula color (cyan). |
| particleDensity | number | 1 | Density of cosmic particles (0.5-2). |
| animationSpeed | number | 1 | Speed of nebula animations. |
When to Use
Perfect for science apps, space startups, and Next.js portfolios that want an atmospheric 'Cosmic' aesthetic. Use this template for an immersive experience with deep obsidian textures, colorful nebula gasses, and moving star particles.
Best Practices
Maintain consistent spacing within your design system by keeping content inside the clear-window obsidian cards. Follow React best practices by using high-contrast text over dark backgrounds. Optimize for performance by managed the particle count.
Why This Component Matters
Cosmic aesthetics create a sense of scale and infinite depth. This production-ready UI template helpsคุณ build an interface that feels advanced and atmospheric, adding semantic authority to your scientific or technical data.
FAQ
QHow are the nebulae made?
The background uses layered, animated CSS radial gradients (`nebulaColor1`, etc.) with heavy blur to simulate the look of shifting cosmic gas clouds.
QCan I adjust particle count?
Yes, the `particleDensity` prop allows you to control the 'star field' intensity, from sparse/minimal to a dense, sparkling galaxy.
QIs it good for mobile?
The particles and colored nebulae remain energetic on mobile while the obsidian navigation cards stack vertically for touch accessibility.
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.