№ 01 · React · WebGL

ShaderGradient

جرادينت ثلاثي الأبعاد متحرك بـ WebGL — أجمل خلفيات Hero تقدر تعملها في React بسطرين.

Package
@shadergradient/react
Built on
React Three Fiber
License
MIT
A / ديمو حيّ

جرّبه — ده شغّال فعلاً

…loading WebGL gradient
ShaderGradient · type: waterPlane · live
B / إيه اللي أقدر أعمله بيها

استخدامات Mahmoud Ghazal

01

خلفيات Hero لللاندنج

صفحات هبوط بخلفية حيّة تشد العين من أول ثانية.

02

شاشات تسجيل دخول

Login / Auth بخلفية متحركة هادئة بدل اللون الجامد.

03

فيديوهات وفعاليات

خلفيات لبوسترات وموشن للحفلات والمؤتمرات.

04

فواصل أقسام

Section dividers متحركة تكسر رتابة الصفحة.

05

هوية بصرية / Moodboard

توليد تدرّجات لونية للبراند بسرعة.

06

شاشات تحميل

Loading screens أنيقة بدل الـ spinner المملّ.

C / التنصيب والكود

ابدأ في دقيقة

npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
App.tsx
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.