godlights 0.1.0

package/README.md

@@ -0,0 +1,198 @@
+# godlights
+
+Animated god-ray / light-beam effects for React. Render stunning volumetric light scenes on a `<canvas>`, fully configurable and animatable.
+
+## Installation
+
+```bash
+npm install godlights
+```
+
+## Quick start
+
+```tsx
+import { GodLights } from "godlights";
+import type { SceneConfig } from "godlights";
+
+const scene: SceneConfig = {
+  width: 1920,
+  height: 1080,
+  noise: 8,
+  grainSize: 1,
+  layers: [
+    {
+      id: "bg",
+      type: "background",
+      bgType: "solid",
+      bgColor: "#000000",
+      bgColor2: "#000000",
+      bgGradientAngle: 180,
+    },
+    {
+      id: "rays-1",
+      name: "Rays 1",
+      type: "rays",
+      direction: 180,
+      spread: 120,
+      originX: 50,
+      originY: -20,
+      rayCount: 40,
+      rayWidth: 87,
+      divergence: 0.4,
+      rayLength: 0.55,
+      colorStart: "#ffffff",
+      colorEnd: "#ffffff",
+      opacity: 0.42,
+      blendMode: "screen",
+      fadeToTransparent: true,
+      blur: 17.5,
+      randomnessWidth: 100,
+      randomnessLength: 24,
+      randomnessAngle: 0,
+      seed: 1337,
+    },
+    {
+      id: "halo-1",
+      name: "Halo 1",
+      type: "halo",
+      originX: 50,
+      originY: 0,
+      color: "#ffffff",
+      intensity: 0.25,
+      size: 0.5,
+      blendMode: "lighter",
+    },
+  ],
+};
+
+export default function App() {
+  return (
+    <GodLights
+      scene={scene}
+      animate
+      className="absolute inset-0 w-full h-full"
+    />
+  );
+}
+```
+
+## `<GodLights>` props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `scene` | `SceneConfig` | required | Full scene configuration |
+| `animate` | `boolean` | `false` | Enable animation loop |
+| `animParams` | `AnimParams` | `DEFAULT_ANIM_PARAMS` | Animation parameters (speed, amplitudes) |
+| `showFps` | `boolean` | `false` | Show FPS counter overlay |
+| `className` | `string` | — | CSS class for the wrapper `<div>` |
+| `style` | `CSSProperties` | — | Inline style for the wrapper `<div>` |
+
+## `SceneConfig`
+
+```ts
+interface SceneConfig {
+  width: number;          // Canvas width in px (used for aspect ratio)
+  height: number;         // Canvas height in px
+  noise: number;          // Film grain intensity (0–100)
+  grainSize: number;      // Film grain pixel size (1–4)
+  layers: Layer[];        // Ordered list of layers (bottom to top)
+}
+```
+
+## Layer types
+
+### `BackgroundLayer`
+
+```ts
+{
+  id: string;
+  type: "background";
+  bgType: "solid" | "linear" | "radial";
+  bgColor: string;           // Hex color (primary)
+  bgColor2: string;          // Hex color (secondary, for gradients)
+  bgGradientAngle: number;   // Gradient angle in degrees
+}
+```
+
+### `RayLayer`
+
+```ts
+{
+  id: string;
+  name: string;
+  type: "rays";
+  direction: number;          // Angle the rays point (degrees)
+  spread: number;             // Angular spread of ray fan (degrees)
+  originX: number;            // Origin X (% of canvas width, can be < 0 or > 100)
+  originY: number;            // Origin Y (% of canvas height, can be < 0 or > 100)
+  rayCount: number;           // Number of rays
+  rayWidth: number;           // Ray width (1–200)
+  divergence: number;         // How much rays splay out (0.1–5)
+  rayLength: number;          // Ray length as fraction of canvas diagonal (0.1–3)
+  colorStart: string;         // Hex color at origin
+  colorEnd: string;           // Hex color at tip
+  opacity: number;            // Overall opacity (0–1)
+  blendMode: BlendMode;       // CSS blend mode
+  fadeToTransparent: boolean; // Fade tips to transparent
+  blur: number;               // Gaussian blur in px (0–100)
+  randomnessWidth: number;    // Width randomness (0–100)
+  randomnessLength: number;   // Length randomness (0–100)
+  randomnessAngle: number;    // Angle randomness (0–100)
+  seed: number;               // RNG seed for reproducible randomness
+}
+```
+
+### `HaloLayer`
+
+```ts
+{
+  id: string;
+  name: string;
+  type: "halo";
+  originX: number;    // Center X (% of canvas width)
+  originY: number;    // Center Y (% of canvas height)
+  color: string;      // Hex color
+  intensity: number;  // Brightness (0–1)
+  size: number;       // Radius as fraction of canvas diagonal (0.01–2)
+  blendMode: BlendMode;
+}
+```
+
+## `AnimParams`
+
+```ts
+interface AnimParams {
+  speed: number;      // Animation speed (0–10)
+  angleAmp: number;   // Ray angle oscillation amplitude (0–100)
+  lengthAmp: number;  // Ray length oscillation amplitude (0–100)
+  widthAmp: number;   // Ray width oscillation amplitude (0–100)
+  haloAmp: number;    // Halo intensity oscillation amplitude (0–100)
+}
+```
+
+## Default values
+
+```ts
+import {
+  DEFAULT_SCENE,
+  DEFAULT_RAY_LAYER,
+  DEFAULT_HALO_LAYER,
+  DEFAULT_BACKGROUND_LAYER,
+  DEFAULT_ANIM_PARAMS,
+} from "godlights";
+```
+
+## Utility exports
+
+```ts
+import {
+  drawScene,      // (canvas, scene, t?) => void  — draw one frame
+  exportScene,    // (scene) => Promise<Blob>      — export PNG blob
+  exportDataURL,  // (scene) => Promise<string>    — export PNG data URL
+  BLEND_MODES,    // { value, label }[]             — available blend modes
+} from "godlights";
+```
+
+## License
+
+MIT

