Glass Prism
Blurry glass cards with smooth accordion animations.
Main Features of Glass Prism
How to Use Glass Prism in Next.js
Installation Guide for Glass Prism
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
faqs | Array<{q: string, a: string}> | [] | Array of FAQ items with question (q) and answer (a). |
backgroundColor | string | #0f172a | Background color (hex, rgb, or hsl). |
blob1Color | string | #9333ea | First blob color for background effect. |
blob2Color | string | #06b6d4 | Second blob color for background effect. |
title | string | Transparency | Section title text. |
titleColor | string | #ffffff | Title text color (hex, rgb, or hsl). |
cardBgColor | string | rgba(255,255,255,0.05) | Card background color. |
activeCardBgColor | string | rgba(255,255,255,0.1) | Active card background color. |
cardBorderColor | string | rgba(255,255,255,0.1) | Card border color. |
cardTextColor | string | rgba(255,255,255,0.9) | Card text color. |
activeCardShadowColor | string | rgba(31,38,135,0.37) | Active card shadow color. |
iconBgColor | string | rgba(255,255,255,0.1) | Icon background color. |
iconColor | string | #ffffff | Icon color (hex, rgb, or hsl). |
Related Components
When to Use
Ideal for modern, creative landing pages and SaaS platforms that want a sophisticated, translucent look. Use this React component for an elegant FAQ section with glassmorphism effects and smooth accordion animations.
Best Practices
Maintain consistent spacing within your design system by pairing this with vibrant background colors or gradients. Follow React best practices by keeping the answer content concise for better readability. Optimize for performance by using efficient backdrop-filter values.
Why This Component Matters in Modern UI Development
Glassmorphism adds a layer of depth and modern polish that static layouts lack. This production-ready component helpsคุณ build an interface that feels premium and deeply layered, improving user focus through elegant visual grouping.
Frequently Asked Questions
QIs the glass effect customizable?
Yes, you can control the card background opacity, blur amount, and active states via the provided props.
QDo the background blobs move?
The background blobs are designed to be static but can be easily animated using Framer Motion for a more dynamic feel.
QDoes it support nested accordions?
This version is optimized for single-level questions to ensure the cleanest possible UX and accessibility.