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