package/dist/godlights.js

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react/jsx-runtime"),E=require("react"),K=[{label:"Normal",value:"source-over"},{label:"Lighter (additive)",value:"lighter"},{label:"Screen",value:"screen"},{label:"Overlay",value:"overlay"},{label:"Soft light",value:"soft-light"},{label:"Hard light",value:"hard-light"}],J={speed:1,angleAmp:50,lengthAmp:50,widthAmp:50,haloAmp:50},j={type:"rays",direction:200,spread:60,originX:50,originY:0,rayCount:24,rayWidth:60,divergence:1.6,rayLength:1.4,opacity:.6,blendMode:"lighter",colorStart:"#ffffff",colorEnd:"#ffffff",fadeToTransparent:!0,blur:8,randomnessWidth:30,randomnessLength:18,randomnessAngle:30,seed:1337},x={type:"halo",originX:50,originY:0,intensity:.5,size:.25,color:"#ffffff",blendMode:"lighter"},H={id:"background",type:"background",bgType:"solid",bgColor:"#000000",bgColor2:"#000000",bgGradientAngle:180},Q={width:1920,height:1080,noise:8,grainSize:1,layers:[{...H},{id:"halo-1",name:"Halo",...x},{id:"rays-1",name:"Rays",...j}]},Z={width:1920,height:1080,rayCount:24,rayWidth:60,divergence:1.6,rayLength:1.4,opacity:.6,blendMode:"lighter",haloBlendMode:"lighter",direction:200,spread:60,originX:50,originY:0,haloOriginX:50,haloOriginY:0,colorStart:"#ffd28a",colorEnd:"#ffd28a",fadeToTransparent:!0,bgType:"gradient",bgColor:"#0b1024",bgColor2:"#1a1340",bgGradientAngle:180,halo:.5,haloSize:.25,haloColor:"#ffd28a",blur:8,noise:8,grainSize:1,randomness:30,randomnessWidth:30,randomnessLength:18,randomnessAngle:30,seed:1337};function $(e){let t=e>>>0;return function(){t=t+1831565813|0;let o=t;return o=Math.imul(o^o>>>15,o|1),o^=o+Math.imul(o^o>>>7,o|61),((o^o>>>14)>>>0)/4294967296}}function Y(e){const t=e.replace("#","").trim(),o=t.length===3?t.split("").map(i=>i+i).join(""):t.padEnd(6,"0"),n=parseInt(o.substring(0,6),16);return{r:n>>16&255,g:n>>8&255,b:n&255}}function k(e,t){return`rgba(${e.r},${e.g},${e.b},${t})`}function ee(e){return(e-90)*Math.PI/180}function te(e,t,o,n){if(e.save(),e.globalCompositeOperation="source-over",n.bgType==="solid")e.fillStyle=n.bgColor,e.fillRect(0,0,t,o);else if(n.bgType==="gradient"){const i=n.bgGradientAngle*Math.PI/180,a=t/2,s=o/2,r=Math.hypot(t,o)/2,l=Math.cos(i)*r,d=Math.sin(i)*r,c=e.createLinearGradient(a-l,s-d,a+l,s+d);c.addColorStop(0,n.bgColor),c.addColorStop(1,n.bgColor2),e.fillStyle=c,e.fillRect(0,0,t,o)}e.restore()}function ne(e,t,o,n,i=0,a){if(n.intensity<=0)return;e.save(),e.globalCompositeOperation=n.blendMode;const s=n.originX/100*t,r=n.originY/100*o,l=a?a.haloAmp/50:1,d=i!==0?1+Math.sin(i*.4)*.04*l:1,c=Math.hypot(t,o)*n.size*d,m=e.createRadialGradient(s,r,0,s,r,c),f=Y(n.color);m.addColorStop(0,k(f,n.intensity)),m.addColorStop(.5,k(f,n.intensity*.4)),m.addColorStop(1,k(f,0)),e.fillStyle=m,e.beginPath(),e.arc(s,r,c,0,Math.PI*2),e.fill(),e.restore()}function P(e,t,o,n,i=0,a){const s=n.originX/100*t,r=n.originY/100*o,l=ee(n.direction),d=n.spread*Math.PI/180,c=Y(n.colorStart),m=Y(n.colorEnd),y=Math.hypot(t,o)*n.rayLength,b=$(n.seed),R=n.randomnessWidth??n.randomness??0,T=n.randomnessLength??n.randomness??0,O=n.randomnessAngle??n.randomness??0;for(let h=0;h<n.rayCount;h++){const C=n.rayCount===1?.5:h/(n.rayCount-1),M=1-b()*(R/100),L=1-b()*(T/100)*.6,v=n.rayCount>1?d/(n.rayCount-1):d,u=(b()-.5)*(O/100)*v,p=h*2.399,g=a?a.angleAmp/50:1,A=a?a.lengthAmp/50:1,_=a?a.widthAmp/50:1,S=i!==0?Math.sin(i*.6+p)*(Math.max(O,12)/100)*v*.55*g:0,w=i!==0?1+Math.sin(i*.45+p+1.2)*(R/400)*_:1,D=i!==0?1+Math.sin(i*.35+p+2.5)*(T/400)*A:1,V=l-d/2+d*C+u+S,I=Math.max(1,n.rayWidth*M*w),N=Math.max(1,I*n.divergence),z=Math.max(50,y*L*D);e.save(),e.translate(s,r),e.rotate(V);const W=e.createLinearGradient(0,0,z,0);W.addColorStop(0,k(c,n.opacity)),W.addColorStop(1,k(m,n.fadeToTransparent?0:n.opacity)),e.fillStyle=W,e.beginPath(),e.moveTo(0,-I/2),e.lineTo(z,-N/2),e.lineTo(z,N/2),e.lineTo(0,I/2),e.closePath(),e.fill(),e.restore()}}function oe(e,t,o,n,i=0,a){if(n.blur>0){const s=new OffscreenCanvas(t,o),r=s.getContext("2d");if(!r)return;P(r,t,o,n,i,a),e.save(),e.globalCompositeOperation=n.blendMode,e.filter=`blur(${n.blur}px)`,e.drawImage(s,0,0),e.restore()}else e.save(),e.globalCompositeOperation=n.blendMode,P(e,t,o,n,i,a),e.restore()}function U(e,t,o=0,n,i=!1){const a=e.getContext("2d");if(!a)return;const{width:s,height:r}=e;a.clearRect(0,0,s,r);for(const l of t.layers)l.type==="background"?te(a,s,r,l):l.type==="halo"?ne(a,s,r,l,o,n):l.type==="rays"&&oe(a,s,r,l,o,n);!i&&t.noise>0&&re(a,s,r,t.noise,t.grainSize)}function B(e,t){U(e,{width:t.width,height:t.height,noise:t.noise,grainSize:t.grainSize,layers:[{id:"background",type:"background",bgType:t.bgType,bgColor:t.bgColor,bgColor2:t.bgColor2,bgGradientAngle:t.bgGradientAngle},{id:"halo-legacy",type:"halo",name:"Halo",originX:t.haloOriginX,originY:t.haloOriginY,intensity:t.halo,size:t.haloSize,color:t.haloColor,blendMode:t.haloBlendMode},{id:"rays-legacy",type:"rays",name:"Rays",direction:t.direction,spread:t.spread,originX:t.originX,originY:t.originY,rayCount:t.rayCount,rayWidth:t.rayWidth,divergence:t.divergence,rayLength:t.rayLength,opacity:t.opacity,blendMode:t.blendMode,colorStart:t.colorStart,colorEnd:t.colorEnd,fadeToTransparent:t.fadeToTransparent,blur:t.blur,randomness:t.randomness,randomnessWidth:t.randomnessWidth,randomnessLength:t.randomnessLength,randomnessAngle:t.randomnessAngle,seed:t.seed}]})}function re(e,t,o,n,i){const a=Math.max(1,Math.floor(i)),s=e.getImageData(0,0,t,o),r=s.data,l=n/100*60;if(a===1)for(let d=0;d<r.length;d+=4){if(r[d+3]===0)continue;const c=(Math.random()-.5)*2*l;r[d]=F(r[d]+c),r[d+1]=F(r[d+1]+c),r[d+2]=F(r[d+2]+c)}else for(let d=0;d<o;d+=a)for(let c=0;c<t;c+=a){const m=(Math.random()-.5)*2*l;for(let f=0;f<a&&d+f<o;f++)for(let y=0;y<a&&c+y<t;y++){const b=((d+f)*t+(c+y))*4;r[b+3]!==0&&(r[b]=F(r[b]+m),r[b+1]=F(r[b+1]+m),r[b+2]=F(r[b+2]+m))}}e.putImageData(s,0,0)}function F(e){return e<0?0:e>255?255:e}async function ae(e,t,o=.95){const n=document.createElement("canvas");return n.width=e.width,n.height=e.height,U(n,e),new Promise((i,a)=>{n.toBlob(s=>{s?i(s):a(new Error("Failed to generate image"))},t,o)})}async function se(e){const t=document.createElement("canvas");return t.width=e.width,t.height=e.height,U(t,e),`background-image: url("${t.toDataURL("image/png")}");
+background-size: cover;
+background-position: center;
+background-repeat: no-repeat;`}async function ie(e,t,o=.95){const n=document.createElement("canvas");return n.width=e.width,n.height=e.height,B(n,e),new Promise((i,a)=>{n.toBlob(s=>{s?i(s):a(new Error("Failed to generate image"))},t,o)})}async function q(e,t,o=.95){const n=document.createElement("canvas");return n.width=e.width,n.height=e.height,B(n,e),n.toDataURL(t,o)}async function de(e){return`background-image: url("${await q(e,"image/png")}");
+background-size: cover;
+background-position: center;
+background-repeat: no-repeat;`}const X={position:"absolute",top:0,right:0,bottom:0,left:0,width:"100%",height:"100%",display:"block"};function le({scene:e,animate:t=!1,animParams:o,showFps:n=!1,className:i,style:a}){const s=E.useRef(null),r=E.useRef(null),l=E.useRef(e),d=E.useRef(o),[c,m]=E.useState(0),f=E.useRef([]);E.useEffect(()=>{l.current=e},[e]),E.useEffect(()=>{d.current=o},[o]),E.useEffect(()=>{if(t)return;const h=s.current;if(!h)return;const C=requestAnimationFrame(()=>{h.width=e.width,h.height=e.height,U(h,e)});return()=>cancelAnimationFrame(C)},[e,t]);const{noise:y,grainSize:b,width:R,height:T}=e;E.useEffect(()=>{if(!t)return;const h=r.current;if(!h||y<=0)return;const C=h.getContext("2d");if(!C)return;const M=R,L=T,v=C.createImageData(M,L),u=v.data,p=Math.max(1,Math.floor(b));if(p===1)for(let g=0;g<u.length;g+=4){const A=Math.random()*255|0;u[g]=u[g+1]=u[g+2]=A,u[g+3]=255}else for(let g=0;g<L;g+=p)for(let A=0;A<M;A+=p){const _=Math.random()*255|0;for(let S=0;S<p&&g+S<L;S++)for(let w=0;w<p&&A+w<M;w++){const D=((g+S)*M+(A+w))*4;u[D]=u[D+1]=u[D+2]=_,u[D+3]=255}}C.putImageData(v,0,0)},[t,y,b,R,T]),E.useEffect(()=>{if(!t){f.current=[],m(0);return}const h=s.current;if(!h)return;let C,M=0,L=null;const v=u=>{var g;if(L!==null&&(M+=(u-L)/1e3*(((g=d.current)==null?void 0:g.speed)??1)),L=u,n){const A=f.current;A.push(u);const _=u-1e3;let S=0;for(;S<A.length&&A[S]<_;)S++;f.current=A.slice(S),m(f.current.length)}const p=l.current;(h.width!==p.width||h.height!==p.height)&&(h.width=p.width,h.height=p.height),U(h,p,M,d.current,!0),C=requestAnimationFrame(v)};return C=requestAnimationFrame(v),()=>cancelAnimationFrame(C)},[t,n]);const O=t&&y>0?y/100*.35:0;return G.jsxs("div",{className:i,style:{position:"relative",overflow:"hidden",...a},children:[G.jsx("canvas",{ref:s,width:R,height:T,style:X}),t&&G.jsx("canvas",{ref:r,width:R,height:T,style:{...X,pointerEvents:"none",mixBlendMode:"overlay",opacity:O,display:y>0?"block":"none"}}),n&&t&&G.jsxs("span",{style:{position:"absolute",top:12,right:12,borderRadius:6,background:"rgba(0,0,0,0.6)",padding:"2px 8px",fontFamily:"monospace",fontSize:12,color:"rgba(255,255,255,0.7)",pointerEvents:"none",backdropFilter:"blur(4px)",WebkitBackdropFilter:"blur(4px)"},children:[c," fps"]})]})}exports.BLEND_MODES=K;exports.DEFAULT_ANIM_PARAMS=J;exports.DEFAULT_BACKGROUND_LAYER=H;exports.DEFAULT_CONFIG=Z;exports.DEFAULT_HALO_LAYER=x;exports.DEFAULT_RAY_LAYER=j;exports.DEFAULT_SCENE=Q;exports.GodLights=le;exports.buildCssSnippet=de;exports.buildSceneCssSnippet=se;exports.drawGodRays=B;exports.drawScene=U;exports.exportDataURL=q;exports.exportImage=ie;exports.exportScene=ae;exports.hexToRgb=Y;exports.mulberry32=$;
+//# sourceMappingURL=godlights.js.map

package/dist/godlights.mjs

@@ -0,0 +1,435 @@
+import { jsxs as X, jsx as B } from "react/jsx-runtime";
+import M from "react";
+const re = [
+  { label: "Normal", value: "source-over" },
+  { label: "Lighter (additive)", value: "lighter" },
+  { label: "Screen", value: "screen" },
+  { label: "Overlay", value: "overlay" },
+  { label: "Soft light", value: "soft-light" },
+  { label: "Hard light", value: "hard-light" }
+], ae = {
+  speed: 1,
+  angleAmp: 50,
+  lengthAmp: 50,
+  widthAmp: 50,
+  haloAmp: 50
+}, j = {
+  type: "rays",
+  direction: 200,
+  spread: 60,
+  originX: 50,
+  originY: 0,
+  rayCount: 24,
+  rayWidth: 60,
+  divergence: 1.6,
+  rayLength: 1.4,
+  opacity: 0.6,
+  blendMode: "lighter",
+  colorStart: "#ffffff",
+  colorEnd: "#ffffff",
+  fadeToTransparent: !0,
+  blur: 8,
+  randomnessWidth: 30,
+  randomnessLength: 18,
+  randomnessAngle: 30,
+  seed: 1337
+}, V = {
+  type: "halo",
+  originX: 50,
+  originY: 0,
+  intensity: 0.5,
+  size: 0.25,
+  color: "#ffffff",
+  blendMode: "lighter"
+}, q = {
+  id: "background",
+  type: "background",
+  bgType: "solid",
+  bgColor: "#000000",
+  bgColor2: "#000000",
+  bgGradientAngle: 180
+}, se = {
+  width: 1920,
+  height: 1080,
+  noise: 8,
+  grainSize: 1,
+  layers: [
+    { ...q },
+    { id: "halo-1", name: "Halo", ...V },
+    { id: "rays-1", name: "Rays", ...j }
+  ]
+}, ie = {
+  width: 1920,
+  height: 1080,
+  rayCount: 24,
+  rayWidth: 60,
+  divergence: 1.6,
+  rayLength: 1.4,
+  opacity: 0.6,
+  blendMode: "lighter",
+  haloBlendMode: "lighter",
+  direction: 200,
+  spread: 60,
+  originX: 50,
+  originY: 0,
+  haloOriginX: 50,
+  haloOriginY: 0,
+  colorStart: "#ffd28a",
+  colorEnd: "#ffd28a",
+  fadeToTransparent: !0,
+  bgType: "gradient",
+  bgColor: "#0b1024",
+  bgColor2: "#1a1340",
+  bgGradientAngle: 180,
+  halo: 0.5,
+  haloSize: 0.25,
+  haloColor: "#ffd28a",
+  blur: 8,
+  noise: 8,
+  grainSize: 1,
+  randomness: 30,
+  randomnessWidth: 30,
+  randomnessLength: 18,
+  randomnessAngle: 30,
+  seed: 1337
+};
+function x(e) {
+  let t = e >>> 0;
+  return function() {
+    t = t + 1831565813 | 0;
+    let o = t;
+    return o = Math.imul(o ^ o >>> 15, o | 1), o ^= o + Math.imul(o ^ o >>> 7, o | 61), ((o ^ o >>> 14) >>> 0) / 4294967296;
+  };
+}
+function Y(e) {
+  const t = e.replace("#", "").trim(), o = t.length === 3 ? t.split("").map((i) => i + i).join("") : t.padEnd(6, "0"), n = parseInt(o.substring(0, 6), 16);
+  return {
+    r: n >> 16 & 255,
+    g: n >> 8 & 255,
+    b: n & 255
+  };
+}
+function O(e, t) {
+  return `rgba(${e.r},${e.g},${e.b},${t})`;
+}
+function K(e) {
+  return (e - 90) * Math.PI / 180;
+}
+function J(e, t, o, n) {
+  if (e.save(), e.globalCompositeOperation = "source-over", n.bgType === "solid")
+    e.fillStyle = n.bgColor, e.fillRect(0, 0, t, o);
+  else if (n.bgType === "gradient") {
+    const i = n.bgGradientAngle * Math.PI / 180, a = t / 2, s = o / 2, r = Math.hypot(t, o) / 2, d = Math.cos(i) * r, l = Math.sin(i) * r, c = e.createLinearGradient(a - d, s - l, a + d, s + l);
+    c.addColorStop(0, n.bgColor), c.addColorStop(1, n.bgColor2), e.fillStyle = c, e.fillRect(0, 0, t, o);
+  }
+  e.restore();
+}
+function Q(e, t, o, n, i = 0, a) {
+  if (n.intensity <= 0) return;
+  e.save(), e.globalCompositeOperation = n.blendMode;
+  const s = n.originX / 100 * t, r = n.originY / 100 * o, d = a ? a.haloAmp / 50 : 1, l = i !== 0 ? 1 + Math.sin(i * 0.4) * 0.04 * d : 1, c = Math.hypot(t, o) * n.size * l, m = e.createRadialGradient(s, r, 0, s, r, c), p = Y(n.color);
+  m.addColorStop(0, O(p, n.intensity)), m.addColorStop(0.5, O(p, n.intensity * 0.4)), m.addColorStop(1, O(p, 0)), e.fillStyle = m, e.beginPath(), e.arc(s, r, c, 0, Math.PI * 2), e.fill(), e.restore();
+}
+function P(e, t, o, n, i = 0, a) {
+  const s = n.originX / 100 * t, r = n.originY / 100 * o, d = K(n.direction), l = n.spread * Math.PI / 180, c = Y(n.colorStart), m = Y(n.colorEnd), A = Math.hypot(t, o) * n.rayLength, b = x(n.seed), L = n.randomnessWidth ?? n.randomness ?? 0, w = n.randomnessLength ?? n.randomness ?? 0, G = n.randomnessAngle ?? n.randomness ?? 0;
+  for (let h = 0; h < n.rayCount; h++) {
+    const C = n.rayCount === 1 ? 0.5 : h / (n.rayCount - 1), S = 1 - b() * (L / 100), E = 1 - b() * (w / 100) * 0.6, R = n.rayCount > 1 ? l / (n.rayCount - 1) : l, g = (b() - 0.5) * (G / 100) * R, f = h * 2.399, u = a ? a.angleAmp / 50 : 1, y = a ? a.lengthAmp / 50 : 1, D = a ? a.widthAmp / 50 : 1, v = i !== 0 ? Math.sin(i * 0.6 + f) * (Math.max(G, 12) / 100) * R * 0.55 * u : 0, T = i !== 0 ? 1 + Math.sin(i * 0.45 + f + 1.2) * (L / 400) * D : 1, k = i !== 0 ? 1 + Math.sin(i * 0.35 + f + 2.5) * (w / 400) * y : 1, N = d - l / 2 + l * C + g + v, I = Math.max(1, n.rayWidth * S * T), _ = Math.max(1, I * n.divergence), U = Math.max(50, A * E * k);
+    e.save(), e.translate(s, r), e.rotate(N);
+    const W = e.createLinearGradient(0, 0, U, 0);
+    W.addColorStop(0, O(c, n.opacity)), W.addColorStop(
+      1,
+      O(m, n.fadeToTransparent ? 0 : n.opacity)
+    ), e.fillStyle = W, e.beginPath(), e.moveTo(0, -I / 2), e.lineTo(U, -_ / 2), e.lineTo(U, _ / 2), e.lineTo(0, I / 2), e.closePath(), e.fill(), e.restore();
+  }
+}
+function Z(e, t, o, n, i = 0, a) {
+  if (n.blur > 0) {
+    const s = new OffscreenCanvas(t, o), r = s.getContext("2d");
+    if (!r) return;
+    P(r, t, o, n, i, a), e.save(), e.globalCompositeOperation = n.blendMode, e.filter = `blur(${n.blur}px)`, e.drawImage(s, 0, 0), e.restore();
+  } else
+    e.save(), e.globalCompositeOperation = n.blendMode, P(e, t, o, n, i, a), e.restore();
+}
+function z(e, t, o = 0, n, i = !1) {
+  const a = e.getContext("2d");
+  if (!a) return;
+  const { width: s, height: r } = e;
+  a.clearRect(0, 0, s, r);
+  for (const d of t.layers)
+    d.type === "background" ? J(a, s, r, d) : d.type === "halo" ? Q(a, s, r, d, o, n) : d.type === "rays" && Z(a, s, r, d, o, n);
+  !i && t.noise > 0 && ee(a, s, r, t.noise, t.grainSize);
+}
+function H(e, t) {
+  z(e, {
+    width: t.width,
+    height: t.height,
+    noise: t.noise,
+    grainSize: t.grainSize,
+    layers: [
+      {
+        id: "background",
+        type: "background",
+        bgType: t.bgType,
+        bgColor: t.bgColor,
+        bgColor2: t.bgColor2,
+        bgGradientAngle: t.bgGradientAngle
+      },
+      {
+        id: "halo-legacy",
+        type: "halo",
+        name: "Halo",
+        originX: t.haloOriginX,
+        originY: t.haloOriginY,
+        intensity: t.halo,
+        size: t.haloSize,
+        color: t.haloColor,
+        blendMode: t.haloBlendMode
+      },
+      {
+        id: "rays-legacy",
+        type: "rays",
+        name: "Rays",
+        direction: t.direction,
+        spread: t.spread,
+        originX: t.originX,
+        originY: t.originY,
+        rayCount: t.rayCount,
+        rayWidth: t.rayWidth,
+        divergence: t.divergence,
+        rayLength: t.rayLength,
+        opacity: t.opacity,
+        blendMode: t.blendMode,
+        colorStart: t.colorStart,
+        colorEnd: t.colorEnd,
+        fadeToTransparent: t.fadeToTransparent,
+        blur: t.blur,
+        randomness: t.randomness,
+        randomnessWidth: t.randomnessWidth,
+        randomnessLength: t.randomnessLength,
+        randomnessAngle: t.randomnessAngle,
+        seed: t.seed
+      }
+    ]
+  });
+}
+function ee(e, t, o, n, i) {
+  const a = Math.max(1, Math.floor(i)), s = e.getImageData(0, 0, t, o), r = s.data, d = n / 100 * 60;
+  if (a === 1)
+    for (let l = 0; l < r.length; l += 4) {
+      if (r[l + 3] === 0) continue;
+      const c = (Math.random() - 0.5) * 2 * d;
+      r[l] = F(r[l] + c), r[l + 1] = F(r[l + 1] + c), r[l + 2] = F(r[l + 2] + c);
+    }
+  else
+    for (let l = 0; l < o; l += a)
+      for (let c = 0; c < t; c += a) {
+        const m = (Math.random() - 0.5) * 2 * d;
+        for (let p = 0; p < a && l + p < o; p++)
+          for (let A = 0; A < a && c + A < t; A++) {
+            const b = ((l + p) * t + (c + A)) * 4;
+            r[b + 3] !== 0 && (r[b] = F(r[b] + m), r[b + 1] = F(r[b + 1] + m), r[b + 2] = F(r[b + 2] + m));
+          }
+      }
+  e.putImageData(s, 0, 0);
+}
+function F(e) {
+  return e < 0 ? 0 : e > 255 ? 255 : e;
+}
+async function le(e, t, o = 0.95) {
+  const n = document.createElement("canvas");
+  return n.width = e.width, n.height = e.height, z(n, e), new Promise((i, a) => {
+    n.toBlob(
+      (s) => {
+        s ? i(s) : a(new Error("Failed to generate image"));
+      },
+      t,
+      o
+    );
+  });
+}
+async function de(e) {
+  const t = document.createElement("canvas");
+  return t.width = e.width, t.height = e.height, z(t, e), `background-image: url("${t.toDataURL("image/png")}");
+background-size: cover;
+background-position: center;
+background-repeat: no-repeat;`;
+}
+async function ce(e, t, o = 0.95) {
+  const n = document.createElement("canvas");
+  return n.width = e.width, n.height = e.height, H(n, e), new Promise((i, a) => {
+    n.toBlob(
+      (s) => {
+        s ? i(s) : a(new Error("Failed to generate image"));
+      },
+      t,
+      o
+    );
+  });
+}
+async function te(e, t, o = 0.95) {
+  const n = document.createElement("canvas");
+  return n.width = e.width, n.height = e.height, H(n, e), n.toDataURL(t, o);
+}
+async function he(e) {
+  return `background-image: url("${await te(e, "image/png")}");
+background-size: cover;
+background-position: center;
+background-repeat: no-repeat;`;
+}
+const $ = {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  display: "block"
+};
+function ge({
+  scene: e,
+  animate: t = !1,
+  animParams: o,
+  showFps: n = !1,
+  className: i,
+  style: a
+}) {
+  const s = M.useRef(null), r = M.useRef(null), d = M.useRef(e), l = M.useRef(o), [c, m] = M.useState(0), p = M.useRef([]);
+  M.useEffect(() => {
+    d.current = e;
+  }, [e]), M.useEffect(() => {
+    l.current = o;
+  }, [o]), M.useEffect(() => {
+    if (t) return;
+    const h = s.current;
+    if (!h) return;
+    const C = requestAnimationFrame(() => {
+      h.width = e.width, h.height = e.height, z(h, e);
+    });
+    return () => cancelAnimationFrame(C);
+  }, [e, t]);
+  const { noise: A, grainSize: b, width: L, height: w } = e;
+  M.useEffect(() => {
+    if (!t) return;
+    const h = r.current;
+    if (!h || A <= 0) return;
+    const C = h.getContext("2d");
+    if (!C) return;
+    const S = L, E = w, R = C.createImageData(S, E), g = R.data, f = Math.max(1, Math.floor(b));
+    if (f === 1)
+      for (let u = 0; u < g.length; u += 4) {
+        const y = Math.random() * 255 | 0;
+        g[u] = g[u + 1] = g[u + 2] = y, g[u + 3] = 255;
+      }
+    else
+      for (let u = 0; u < E; u += f)
+        for (let y = 0; y < S; y += f) {
+          const D = Math.random() * 255 | 0;
+          for (let v = 0; v < f && u + v < E; v++)
+            for (let T = 0; T < f && y + T < S; T++) {
+              const k = ((u + v) * S + (y + T)) * 4;
+              g[k] = g[k + 1] = g[k + 2] = D, g[k + 3] = 255;
+            }
+        }
+    C.putImageData(R, 0, 0);
+  }, [t, A, b, L, w]), M.useEffect(() => {
+    if (!t) {
+      p.current = [], m(0);
+      return;
+    }
+    const h = s.current;
+    if (!h) return;
+    let C, S = 0, E = null;
+    const R = (g) => {
+      var u;
+      if (E !== null && (S += (g - E) / 1e3 * (((u = l.current) == null ? void 0 : u.speed) ?? 1)), E = g, n) {
+        const y = p.current;
+        y.push(g);
+        const D = g - 1e3;
+        let v = 0;
+        for (; v < y.length && y[v] < D; ) v++;
+        p.current = y.slice(v), m(p.current.length);
+      }
+      const f = d.current;
+      (h.width !== f.width || h.height !== f.height) && (h.width = f.width, h.height = f.height), z(h, f, S, l.current, !0), C = requestAnimationFrame(R);
+    };
+    return C = requestAnimationFrame(R), () => cancelAnimationFrame(C);
+  }, [t, n]);
+  const G = t && A > 0 ? A / 100 * 0.35 : 0;
+  return /* @__PURE__ */ X(
+    "div",
+    {
+      className: i,
+      style: { position: "relative", overflow: "hidden", ...a },
+      children: [
+        /* @__PURE__ */ B(
+          "canvas",
+          {
+            ref: s,
+            width: L,
+            height: w,
+            style: $
+          }
+        ),
+        t && /* @__PURE__ */ B(
+          "canvas",
+          {
+            ref: r,
+            width: L,
+            height: w,
+            style: {
+              ...$,
+              pointerEvents: "none",
+              mixBlendMode: "overlay",
+              opacity: G,
+              display: A > 0 ? "block" : "none"
+            }
+          }
+        ),
+        n && t && /* @__PURE__ */ X(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              top: 12,
+              right: 12,
+              borderRadius: 6,
+              background: "rgba(0,0,0,0.6)",
+              padding: "2px 8px",
+              fontFamily: "monospace",
+              fontSize: 12,
+              color: "rgba(255,255,255,0.7)",
+              pointerEvents: "none",
+              backdropFilter: "blur(4px)",
+              WebkitBackdropFilter: "blur(4px)"
+            },
+            children: [
+              c,
+              " fps"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  re as BLEND_MODES,
+  ae as DEFAULT_ANIM_PARAMS,
+  q as DEFAULT_BACKGROUND_LAYER,
+  ie as DEFAULT_CONFIG,
+  V as DEFAULT_HALO_LAYER,
+  j as DEFAULT_RAY_LAYER,
+  se as DEFAULT_SCENE,
+  ge as GodLights,
+  he as buildCssSnippet,
+  de as buildSceneCssSnippet,
+  H as drawGodRays,
+  z as drawScene,
+  te as exportDataURL,
+  ce as exportImage,
+  le as exportScene,
+  Y as hexToRgb,
+  x as mulberry32
+};
+//# sourceMappingURL=godlights.mjs.map

package/dist/index.d.ts

@@ -0,0 +1,181 @@
+import { default as default_2 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+
+/** Parameters that control the animation loop — not persisted in scene. */
+export declare interface AnimParams {
+    /** Time multiplier — higher = faster (default 1). */
+    speed: number;
+    /** Angle swing intensity 0–100 (default 50). */
+    angleAmp: number;
+    /** Ray length oscillation intensity 0–100 (default 50). */
+    lengthAmp: number;
+    /** Ray width oscillation intensity 0–100 (default 50). */
+    widthAmp: number;
+    /** Halo pulse intensity 0–100 (default 50). */
+    haloAmp: number;
+}
+
+export declare interface BackgroundLayer {
+    id: "background";
+    type: "background";
+    bgType: BackgroundType;
+    bgColor: string;
+    bgColor2: string;
+    bgGradientAngle: number;
+}
+
+export declare type BackgroundType = "transparent" | "solid" | "gradient";
+
+export declare const BLEND_MODES: {
+    label: string;
+    value: BlendMode;
+}[];
+
+/**
+ * God Rays / Light Rays rendering engine
+ * Supports multiple independent ray and halo layers per scene.
+ */
+export declare type BlendMode = "source-over" | "lighter" | "screen" | "overlay" | "soft-light" | "hard-light";
+
+export declare function buildCssSnippet(config: GodRaysConfig): Promise<string>;
+
+export declare function buildSceneCssSnippet(scene: SceneConfig): Promise<string>;
+
+export declare const DEFAULT_ANIM_PARAMS: AnimParams;
+
+export declare const DEFAULT_BACKGROUND_LAYER: BackgroundLayer;
+
+export declare const DEFAULT_CONFIG: GodRaysConfig;
+
+export declare const DEFAULT_HALO_LAYER: Omit<HaloLayer, "id" | "name">;
+
+export declare const DEFAULT_RAY_LAYER: Omit<RayLayer, "id" | "name">;
+
+export declare const DEFAULT_SCENE: SceneConfig;
+
+export declare function drawGodRays(canvas: HTMLCanvasElement, config: GodRaysConfig): void;
+
+export declare function drawScene(canvas: HTMLCanvasElement, scene: SceneConfig, time?: number, anim?: AnimParams, skipGrain?: boolean): void;
+
+export declare function exportDataURL(config: GodRaysConfig, type: "image/png" | "image/jpeg", quality?: number): Promise<string>;
+
+export declare function exportImage(config: GodRaysConfig, type: "image/png" | "image/jpeg", quality?: number): Promise<Blob>;
+
+export declare function exportScene(scene: SceneConfig, type: "image/png" | "image/jpeg", quality?: number): Promise<Blob>;
+
+/**
+ * Standalone Godlights canvas component.
+ *
+ * @example
+ * <GodLights scene={myScene} className="w-full h-full" />
+ * <GodLights scene={myScene} animate animParams={{ speed: 1, angleAmp: 50, lengthAmp: 50, widthAmp: 50, haloAmp: 50 }} />
+ */
+export declare function GodLights({ scene, animate, animParams, showFps, className, style, }: GodLightsProps): JSX_2.Element;
+
+export declare interface GodLightsProps {
+    /** Full scene configuration — use the Godlights editor to build this. */
+    scene: SceneConfig;
+    /** Enable animation loop. */
+    animate?: boolean;
+    /** Animation parameters (speed, amplitudes). Only used when animate=true. */
+    animParams?: AnimParams;
+    /** Show FPS counter overlay. Only visible when animate=true. */
+    showFps?: boolean;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
+export declare interface GodRaysConfig {
+    width: number;
+    height: number;
+    rayCount: number;
+    rayWidth: number;
+    divergence: number;
+    rayLength: number;
+    opacity: number;
+    blendMode: BlendMode;
+    haloBlendMode: BlendMode;
+    direction: number;
+    spread: number;
+    originX: number;
+    originY: number;
+    haloOriginX: number;
+    haloOriginY: number;
+    colorStart: string;
+    colorEnd: string;
+    fadeToTransparent: boolean;
+    bgType: BackgroundType;
+    bgColor: string;
+    bgColor2: string;
+    bgGradientAngle: number;
+    halo: number;
+    haloSize: number;
+    haloColor: string;
+    blur: number;
+    noise: number;
+    grainSize: number;
+    randomness: number;
+    randomnessWidth: number;
+    randomnessLength: number;
+    randomnessAngle: number;
+    seed: number;
+}
+
+export declare interface HaloLayer {
+    id: string;
+    type: "halo";
+    name: string;
+    originX: number;
+    originY: number;
+    intensity: number;
+    size: number;
+    color: string;
+    blendMode: BlendMode;
+}
+
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+};
+
+export declare type Layer = RayLayer | HaloLayer | BackgroundLayer;
+
+export declare function mulberry32(seed: number): () => number;
+
+export declare interface RayLayer {
+    id: string;
+    type: "rays";
+    name: string;
+    direction: number;
+    spread: number;
+    originX: number;
+    originY: number;
+    rayCount: number;
+    rayWidth: number;
+    divergence: number;
+    rayLength: number;
+    opacity: number;
+    blendMode: BlendMode;
+    colorStart: string;
+    colorEnd: string;
+    fadeToTransparent: boolean;
+    blur: number;
+    /** @deprecated use randomnessWidth/Length/Angle */
+    randomness?: number;
+    randomnessWidth: number;
+    randomnessLength: number;
+    randomnessAngle: number;
+    seed: number;
+}
+
+export declare interface SceneConfig {
+    width: number;
+    height: number;
+    noise: number;
+    grainSize: number;
+    /** Ordered back-to-front. BackgroundLayer is always at index 0. */
+    layers: Layer[];
+}
+
+export { }

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "godlights",
+  "version": "0.1.0",
+  "description": "Animated god ray / light beam effects for React — zero dependencies beyond React itself.",
+  "type": "module",
+  "main": "./dist/godlights.js",
+  "module": "./dist/godlights.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/godlights.mjs",
+      "require": "./dist/godlights.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist/*.js",
+    "dist/*.mjs",
+    "dist/*.d.ts",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gustavoquinalha/rays-generator.git",
+    "directory": "packages/godlights"
+  },
+  "homepage": "https://github.com/gustavoquinalha/rays-generator/tree/main/packages/godlights#readme",
+  "sideEffects": false,
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly --declaration --outDir dist",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "keywords": [
+    "god-rays",
+    "light-rays",
+    "canvas",
+    "react",
+    "animation",
+    "visual-effects"
+  ],
+  "license": "MIT"
+}