real-time-gradient 1.0.0

package/README.md

@@ -0,0 +1,235 @@
+# 🌅 dynamic-gradient
+
+A lightweight JavaScript library for creating smooth, customizable, real-time gradients with flexible control over animation speed, direction, and hues.
+
+## UMD (Browser) Usage
+
+```html
+<script src="dynamic-gradient.min.js"></script>
+<script>
+  const gradient = DynamicGradient.init("#hero", {
+    type: "linear",
+    direction: "to right",
+    colors: ["#ff7e5f", "#feb47b"],
+  });
+</script>
+```
+
+## ✨ Features
+
+- 🎨 Smooth color transitions (linear, radial, conic)
+
+- ⚡ Dynamic scheduling (interval-based animation)
+
+- 🔄 Runtime updates (colors, speed, direction)
+
+- 📦 Framework-agnostic — works with plain JS, React, Vue, etc.
+
+- 🖼 Gradient-to-text clipping (textClip)
+
+- 🛠 TypeScript typings
+
+## 🖼️ Basic Usage
+
+```html
+<div id="hero" style="height: 300px;"></div>
+
+<script type="module">
+  import DynamicGradient from "dynamic-gradient";
+
+  const gradient = DynamicGradient.init("#hero", {
+    type: "linear",
+    direction: "to right",
+    colors: ["#ff7e5f", "#feb47b"],
+    transitionDuration: 1000,
+    schedule: [
+      { time: "6:00", colors: ["#7fff00ff", "#ffb347ff", "#ff69b4ff"] },
+      { time: "18:00", colors: ["#ff4500ff", "#9370dbff", "#4682b4ff"] },
+      { time: "00:00", colors: ["#ffff54ff", "#ff7f50ff", "#daa520ff"] },
+    ],
+  });
+</script>
+```
+
+## ⚙️ API Reference
+
+`DynamicGradient.init(target, options)`
+Initialize a gradient on a DOM element.
+
+#### Parameters
+
+- `target`: CSS selector or DOM element
+- `options` : configuration object
+
+#### Options:
+
+- `type`: `"linear" | "radial"` (default: `"linear"` )
+- `direction`: CSS gradient direction (e.g., `"to right"`, `"45deg"` )
+- `colors`: array of color hex values
+- `transitionDuration`: time in ms for transitions (default: `1000`)
+- `schedule`: optional array of {`time: "HH:MM", colors: []`} objects
+- `textClip`: boolean (default: `false`) → applies gradient as background-clip for text
+
+### `stopEffects()`
+
+```js
+gradient.stopEffects();
+```
+
+### `triggerEffect({ applyColors, duration, hue })`
+
+Overlay temporary effect
+
+```js
+gradient.triggerEffect({
+  hue: "gold",
+  duration: 2000,
+});
+```
+
+```js
+gradient.triggerEffect({
+  applyColors: ["#9370dbff", "#4682b4ff"],
+  duration: 2000,
+});
+```
+
+### `persistEffect(colors[], duration)`
+
+Mutate a new gradient smoothly
+
+```js
+gradient.persistEffect(["#9370db", "#4682b4"], 2000);
+```
+
+### `schedule([{ time: "HH:MM", colors: [] }, ...])`
+
+Allows scheduling of time-based gradients that change automatically throughout the day.
+
+```js
+const gradient = DynamicGradient.init("#hero", {
+  type: "linear",
+  direction: "to right",
+  colors: ["#ff7f50ff", "#6a5acdff", "#20b2aaff"], // default
+  schedule: [
+    { time: "06:00", colors: ["#7fff00ff", "#ffb347ff", "#ff69b4ff"] }, // morning
+    { time: "18:00", colors: ["#ff4500ff", "#9370dbff", "#4682b4ff"] }, // evening
+    { time: "00:00", colors: ["#ffff54ff", "#ff7f50ff", "#daa520ff"] }, // midnight
+  ],
+});
+```
+
+- `time`: "HH:MM" in `24h format`(e.g. `"06:00"`,`"18:30"` )
+- `colors`: array of CSS colors for the gradient
+
+#### Optional per-entry:
+
+- `type`: `"linear"` or `"radial"`
+- `direction`: CSS gradient direction(`"to right"`, `"45deg"`, etc.)
+
+#### Behavior
+
+- The most recent matching entry before or equal to the current time will be applied.
+- If the time is earlier than the first scheduled entry, it wraps around and uses the last entry.
+- The schedule is checked every minute, so changes align with the clock naturally.
+
+### `destroy()`
+
+Stop the gradient animation and clean up.
+
+```js
+gradient.destroy();
+```
+
+## 🎨 Hue Presets
+
+Some ready-to-use gradient palettes:
+
+```js
+hues = {
+  sunset: ["#ff7e5f", "#feb47b"],
+  ocean: ["#00c6ff", "#0072ff"],
+  forest: ["#11998e", "#38ef7d"],
+  fire: ["#ff512f", "#dd2476"],
+  mono: ["#ffffff", "#000000"],
+};
+```
+
+Additionally, `triggerEffect` accepts special hue keywords:
+
+- `"white"`, `"black"`, `"gold"`, `"silver"`
+- Or any custom hex string (`"#RRGGBB"`)
+
+Usage:
+
+```js
+gradient.setGradient({ colors: hues.forest });
+```
+
+Or:
+
+```js
+gradient.triggerEffect({ hue: "gold", duration: 2000 });
+```
+
+## 📦 TypeScript Typings
+
+```ts
+// index.d.ts
+declare module "real-time-gradient" {
+  type GradientType = "linear" | "radial";
+
+  type HuePreset = "white" | "black" | "gold" | "silver" | string;
+  // string allows custom hex codes "#RRGGBB"
+
+  interface ScheduleEntry {
+    time: string; // "HH:MM" in 24h format
+    colors: string[]; // array of CSS color values
+    type?: GradientType;
+    direction?: string;
+  }
+
+  interface GradientOptions {
+    type?: GradientType;
+    direction?: string;
+    colors?: string[];
+    transitionDuration?: number;
+    schedule?: ScheduleEntry[];
+    textClip?: boolean;
+  }
+
+  interface EffectOptions {
+    applyColors?: string[];
+    duration?: number;
+    hue?: HuePreset;
+  }
+
+  export class DynamicGradient {
+    constructor(container: string | HTMLElement, options?: GradientOptions);
+
+    static init(
+      container: string | HTMLElement,
+      options?: GradientOptions
+    ): DynamicGradient;
+
+    setGradient(options: {
+      colors: string[];
+      type?: GradientType;
+      direction?: string;
+    }): void;
+
+    schedule(entries: ScheduleEntry[]): void;
+
+    triggerEffect(options?: EffectOptions): void;
+
+    persistEffect(colors: string[], duration?: number): void;
+
+    stopEffects(): void;
+    destroy(): void;
+  }
+}
+```
+
+## 📄 License
+
+MIT © 2025 — @wakenedo

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/index.es.js

