The Monolith
Architectural 3D reveal testimonial that cracks open to show content.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| video | string | https://assets.mixkit.co/videos/mixkit-ink-swirling-in-water-2056-large.mp4 | Background video source URL. |
| backgroundColor | string | #0a0a0a | Background color (hex, rgb, or hsl). |
When to Use
Built for enterprise SaaS, technical agencies, and high-stakes product launches. The cracking reveal mechanic communicates structural confidence — this is what a product looks like when it has nothing to hide.
Best Practices
Use dark, abstract video content (smoke, ink, particles) for the background to maximize the monolithic feel. The baked Uilora stats and quote are production-ready — swap out the video URL for your own brand asset.
Why This Component Matters
Architectural reveal animations communicate authority and permanence. When a testimonial feels like it's been carved from stone, the endorsement carries more weight than a standard quote card.
FAQ
QHow does the crack animation work?
Two halves of the monolith are positioned with perspective transforms. On hover/interaction, they rotate apart on the Y axis, revealing the testimonial content behind them.
QCan I change the stats?
The stats (efficiency, deploy time) are baked as module-level constants inside the component. Fork the file and update the STATS array to reflect your product metrics.
QIs it mobile responsive?
The perspective depth scales down gracefully on mobile. The crack animation still fires on tap, maintaining the reveal mechanic on touch devices.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.