@riverflowpkg/riverflow 1.0.3 → 1.0.5

package/effects/sunshine.js

@@ -0,0 +1,160 @@
+    (function () {
+  function injectStyles() {
+    if (document.getElementById('sunshine-styles')) return;
+    const s = document.createElement('style');
+    s.id = 'sunshine-styles';
+    s.textContent = `
+#effect-sunshine {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9998;
+  mix-blend-mode: screen;
+}
+#effect-sunshine-glow {
+  position: absolute;
+  width: 140vmax;
+  height: 140vmax;
+  border-radius: 50%;
+  will-change: opacity, transform;
+  filter: blur(var(--sunshine-blur, 90px));
+}
+#effect-sunshine-rays {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9997;
+  overflow: hidden;
+  mix-blend-mode: screen;
+  filter: blur(var(--sunshine-blur, 90px));
+}
+#effect-sunshine-rays canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+`;
+    document.head.appendChild(s);
+  }
+
+  const CORNERS = {
+    'top-left':     { top: '0%',   left: '0%',   right: 'auto', bottom: 'auto', ox: 0, oy: 0 },
+    'top-right':    { top: '0%',   right: '0%',  left: 'auto',  bottom: 'auto', ox: 1, oy: 0 },
+    'bottom-left':  { bottom: '0%', left: '0%',  top: 'auto',   right: 'auto', ox: 0, oy: 1 },
+    'bottom-right': { bottom: '0%', right: '0%', top: 'auto',   left: 'auto', ox: 1, oy: 1 },
+  };
+
+  function init() {
+    const host = document.querySelector('.effect-sunshine');
+    if (!host) return;
+    injectStyles();
+
+    const cornerKey  = (host.dataset.corner || 'top-right').toLowerCase();
+    const corner     = CORNERS[cornerKey] || CORNERS['top-right'];
+    const color      = host.dataset.color || '255,235,180';
+    const minOpacity = parseFloat(host.dataset.min) || 0.15;
+    const maxOpacity = parseFloat(host.dataset.max) || 0.85;
+    const period     = parseFloat(host.dataset.period) || 900;
+    const rays       = host.dataset.rays !== 'false';
+    const blur       = host.dataset.blur || '90px';
+    
+    const wrap = document.createElement('div');
+    wrap.id = 'effect-sunshine';
+    wrap.style.setProperty('--sunshine-blur', blur);
+    const glow = document.createElement('div');
+    glow.id = 'effect-sunshine-glow';
+    glow.style.top = corner.top;
+    glow.style.left = corner.left;
+    glow.style.right = corner.right;
+    glow.style.bottom = corner.bottom;
+    glow.style.transform = 'translate(' + (corner.ox ? '30%' : '-30%') + ',' + (corner.oy ? '30%' : '-30%') + ')';
+    glow.style.background =
+      'radial-gradient(circle, rgba(' + color + ',0.65) 0%, ' +
+      'rgba(' + color + ',0.4) 18%, ' +
+      'rgba(' + color + ',0.2) 35%, ' +
+      'rgba(' + color + ',0.07) 55%, ' +
+      'rgba(' + color + ',0) 75%)';
+    wrap.appendChild(glow);
+    document.body.appendChild(wrap);
+    
+    let ctx, canvas, W, H;
+    if (rays) {
+      const rayWrap = document.createElement('div');
+      rayWrap.id = 'effect-sunshine-rays';
+      rayWrap.style.setProperty('--sunshine-blur', blur);
+      canvas = document.createElement('canvas');
+      rayWrap.appendChild(canvas);
+      document.body.appendChild(rayWrap);
+      ctx = canvas.getContext('2d');
+    }
+
+    function resize() {
+      if (!canvas) return;
+      W = canvas.width = window.innerWidth;
+      H = canvas.height = window.innerHeight;
+    }
+    resize();
+    window.addEventListener('resize', resize);
+
+    let scrollY = window.scrollY;
+    window.addEventListener('scroll', () => { scrollY = window.scrollY; }, { passive: true });
+
+    let current = minOpacity;
+    let rayAngle = 0;
+
+    function targetOpacity() {
+      const wave = (Math.sin((scrollY / period) * Math.PI * 2) + 1) / 2;
+      return minOpacity + wave * (maxOpacity - minOpacity);
+    }
+
+    function drawRays(opacity) {
+      ctx.clearRect(0, 0, W, H);
+      const ox = corner.ox * W;
+      const oy = corner.oy * H;
+      const count = 7;
+      const len = Math.max(W, H) * 1.4;
+      rayAngle += 0.0006;
+      for (let i = 0; i < count; i++) {
+        const spread = 0.55;
+        const base = Math.atan2(H * 0.5 - oy, W * 0.5 - ox);
+        const a = base - spread + (spread * 2) * (i / (count - 1)) + Math.sin(rayAngle + i) * 0.03;
+        const width = 0.05 + 0.02 * Math.sin(rayAngle * 3 + i * 1.7);
+        const grad = ctx.createLinearGradient(ox, oy, ox + Math.cos(a) * len, oy + Math.sin(a) * len);
+        grad.addColorStop(0, 'rgba(' + color + ',' + (0.16 * opacity) + ')');
+        grad.addColorStop(0.4, 'rgba(' + color + ',' + (0.06 * opacity) + ')');
+        grad.addColorStop(1, 'rgba(' + color + ',0)');
+        ctx.save();
+        ctx.translate(ox, oy);
+        ctx.rotate(a);
+        ctx.fillStyle = grad;
+        ctx.beginPath();
+        ctx.moveTo(0, -width * len * 0.5);
+        ctx.lineTo(len, -width * len * 1.4);
+        ctx.lineTo(len, width * len * 1.4);
+        ctx.lineTo(0, width * len * 0.5);
+        ctx.closePath();
+        ctx.fill();
+        ctx.restore();
+      }
+    }
+
+    function frame() {
+      const target = targetOpacity();
+      current += (target - current) * 0.06;
+
+      glow.style.opacity = current.toFixed(3);
+      const scale = 0.85 + (current - minOpacity) / (maxOpacity - minOpacity) * 0.3;
+      glow.style.transform =
+        'translate(' + (corner.ox ? '30%' : '-30%') + ',' + (corner.oy ? '30%' : '-30%') + ') scale(' + scale.toFixed(3) + ')';
+
+      if (ctx) drawRays(current);
+
+      requestAnimationFrame(frame);
+    }
+    requestAnimationFrame(frame);
+  }
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+  else init();
+})();

