Display
Film Grain Texture Overlay
A reusable dark section wrapper with animated film grain and subtle vignette for cinematic texture.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyintermediate
English Prompt
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.
Chinese Prompt
创建一个带有动画胶片颗粒纹理叠加和暗角的深色区域包装器。基础背景应为近黑色。使用 SVG 滤镜或 CSS 噪点背景叠加半透明噪点纹理,并添加微妙动画(如改变透明度或背景位置)以产生胶片颗粒感。添加径向暗角使边缘变暗。在中心放置短标题和段落。排版使用干净的米白色无衬线字体,正文透明度较低。使用 Tailwind CSS。颗粒感应微妙——约 4-6% 透明度——以增加纹理感而不降低可读性。

Overview
A texture layer that adds analog warmth and cinematic depth to otherwise flat dark sections.
Features
- Near-black base background
- Animated film-grain noise overlay
- Radial edge vignette
- Centered headline and paragraph
- Subtle 4-6% grain opacity
- Clean off-white typography
Usage
Wrap hero sections, video backgrounds, or dark feature areas to add tactile, premium texture.
Customization
Modify the prompt to:
- Add a colored tint to the grain (sepia, blue, green)
- Combine with an aurora gradient background
- Make the vignette stronger for spotlight focus
- Add scanlines for a retro-futuristic feel