@@ -0,0 +1,231 @@
+function c(n, e = "linear", t = "to right") {
+  return e === "linear" ? `linear-gradient(${t}, ${n.join(",")})` : `radial-gradient(circle, ${n.join(",")})`;
+}
+function f(n, e, t) {
+  const i = document.createElement("div");
+  return Object.assign(i.style, {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    zIndex: 0,
+    background: e,
+    opacity: "0",
+    transition: `opacity ${t}ms ease-in-out`
+  }), n.appendChild(i), i;
+}
+function m(n, e, t) {
+  const i = document.createElement("span");
+  i.textContent = n.textContent, Object.assign(i.style, {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    display: "inline-block",
+    background: e,
+    WebkitBackgroundClip: "text",
+    backgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    color: "transparent",
+    pointerEvents: "none",
+    opacity: "0",
+    transition: `opacity ${t}ms ease-in-out`,
+    zIndex: 20
+  });
+  const s = n.parentNode;
+  getComputedStyle(s).position === "static" && (s.style.position = "relative"), s.appendChild(i), requestAnimationFrame(() => {
+    i.style.opacity = "1";
+  });
+}
+function b(n, e) {
+  if (n.__dgTextFx && n.__dgTextFx.duration !== e) {
+    const { a, b: o } = n.__dgTextFx;
+    return a.style.transition = o.style.transition = `opacity ${e}ms ease-in-out`, n.__dgTextFx.duration = e, n.__dgTextFx;
+  }
+  if (n.__dgTextFx) return n.__dgTextFx;
+  const t = n.parentNode;
+  getComputedStyle(t).position === "static" && (t.style.position = "relative");
+  const i = (a) => {
+    const o = document.createElement("span");
+    return o.textContent = n.textContent, Object.assign(o.style, {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      display: "inline-block",
+      WebkitBackgroundClip: "text",
+      backgroundClip: "text",
+      WebkitTextFillColor: "transparent",
+      color: "transparent",
+      pointerEvents: "none",
+      opacity: "0",
+      willChange: "opacity",
+      zIndex: a,
+      transition: `opacity ${e}ms ease-in-out`
+    }), t.appendChild(o), o;
+  }, s = i(20), r = i(21);
+  return n.__dgTextFx = { a: s, b: r, visible: null, duration: e }, n.__dgTextFx;
+}
+function k() {
+  const n = /* @__PURE__ */ new Date();
+  return `${String(n.getHours()).padStart(2, "0")}:${String(
+    n.getMinutes()
+  ).padStart(2, "0")}`;
+}
+function C(n, e) {
+  if (!n.length) return null;
+  let t = n[0];
+  for (let i = 0; i < n.length; i++)
+    e >= n[i].time && (t = n[i]);
+  return e < n[0].time && (t = n[n.length - 1]), t;
+}
+const p = {
+  white: "#ffffff",
+  black: "#000000",
+  gold: "#ffe864ff",
+  silver: "#d4d4d4ff"
+};
+class g {
+  constructor(e, t = {}) {
+    if (this.container = typeof e == "string" ? document.querySelector(e) : e, !this.container)
+      throw new Error("DynamicGradient: container not found.");
+    this.type = t.type || "linear", this.direction = t.direction || "to right", this.colors = t.colors || ["#1e3c72", "#2a5298"], this.transitionDuration = t.transitionDuration ?? 1500, this.textClip = t.textClip || !1, this.scheduleData = t.schedule || [], this.currentInterval = null, this.lastAppliedKey = null, this.container.style.position = this.container.style.position || "relative", this.applyGradient(this.colors, this.type, this.direction, !1), this.scheduleData.length > 0 && this.schedule(this.scheduleData);
+  }
+  /** Apply gradient with optional transition */
+  applyGradient(e = this.colors, t = this.type, i = this.direction, s = !0) {
+    const r = c(e, t, i), a = this.container.style.background;
+    if (r !== a) {
+      if (this.textClip) {
+        const o = m(
+          this.container,
+          r,
+          this.duration
+        );
+        this.container.style.background = o, this.container.style.fontWeight = "inherit";
+      } else
+        s ? (this.transitionOverlay && this.transitionOverlay.remove(), this.transitionOverlay = f(
+          this.container,
+          r,
+          this.transitionDuration
+        ), requestAnimationFrame(() => {
+          this.transitionOverlay.style.opacity = "1";
+        }), setTimeout(() => {
+          this.container.style.background = r, this.transitionOverlay.remove(), this.transitionOverlay = null;
+        }, this.transitionDuration)) : this.container.style.background = r;
+      this.colors = e, this.type = t, this.direction = i;
+    }
+  }
+  /** Allow toggling text-clip dynamically */
+  setTextClip(e = !0) {
+    this.textClip = e, this.applyGradient(this.colors, this.type, this.direction, !1);
+  }
+  /** Trigger a temporary animated effect */
+  triggerEffect({
+    applyColors: e = null,
+    duration: t = this.transitionDuration,
+    loop: i = !0,
+    hue: s = "white"
+  } = {}) {
+    let r;
+    p[s] ? r = p[s] : /^#([0-9A-F]{3}){1,2}$/i.test(s) ? r = s : r = "#ffffff";
+    const a = e ? c(e, this.type, this.direction) : c([...this.colors, r], this.type, this.direction);
+    if (this.textClip) {
+      const y = b(this.container, t), d = () => {
+        const { a: h, b: v, visible: x } = y, l = x === "a" ? v : h, T = e ? c(e, this.type, this.direction) : c(
+          [...this.colors, p[s] || r],
+          this.type,
+          this.direction
+        );
+        l.style.background = T, l.style.backgroundClip = "text", l.style.transition = `opacity ${t}ms ease-in-out`, l.style.opacity = "0", requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            l.style.opacity = "1";
+          });
+        }), setTimeout(() => {
+          l.style.opacity = "0";
+        }, t), y.visible = l === h ? "a" : "b", i ? (this.effectLoopTimeout && clearTimeout(this.effectLoopTimeout), this.effectLoopTimeout = setTimeout(d, t * 2)) : setTimeout(() => {
+          this.applyGradient(
+            e || this.colors,
+            this.type,
+            this.direction,
+            !1
+          ), h.style.opacity = "0", v.style.opacity = "0";
+        }, t * 2);
+      };
+      d();
+      return;
+    }
+    this.effectOverlay || (this.effectOverlay = f(
+      this.container,
+      a,
+      t
+    ));
+    const o = this.effectOverlay, u = () => {
+      o.style.background = a, o.style.opacity = "1", setTimeout(() => {
+        o.style.opacity = "0";
+      }, t);
+    };
+    this.effectRunning || (this.effectRunning = !0, u(), i ? (this.effectLoopInterval && clearInterval(this.effectLoopInterval), this.effectLoopInterval = setInterval(u, t * 2)) : setTimeout(() => {
+      o.remove(), this.effectOverlay = null;
+    }, t * 2));
+  }
+  persistEffect(e = this.colors, t = this.transitionDuration) {
+    const i = c(
+      e,
+      this.type,
+      this.direction
+    );
+    if (this.textClip) {
+      const s = m(
+        this.container,
+        i,
+        t
+      );
+      requestAnimationFrame(() => {
+        s.style.opacity = "1";
+      }), setTimeout(() => {
+        this.applyGradient(e, this.type, this.direction, !1);
+      }, t);
+    } else {
+      const s = f(this.container, i, t);
+      requestAnimationFrame(() => {
+        s.style.opacity = "1";
+      }), setTimeout(() => {
+        this.applyGradient(e, this.type, this.direction, !1), s.remove();
+      }, t);
+    }
+  }
+  stopEffects() {
+    this.effectLoopInterval && (clearInterval(this.effectLoopInterval), this.effectLoopInterval = null), this.effectLoopTimeout && (clearTimeout(this.effectLoopTimeout), this.effectLoopTimeout = null), this.effectRunning = !1;
+  }
+  // ✅ added: cleanup method to prevent leaks
+  destroy() {
+    this.stopEffects(), this.currentInterval && (clearInterval(this.currentInterval), this.currentInterval = null), this.transitionOverlay && (this.transitionOverlay.remove(), this.transitionOverlay = null), this.effectOverlay && (this.effectOverlay.remove(), this.effectOverlay = null);
+  }
+  setGradient({ colors: e, type: t, direction: i }) {
+    const s = e || this.colors, r = t || this.type, a = i || this.direction;
+    s.join(",") === this.colors.join(",") && r === this.type && a === this.direction || this.applyGradient(s, r, a, !0);
+  }
+  schedule(e = []) {
+    this.scheduleData = e.map((t) => ({
+      ...t,
+      time: t.time.padStart(5, "0")
+    })).sort((t, i) => t.time.localeCompare(i.time)), this.currentInterval && clearInterval(this.currentInterval), this.checkSchedule(), this.currentInterval = setInterval(() => this.checkSchedule(), 60 * 1e3);
+  }
+  checkSchedule() {
+    const e = k(), t = C(this.scheduleData, e);
+    if (t) {
+      const i = `${t.time}-${t.colors.join(",")}`;
+      i !== this.lastAppliedKey && (this.setGradient(t), this.lastAppliedKey = i);
+    }
+  }
+  static init(e, t) {
+    return new g(e, t);
+  }
+}
+export {
+  g as DynamicGradient
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(h,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(h=typeof globalThis<"u"?globalThis:h||self,l(h.RealTimeGradient={}))})(this,function(h){"use strict";function l(n,e="linear",t="to right"){return e==="linear"?`linear-gradient(${t}, ${n.join(",")})`:`radial-gradient(circle, ${n.join(",")})`}function f(n,e,t){const i=document.createElement("div");return Object.assign(i.style,{position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none",zIndex:0,background:e,opacity:"0",transition:`opacity ${t}ms ease-in-out`}),n.appendChild(i),i}function d(n,e,t){const i=document.createElement("span");i.textContent=n.textContent,Object.assign(i.style,{position:"absolute",top:0,left:0,width:"100%",height:"100%",display:"inline-block",background:e,WebkitBackgroundClip:"text",backgroundClip:"text",WebkitTextFillColor:"transparent",color:"transparent",pointerEvents:"none",opacity:"0",transition:`opacity ${t}ms ease-in-out`,zIndex:20});const s=n.parentNode;getComputedStyle(s).position==="static"&&(s.style.position="relative"),s.appendChild(i),requestAnimationFrame(()=>{i.style.opacity="1"})}function T(n,e){if(n.__dgTextFx&&n.__dgTextFx.duration!==e){const{a,b:o}=n.__dgTextFx;return a.style.transition=o.style.transition=`opacity ${e}ms ease-in-out`,n.__dgTextFx.duration=e,n.__dgTextFx}if(n.__dgTextFx)return n.__dgTextFx;const t=n.parentNode;getComputedStyle(t).position==="static"&&(t.style.position="relative");const i=a=>{const o=document.createElement("span");return o.textContent=n.textContent,Object.assign(o.style,{position:"absolute",top:0,left:0,width:"100%",height:"100%",display:"inline-block",WebkitBackgroundClip:"text",backgroundClip:"text",WebkitTextFillColor:"transparent",color:"transparent",pointerEvents:"none",opacity:"0",willChange:"opacity",zIndex:a,transition:`opacity ${e}ms ease-in-out`}),t.appendChild(o),o},s=i(20),r=i(21);return n.__dgTextFx={a:s,b:r,visible:null,duration:e},n.__dgTextFx}function b(){const n=new Date;return`${String(n.getHours()).padStart(2,"0")}:${String(n.getMinutes()).padStart(2,"0")}`}function k(n,e){if(!n.length)return null;let t=n[0];for(let i=0;i<n.length;i++)e>=n[i].time&&(t=n[i]);return e<n[0].time&&(t=n[n.length-1]),t}const u={white:"#ffffff",black:"#000000",gold:"#ffe864ff",silver:"#d4d4d4ff"};class p{constructor(e,t={}){if(this.container=typeof e=="string"?document.querySelector(e):e,!this.container)throw new Error("DynamicGradient: container not found.");this.type=t.type||"linear",this.direction=t.direction||"to right",this.colors=t.colors||["#1e3c72","#2a5298"],this.transitionDuration=t.transitionDuration??1500,this.textClip=t.textClip||!1,this.scheduleData=t.schedule||[],this.currentInterval=null,this.lastAppliedKey=null,this.container.style.position=this.container.style.position||"relative",this.applyGradient(this.colors,this.type,this.direction,!1),this.scheduleData.length>0&&this.schedule(this.scheduleData)}applyGradient(e=this.colors,t=this.type,i=this.direction,s=!0){const r=l(e,t,i),a=this.container.style.background;if(r!==a){if(this.textClip){const o=d(this.container,r,this.duration);this.container.style.background=o,this.container.style.fontWeight="inherit"}else s?(this.transitionOverlay&&this.transitionOverlay.remove(),this.transitionOverlay=f(this.container,r,this.transitionDuration),requestAnimationFrame(()=>{this.transitionOverlay.style.opacity="1"}),setTimeout(()=>{this.container.style.background=r,this.transitionOverlay.remove(),this.transitionOverlay=null},this.transitionDuration)):this.container.style.background=r;this.colors=e,this.type=t,this.direction=i}}setTextClip(e=!0){this.textClip=e,this.applyGradient(this.colors,this.type,this.direction,!1)}triggerEffect({applyColors:e=null,duration:t=this.transitionDuration,loop:i=!0,hue:s="white"}={}){let r;u[s]?r=u[s]:/^#([0-9A-F]{3}){1,2}$/i.test(s)?r=s:r="#ffffff";const a=e?l(e,this.type,this.direction):l([...this.colors,r],this.type,this.direction);if(this.textClip){const v=T(this.container,t),g=()=>{const{a:y,b:x,visible:C}=v,c=C==="a"?x:y,O=e?l(e,this.type,this.direction):l([...this.colors,u[s]||r],this.type,this.direction);c.style.background=O,c.style.backgroundClip="text",c.style.transition=`opacity ${t}ms ease-in-out`,c.style.opacity="0",requestAnimationFrame(()=>{requestAnimationFrame(()=>{c.style.opacity="1"})}),setTimeout(()=>{c.style.opacity="0"},t),v.visible=c===y?"a":"b",i?(this.effectLoopTimeout&&clearTimeout(this.effectLoopTimeout),this.effectLoopTimeout=setTimeout(g,t*2)):setTimeout(()=>{this.applyGradient(e||this.colors,this.type,this.direction,!1),y.style.opacity="0",x.style.opacity="0"},t*2)};g();return}this.effectOverlay||(this.effectOverlay=f(this.container,a,t));const o=this.effectOverlay,m=()=>{o.style.background=a,o.style.opacity="1",setTimeout(()=>{o.style.opacity="0"},t)};this.effectRunning||(this.effectRunning=!0,m(),i?(this.effectLoopInterval&&clearInterval(this.effectLoopInterval),this.effectLoopInterval=setInterval(m,t*2)):setTimeout(()=>{o.remove(),this.effectOverlay=null},t*2))}persistEffect(e=this.colors,t=this.transitionDuration){const i=l(e,this.type,this.direction);if(this.textClip){const s=d(this.container,i,t);requestAnimationFrame(()=>{s.style.opacity="1"}),setTimeout(()=>{this.applyGradient(e,this.type,this.direction,!1)},t)}else{const s=f(this.container,i,t);requestAnimationFrame(()=>{s.style.opacity="1"}),setTimeout(()=>{this.applyGradient(e,this.type,this.direction,!1),s.remove()},t)}}stopEffects(){this.effectLoopInterval&&(clearInterval(this.effectLoopInterval),this.effectLoopInterval=null),this.effectLoopTimeout&&(clearTimeout(this.effectLoopTimeout),this.effectLoopTimeout=null),this.effectRunning=!1}destroy(){this.stopEffects(),this.currentInterval&&(clearInterval(this.currentInterval),this.currentInterval=null),this.transitionOverlay&&(this.transitionOverlay.remove(),this.transitionOverlay=null),this.effectOverlay&&(this.effectOverlay.remove(),this.effectOverlay=null)}setGradient({colors:e,type:t,direction:i}){const s=e||this.colors,r=t||this.type,a=i||this.direction;s.join(",")===this.colors.join(",")&&r===this.type&&a===this.direction||this.applyGradient(s,r,a,!0)}schedule(e=[]){this.scheduleData=e.map(t=>({...t,time:t.time.padStart(5,"0")})).sort((t,i)=>t.time.localeCompare(i.time)),this.currentInterval&&clearInterval(this.currentInterval),this.checkSchedule(),this.currentInterval=setInterval(()=>this.checkSchedule(),60*1e3)}checkSchedule(){const e=b(),t=k(this.scheduleData,e);if(t){const i=`${t.time}-${t.colors.join(",")}`;i!==this.lastAppliedKey&&(this.setGradient(t),this.lastAppliedKey=i)}}static init(e,t){return new p(e,t)}}h.DynamicGradient=p,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "real-time-gradient",
+  "version": "1.0.0",
+  "description": "A Dynamic Gradient background library.",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "vite build"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "background",
+    "gradient",
+    "dynamic",
+    "canvas"
+  ],
+  "author": "wakenedo",
+  "license": "MIT",
+  "devDependencies": {
+    "vite": "^5.4.19",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}