Uilora Parchment
A tactile paper synthesis system that recreates organic fibers, pulp clumps, and 3D shadow depth for an authentic physical feel.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| paperColor | string | #f4f4f2 | The base pulp tint |
| fiberColor | string | #000000 | Tint of the microscopic fibers |
| pulpIntensity | number | 0.5 | Clumpiness of the paper |
| shadowDepth | number | 0.02 | Tactile relief strength |
When to Use
Ideal for blogging platforms, history-themed sites, and 'Analog' portfolios that want a physically grounding background.
Best Practices
Use `#f4f4f2` for vintage ivory or `#0a0a0a` for a premium 'Charcoal Paper' look. Pair with serif typography.
Why This Component Matters
Most paper backgrounds are just grainy images. Uilora Parchment calculates 'Normal Shadows' based on a virtual mouse light, making the paper feel real to the touch.
FAQ
QIs the paper static?
The fibers are static to feel like real paper, but the shadows subtly move with your mouse, creating a 3D tactile sense.
QCan I make it look like cardboard?
Yes, increase the `pulpIntensity` and use a tan `paperColor` like `#d2b48c`.
Related Components
Interstellar Fluid Hero
Interactive fluid simulation creating cosmic nebula effects with mouse interaction. Deep space aesthetic with animated gas clouds and star trails.
Interstellar Background Hero
Warp tunnel effect simulating high-velocity travel through nebular clusters. Procedural WebGL engine with mouse-responsive space distortion.
Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.