بوم شیدر

نصب

1. با CLI

   اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.

   $ npx vibefarsi add shader

2. نصب دستی

   محتوای تب «کد» را در components/backgrounds/shader.tsx بگذارید.

   $ npm i lucide-react
   کپی کل فایلregistry json

استفاده

1import { ShaderCanvas, GLSL_NOISE } from "@/components/backgrounds/shader"23const frag = /* glsl */ `4void main() {5  vec2 uv = gl_FragCoord.xy / u_resolution;6  float glow = smoothstep(0.7, 0.0, distance(uv, u_pointer));7  vec3 color = mix(u_color0, u_color1, uv.y);8  gl_FragColor = vec4(color, glow * 0.35);9}`1011<section className="relative overflow-hidden">12  <ShaderCanvas fragment={frag} colors={["--brand", "--foreground"]} pointer />13  <div className="relative">…</div>14</section>

پراپ‌ها

نکته‌ها

• یونیفرم‌های آماده این‌ها هستن: u_resolution، u_time، u_dpr، u_pointer، u_trail[8] و u_color0 تا u_color3. برای نویز و fbm، رشته‌ی GLSL_NOISE را به ابتدای شیدر اضافه کنید.
• بوم شفافه، پس آلفای خروجی را کم نگه دارید. بیرون از دید، حلقه‌ی رندر می‌ایسته و کانتکست آزاد میشه و با prefers-reduced-motion فقط یک فریم کشیده میشه.
• Chrome بیش از ۱۶ کانتکست WebGL فعال را نگه نمی‌داره، برای همین این کامپوننت با IntersectionObserver فقط برای بوم‌های در دید کانتکست می‌سازه.