Obsidian & Nebulas
Dark cosmic portfolio with obsidian textures and nebula effects.
Main Features of Obsidian & Nebulas
How to Use Obsidian & Nebulas in Next.js
Installation Guide for Obsidian & Nebulas
Props
Customize the component with these 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. |
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.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
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.