Prism OS
Prismatic portfolio with light refraction effects and colorful design.
Main Features of Prism OS
How to Use Prism OS in Next.js
Installation Guide for Prism OS
Props
Customize the component with these 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. |
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.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
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.