Prism OS
Prismatic portfolio with light refraction effects and colorful design.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| prismColor1 | string | #ff0080 | First prism color (magenta). |
| prismColor2 | string | #00ff80 | Second prism color (green). |
| prismColor3 | string | #0080ff | Third prism color (blue). |
| refractionIntensity | number | 1 | Intensity of light refraction effects (0-2). |
| animationSpeed | number | 1 | Speed of prism animations. |
When to Use
Ideal for creative studios, vibrant startups, and Next.js platforms that want a sophisticated 'Glass Refraction' aesthetic. Use this template for a high-fidelity experience with prismatic light effects and colorful, crystal-like UI modules.
Best Practices
Maintain consistent spacing within your design system by using it on dark or textured backgrounds. Follow React best practices by pairing it with airy, light-weight typography. Optimize for performance by managed the `backdrop-filter` impact.
Why This Component Matters
Prismatic design communicates structural complexity and vibrant energy. This production-ready UI template helpsคุณ build an interface that feels lightweight and premium, reflecting a brand identity rooted in innovation and light.
FAQ
QHow were the rainbows made?
The component features localized refraction points (`prismColor1`, etc.) that simulate the look of white light splitting through a physical glass prism.
QIs the refraction interactive?
Yes, the light patterns shift as the user scrolls or moves their cursor, creating a deep sense of environmental light and depth.
QAre the 'Glass' modules real?
They use semi-transparent backgrounds and `backdrop-blur` filters to simulate physical frosted glass panes with prismatic edges.
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.