Hologram
React Three Fiber wireframe icosahedron with nested geometry, equatorial rings, a glowing core, and heavy bloom — the signature sci-fi hologram.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| color | string | #00e5ff | Wireframe and ring color — drives the bloom glow hue |
| bloomIntensity | number | 2 | Bloom glow intensity — higher values bleed more light into the scene |
| rotationSpeed | number | 0.5 | Multiplier for all rotation speeds — higher = faster spin |
When to Use
The go-to hero for AI products, blockchain projects, and any tech brand that wants to communicate cutting-edge capability. The hologram immediately signals 'advanced technology'.
Best Practices
Use on near-black backgrounds (#010306 or darker). The scanline overlay is subtle — increase its opacity for a more retro CRT look. Keep bloomIntensity between 1.5–3 for maximum impact without washing out the scene.
Why This Component Matters
The wireframe hologram is one of the most potent visual metaphors in technology — instantly communicating that something complex and powerful is at work.
FAQ
QWhy are there two icosahedrons?
The outer (detail=1) has subdivided triangles for a complex wireframe. The inner (detail=0) rotates in the opposite direction, creating a dynamic nested effect.
QCan I change the geometry?
Yes — replace icosahedronGeometry with dodecahedronGeometry, torusKnotGeometry, or any Three.js geometry for a different silhouette.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.