جرادينت ثلاثي الأبعاد متحرك بـ WebGL — أجمل خلفيات Hero تقدر تعملها في React بسطرين.
صفحات هبوط بخلفية حيّة تشد العين من أول ثانية.
Login / Auth بخلفية متحركة هادئة بدل اللون الجامد.
خلفيات لبوسترات وموشن للحفلات والمؤتمرات.
Section dividers متحركة تكسر رتابة الصفحة.
توليد تدرّجات لونية للبراند بسرعة.
Loading screens أنيقة بدل الـ spinner المملّ.
import { ShaderGradientCanvas, ShaderGradient } from '@shadergradient/react'
export default function Hero() {
return (
<ShaderGradientCanvas style={{ position: 'absolute', inset: 0 }} fov={40}>
<ShaderGradient
type='waterPlane'
color1='#ff8a4c' color2='#6a2a7a' color3='#8ab4ff'
uSpeed={0.3} uStrength={1.6} grain='on'
/>
</ShaderGradientCanvas>
)
}
💡 أسرع طريقة: افتح shadergradient.co/customize، ظبّط التدرّج بصرياً، وانسخ الإعدادات كـ urlString.