Prism Grid
Prismatic masonry grid with light refraction and glass effects.
Main Features of Prism Grid
How to Use Prism Grid in Next.js
Installation Guide for Prism Grid
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
shards | Array<{clip: string, img: string, title?: string}> | [{clip: 'polygon(0 0, 100% 0, 100% 85%, 0 100%)', img: '...'}, ...] | Array of shard objects with CSS clip-path, image URL, and optional title. |
backgroundColor | string | #0f172a | Background color (hex, rgb, or hsl). |
titlePrefix | string | Prism | Prefix text for shard titles. |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
View Component
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
View Component
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
View Component
When to Use
Excellent for high-end digital agencies, award-winning portfolios, and Next.js platforms that want a premium 'Prism Grid' aesthetic. Use this masonry grid for an immersive experience with glassmorphism, blur effects, and light refraction cues.
Best Practices
Follow React best practices by pairing this with high-contrast, bold imagery. Maintain consistent spacing within your design system by keeping the grid gaps uniform. Optimize for performance by managed the amount of blur renders.
Why This Component Matters in Modern UI Development
Prismatic aesthetics communicate digital excellence, sophistication, and high-end craft. This production-ready UI template helpsคุณ build an interface that feels curated and premium, leaving a lasting visual impression on high-value clients.
Frequently Asked Questions
QWhat are 'Shards'?
The component uses localized CSS `clip-path` polygons to create non-uniform 'glass' shapes into which your content is projected, simulating light refraction.
QCan I adjust the glow?
Yes, both the shard clipping and the primary background colors can be adjusted to create 'Emerald', 'Amber', or 'Cyber' prism effects.
QDoes it work on phone?
The prism shards adapt their spans for mobile, ensuring the refractive narrative remains impactful and legible on small screens.