package/effects/typing.js

@@ -1,105 +1,105 @@
-(function () {
-
-  function injectStyles() {
-    if (document.getElementById('typing-styles')) return;
-    const s = document.createElement('style');
-    s.id = 'typing-styles';
-    s.textContent = `
-/* cursor */
-.typing-cursor {
-  display: inline-block;
-  width: 2px;
-  height: 1em;
-  background: currentColor;
-  border-radius: 1px;
-  margin-left: 2px;
-  vertical-align: text-bottom;
-}
-
-/* default cursor — hard blink */
-.typing .typing-cursor {
-  animation: cur-blink 1s steps(1) infinite;
-}
-@keyframes cur-blink {
-  0%, 49% { opacity: 1; }
-  50%, 100% { opacity: 0; }
-}
-
-/* smooth cursor — fade blink */
-.typing-smooth .typing-cursor {
-  animation: cur-fade 1s ease-in-out infinite;
-}
-@keyframes cur-fade {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0; }
-}
-
-/* smooth char fade-in */
-.typing-smooth .typing-char {
-  display: inline-block;
-  animation: char-fade 0.12s ease both;
-}
-@keyframes char-fade {
-  from { opacity: 0; transform: translateY(3px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-`;
-    document.head.appendChild(s);
-  }
-
-  function initTyping(el) {
-    if (el.dataset.typingInit) return;
-    el.dataset.typingInit = '1';
-
-    const fullText  = el.textContent.trim();
-    const isSmooth  = el.classList.contains('typing-smooth');
-    const speed     = parseInt(el.dataset.speed) || 50;   /* ms per character */
-    const delay     = parseInt(el.dataset.delay) || 0;    /* ms before starting */
-
-    el.textContent = '';
-
-    /* cursor element */
-    const cursor = document.createElement('span');
-    cursor.className = 'typing-cursor';
-    el.appendChild(cursor);
-
-    let i = 0;
-
-    function typeNext() {
-      if (i >= fullText.length) return; /* done — cursor stays */
-
-      const ch = fullText[i];
-      i++;
-
-      if (isSmooth) {
-        const span = document.createElement('span');
-        span.className = 'typing-char';
-        span.textContent = ch;
-        el.insertBefore(span, cursor);
-      } else {
-        const text = document.createTextNode(ch);
-        el.insertBefore(text, cursor);
-      }
-
-      setTimeout(typeNext, speed);
-    }
-
-    setTimeout(typeNext, delay);
-  }
-
-  function init() {
-    injectStyles();
-    document.querySelectorAll('.typing').forEach(initTyping);
-    new MutationObserver(muts => muts.forEach(m =>
-      m.addedNodes.forEach(n => {
-        if (n.nodeType !== 1) return;
-        if (n.classList.contains('typing')) initTyping(n);
-        n.querySelectorAll?.('.typing').forEach(initTyping);
-      })
-    )).observe(document.body, { childList: true, subtree: true });
-  }
-
-  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
-  else init();
-
-})();
+(function () {
+
+  function injectStyles() {
+    if (document.getElementById('typing-styles')) return;
+    const s = document.createElement('style');
+    s.id = 'typing-styles';
+    s.textContent = `
+/* cursor */
+.typing-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  background: currentColor;
+  border-radius: 1px;
+  margin-left: 2px;
+  vertical-align: text-bottom;
+}
+
+/* default cursor — hard blink */
+.typing .typing-cursor {
+  animation: cur-blink 1s steps(1) infinite;
+}
+@keyframes cur-blink {
+  0%, 49% { opacity: 1; }
+  50%, 100% { opacity: 0; }
+}
+
+/* smooth cursor — fade blink */
+.typing-smooth .typing-cursor {
+  animation: cur-fade 1s ease-in-out infinite;
+}
+@keyframes cur-fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+/* smooth char fade-in */
+.typing-smooth .typing-char {
+  display: inline-block;
+  animation: char-fade 0.12s ease both;
+}
+@keyframes char-fade {
+  from { opacity: 0; transform: translateY(3px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+`;
+    document.head.appendChild(s);
+  }
+
+  function initTyping(el) {
+    if (el.dataset.typingInit) return;
+    el.dataset.typingInit = '1';
+
+    const fullText  = el.textContent.trim();
+    const isSmooth  = el.classList.contains('typing-smooth');
+    const speed     = parseInt(el.dataset.speed) || 50;   /* ms per character */
+    const delay     = parseInt(el.dataset.delay) || 0;    /* ms before starting */
+
+    el.textContent = '';
+
+    /* cursor element */
+    const cursor = document.createElement('span');
+    cursor.className = 'typing-cursor';
+    el.appendChild(cursor);
+
+    let i = 0;
+
+    function typeNext() {
+      if (i >= fullText.length) return; /* done — cursor stays */
+
+      const ch = fullText[i];
+      i++;
+
+      if (isSmooth) {
+        const span = document.createElement('span');
+        span.className = 'typing-char';
+        span.textContent = ch;
+        el.insertBefore(span, cursor);
+      } else {
+        const text = document.createTextNode(ch);
+        el.insertBefore(text, cursor);
+      }
+
+      setTimeout(typeNext, speed);
+    }
+
+    setTimeout(typeNext, delay);
+  }
+
+  function init() {
+    injectStyles();
+    document.querySelectorAll('.typing').forEach(initTyping);
+    new MutationObserver(muts => muts.forEach(m =>
+      m.addedNodes.forEach(n => {
+        if (n.nodeType !== 1) return;
+        if (n.classList.contains('typing')) initTyping(n);
+        n.querySelectorAll?.('.typing').forEach(initTyping);
+      })
+    )).observe(document.body, { childList: true, subtree: true });
+  }
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+  else init();
+
+})();

