Display
胶片颗粒纹理叠加层
可复用的深色区域包装器,带有动画胶片颗粒和微妙暗角,营造电影质感。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度intermediate
英文提示词
Create a dark section wrapper with an animated film-grain texture overlay and vignette. The base background should be near-black. Overlay a semi-transparent noise texture using an SVG filter or CSS noise background that animates subtly (e.g., changing opacity or background-position) to feel like film grain. Add a radial vignette that darkens the edges. Center a short headline and paragraph inside. Typography should be a clean sans-serif in off-white with low opacity for body text. Use Tailwind CSS. The grain should be subtle—about 4-6% opacity—so it adds texture without reducing readability.
中文提示词
创建一个带有动画胶片颗粒纹理叠加和暗角的深色区域包装器。基础背景应为近黑色。使用 SVG 滤镜或 CSS 噪点背景叠加半透明噪点纹理,并添加微妙动画(如改变透明度或背景位置)以产生胶片颗粒感。添加径向暗角使边缘变暗。在中心放置短标题和段落。排版使用干净的米白色无衬线字体,正文透明度较低。使用 Tailwind CSS。颗粒感应微妙——约 4-6% 透明度——以增加纹理感而不降低可读性。

Overview
为原本平坦的深色区域增添模拟温暖和电影深度的纹理层。
Features
- 近黑色基础背景
- 动画胶片颗粒噪点叠加
- 径向边缘暗角
- 居中标题和段落
- 微妙的 4-6% 颗粒透明度
- 干净米白色字体
Usage
包裹 hero 区域、视频背景或深色功能区,增加触感与高端质感。
Customization
修改 prompt 以:
- 为颗粒添加色调( sepia、蓝色、绿色)
- 与极光渐变背景结合
- 增强暗角以聚焦聚光灯效果
- 添加扫描线营造复古未来感