Prism Card
Premium holographic foil card testimonial with color-shifting effects.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| backgroundColor | string | #f5f5f4 | Background color (hex, rgb, or hsl). |
| accentColor | string | #7c3aed | Accent color for avatar, stars, and button (hex, rgb, or hsl). |
When to Use
Excellent for SaaS product pages, Uilora premium showcases, and any context where a single standout testimonial needs to feel like a collectible artifact — not just a quote block.
Best Practices
Use on a neutral or light background so the holographic foil effect has maximum contrast. The default Uilora purple accent pairs well with both light and dark page backgrounds.
Why This Component Matters
A holographic card communicates rarity and exclusivity. When a testimonial looks like a trading card, readers instinctively treat the endorsement as more valuable — it's a collector's item, not generic social proof.
FAQ
QHow does the foil effect work?
A conic-gradient overlay shifts position based on mouse movement using Framer Motion's useMotionValue and useTransform hooks, simulating light hitting a reflective surface.
QCan I change the testimonial content?
The quote, author, and role are baked as Uilora-branded constants inside the component. Fork the file and update the QUOTE, AUTHOR, and ROLE constants.
QIs it mobile responsive?
The card scales to fit mobile screens. The foil effect switches to a static tilt animation on touch devices since mousemove is not available.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.