package/effects/underwater.js

@@ -1,117 +1,117 @@
-(function () {
-  function injectStyles() {
-    if (document.getElementById('underwater-styles')) return;
-    const s = document.createElement('style');
-    s.id = 'underwater-styles';
-    s.textContent = `
-#effect-underwater {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 9998;
-  background: linear-gradient(180deg,
-    rgba(0,60,120,0.38) 0%,
-    rgba(0,100,160,0.22) 50%,
-    rgba(0,40,80,0.42) 100%);
-}
-#effect-underwater-caustics {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 9997;
-  overflow: hidden;
-}
-#effect-underwater-caustics canvas {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0.13;
-}
-#effect-underwater-blur {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 9999;
-  backdrop-filter: blur(0.6px) saturate(1.3);
-  -webkit-backdrop-filter: blur(0.6px) saturate(1.3);
-}
-`;
-    document.head.appendChild(s);
-  }
-
-  function init() {
-    if (!document.querySelector('.effect-underwater')) return;
-    injectStyles();
-
-    const overlay = document.createElement('div');
-    overlay.id = 'effect-underwater';
-    document.body.appendChild(overlay);
-
-    const blurLayer = document.createElement('div');
-    blurLayer.id = 'effect-underwater-blur';
-    document.body.appendChild(blurLayer);
-
-    const causticWrap = document.createElement('div');
-    causticWrap.id = 'effect-underwater-caustics';
-    const canvas = document.createElement('canvas');
-    causticWrap.appendChild(canvas);
-    document.body.appendChild(causticWrap);
-
-    const ctx = canvas.getContext('2d');
-    let W, H;
-    function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }
-    resize();
-    window.addEventListener('resize', resize);
-
-    const nodes = Array.from({ length: 10 }, () => ({
-      x: Math.random() * 1.2 - 0.1, y: Math.random() * 1.2 - 0.1,
-      vx: (Math.random() - 0.5) * 0.0006, vy: (Math.random() - 0.5) * 0.0006,
-      r: 0.12 + Math.random() * 0.2,
-    }));
-
-    let scrollOffset = 0;
-    window.addEventListener('scroll', () => { scrollOffset = window.scrollY; }, { passive: true });
-
-    function draw() {
-      ctx.clearRect(0, 0, W, H);
-      const shift = scrollOffset * 0.3;
-      nodes.forEach(n => {
-        n.x += n.vx; n.y += n.vy;
-        if (n.x < -0.2 || n.x > 1.2) n.vx *= -1;
-        if (n.y < -0.2 || n.y > 1.2) n.vy *= -1;
-        const cx = n.x * W, cy = n.y * H - shift;
-        const rx = n.r * W, ry = n.r * H * 0.5;
-        const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.max(rx, ry));
-        grad.addColorStop(0,   'rgba(100,200,255,0.55)');
-        grad.addColorStop(0.4, 'rgba(60,160,220,0.2)');
-        grad.addColorStop(1,   'rgba(0,80,160,0)');
-        ctx.save();
-        ctx.scale(1, ry / rx);
-        ctx.beginPath();
-        ctx.arc(cx, cy * (rx / ry), rx, 0, Math.PI * 2);
-        ctx.fillStyle = grad;
-        ctx.fill();
-        ctx.restore();
-      });
-      requestAnimationFrame(draw);
-    }
-
-    /* SVG wave distortion */
-    const svgFilter = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svgFilter.style.cssText = 'position:fixed;width:0;height:0;';
-    svgFilter.innerHTML = `<defs><filter id="underwater-wave">
-      <feTurbulence type="fractalNoise" baseFrequency="0.012 0.018" numOctaves="3" seed="5" result="noise">
-        <animate attributeName="baseFrequency" values="0.012 0.018;0.014 0.020;0.012 0.018" dur="8s" repeatCount="indefinite"/>
-      </feTurbulence>
-      <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" xChannelSelector="R" yChannelSelector="G"/>
-    </filter></defs>`;
-    document.body.appendChild(svgFilter);
-    overlay.style.filter = 'url(#underwater-wave)';
-
-    requestAnimationFrame(draw);
-  }
-
-  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
-  else init();
-})();
+(function () {
+  function injectStyles() {
+    if (document.getElementById('underwater-styles')) return;
+    const s = document.createElement('style');
+    s.id = 'underwater-styles';
+    s.textContent = `
+#effect-underwater {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9998;
+  background: linear-gradient(180deg,
+    rgba(0,60,120,0.38) 0%,
+    rgba(0,100,160,0.22) 50%,
+    rgba(0,40,80,0.42) 100%);
+}
+#effect-underwater-caustics {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9997;
+  overflow: hidden;
+}
+#effect-underwater-caustics canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.13;
+}
+#effect-underwater-blur {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  backdrop-filter: blur(0.6px) saturate(1.3);
+  -webkit-backdrop-filter: blur(0.6px) saturate(1.3);
+}
+`;
+    document.head.appendChild(s);
+  }
+
+  function init() {
+    if (!document.querySelector('.effect-underwater')) return;
+    injectStyles();
+
+    const overlay = document.createElement('div');
+    overlay.id = 'effect-underwater';
+    document.body.appendChild(overlay);
+
+    const blurLayer = document.createElement('div');
+    blurLayer.id = 'effect-underwater-blur';
+    document.body.appendChild(blurLayer);
+
+    const causticWrap = document.createElement('div');
+    causticWrap.id = 'effect-underwater-caustics';
+    const canvas = document.createElement('canvas');
+    causticWrap.appendChild(canvas);
+    document.body.appendChild(causticWrap);
+
+    const ctx = canvas.getContext('2d');
+    let W, H;
+    function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }
+    resize();
+    window.addEventListener('resize', resize);
+
+    const nodes = Array.from({ length: 10 }, () => ({
+      x: Math.random() * 1.2 - 0.1, y: Math.random() * 1.2 - 0.1,
+      vx: (Math.random() - 0.5) * 0.0006, vy: (Math.random() - 0.5) * 0.0006,
+      r: 0.12 + Math.random() * 0.2,
+    }));
+
+    let scrollOffset = 0;
+    window.addEventListener('scroll', () => { scrollOffset = window.scrollY; }, { passive: true });
+
+    function draw() {
+      ctx.clearRect(0, 0, W, H);
+      const shift = scrollOffset * 0.3;
+      nodes.forEach(n => {
+        n.x += n.vx; n.y += n.vy;
+        if (n.x < -0.2 || n.x > 1.2) n.vx *= -1;
+        if (n.y < -0.2 || n.y > 1.2) n.vy *= -1;
+        const cx = n.x * W, cy = n.y * H - shift;
+        const rx = n.r * W, ry = n.r * H * 0.5;
+        const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.max(rx, ry));
+        grad.addColorStop(0,   'rgba(100,200,255,0.55)');
+        grad.addColorStop(0.4, 'rgba(60,160,220,0.2)');
+        grad.addColorStop(1,   'rgba(0,80,160,0)');
+        ctx.save();
+        ctx.scale(1, ry / rx);
+        ctx.beginPath();
+        ctx.arc(cx, cy * (rx / ry), rx, 0, Math.PI * 2);
+        ctx.fillStyle = grad;
+        ctx.fill();
+        ctx.restore();
+      });
+      requestAnimationFrame(draw);
+    }
+
+    /* SVG wave distortion */
+    const svgFilter = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svgFilter.style.cssText = 'position:fixed;width:0;height:0;';
+    svgFilter.innerHTML = `<defs><filter id="underwater-wave">
+      <feTurbulence type="fractalNoise" baseFrequency="0.012 0.018" numOctaves="3" seed="5" result="noise">
+        <animate attributeName="baseFrequency" values="0.012 0.018;0.014 0.020;0.012 0.018" dur="8s" repeatCount="indefinite"/>
+      </feTurbulence>
+      <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" xChannelSelector="R" yChannelSelector="G"/>
+    </filter></defs>`;
+    document.body.appendChild(svgFilter);
+    overlay.style.filter = 'url(#underwater-wave)';
+
+    requestAnimationFrame(draw);
+  }
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+  else init();
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riverflowpkg/riverflow",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Drop-in vanilla JS browser widgets: top loading bar, smooth scroll, typing effect, underwater overlay, and a code editor with syntax highlighting.",
   "keywords": [
     "loading-bar",