Background Beams Section

Create a dark section with animated diagonal light beams crossing behind centered content. Use several thin, slightly blurred lines at varying angles and opacities, animating them to slowly drift or pulse. The beams should be subtle—white/blue at low opacity so they add depth without distracting. Center a bold headline and short paragraph over the beams. Use Tailwind CSS and CSS keyframes. No images.

创建一个深色区域，中央内容后方有对角动画光束交叉穿过。使用多条不同角度和透明度的细线，略带模糊，缓慢漂移或脉冲动画。光束应微妙——低透明度的白/蓝色，增加深度而不分散注意力。在光束上方居中放置粗体标题和短段落。使用 Tailwind CSS 和 CSS keyframes。无图片。

Overview

A section background that adds motion and depth through soft crossing light beams. Inspired by premium developer-tool landing pages.

Features

• Diagonal animated light beams
• Multiple angles and opacities
• Slow drift/pulse animation
• Subtle white/blue tones
• Centered headline + paragraph
• Pure CSS, no images

Usage

Use as a feature section, CTA section, or footer background for dark product pages.

Customization

Modify the prompt to:

• Change beam color to brand accent
• Add a gradient fade at top and bottom edges
• Make beams react to scroll position
• Add a subtle noise texture overlay