Paper Glass
Hybrid dashboard combining paper textures with glassmorphism effects.
Main Features of Paper Glass
How to Use Paper Glass in Next.js
Installation Guide for Paper Glass
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
paperColor | string | #fefefe | Paper background color. |
glassBlur | string | 20px | Blur for glassmorphism effect. |
glassOpacity | number | 0.3 | Opacity of glass elements (0-1). |
textureIntensity | number | 1 | Intensity of paper texture (0-2). |
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 does the hybrid work?
The template layers `glassBlur` containers over a textured `paperColor` background, creating a deep spatial sense of semi-transparent layers on top of physical stock.
QCan I adjust the blur?
Yes, the `glassBlur` prop allows you to control the depth of the transparency effect for the foreground UI modules.
QIs it mobile responsive?
The hybrid modules are optimized for mobile, ensuring that the complex blur and texture layers maintain performance on touch devices.