react-manga-effects 0.1.6 → 0.1.7

package/dist/components/SpeedLines/types.d.ts

@@ -3,8 +3,6 @@ export interface Line {
     length: number;
     width: number;
     opacity: number;
-    pulseOffset: number;
-    pulseSpeed: number;
 }
 export interface SpeedLinesConfig {
     lineCount: number;

package/dist/components/SpeedLines/utils/lineGenerator.d.ts

@@ -3,4 +3,4 @@ import { Line, SpeedLinesConfig } from '../types';
 
 export declare const generateLines: (config: SpeedLinesConfig) => Line[];
 export declare const drawLine: (ctx: CanvasRenderingContext2D, line: Line, center: Point, maxRadius: number, innerRadiusPct: number, // 0-100
-color: string, width: number, height: number, time?: number, animated?: boolean, animationSpeed?: number) => void;
+color: string, width: number, height: number) => void;

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react/jsx-runtime"),a=require("react"),$=({text:e="Manga Effect Placeholder"})=>I.jsx("div",{style:{padding:"2rem",border:"4px dashed #333",textAlign:"center",fontFamily:"sans-serif",fontWeight:"bold",backgroundColor:"#f0f0f0"},children:e}),j=({children:e,isOpen:s,center:n={x:50,y:50},duration:c=1e3,easing:i="easeInOut",onComplete:o,className:t="",style:r})=>{const E=a.useRef(null);let p="ease-in-out";if(typeof i=="string")switch(i){case"linear":p="linear";break;case"easeIn":p="ease-in";break;case"easeOut":p="ease-out";break;case"easeInOut":p="ease-in-out";break;default:p=i}const u=M=>{M.propertyName==="clip-path"&&o&&o()},y={"--iris-cx":`${n.x}%`,"--iris-cy":`${n.y}%`,"--iris-duration":`${c}ms`,"--iris-easing":p,...r};return I.jsx("div",{ref:E,className:`iris-wipe ${t}`,"data-state":s?"open":"closed",style:y,onTransitionEnd:u,children:e})},D=(e,s)=>{const n=a.useRef(),c=a.useRef(),i=o=>{if(c.current!==void 0){const t=o-c.current;e(t)}c.current=o,n.current=requestAnimationFrame(i)};a.useEffect(()=>(s?n.current=requestAnimationFrame(i):(n.current&&cancelAnimationFrame(n.current),c.current=void 0),()=>{n.current&&cancelAnimationFrame(n.current)}),[s,e])},W=(e,s,n,c)=>{const i=Math.cos(s),o=Math.sin(s);let t=1/0;if(Math.abs(i)>1e-4)if(i>0){const r=(n-e.x)/i;r>=0&&(t=Math.min(t,r))}else{const r=(0-e.x)/i;r>=0&&(t=Math.min(t,r))}if(Math.abs(o)>1e-4)if(o>0){const r=(c-e.y)/o;r>=0&&(t=Math.min(t,r))}else{const r=(0-e.y)/o;r>=0&&(t=Math.min(t,r))}return t===1/0?0:t},q=e=>Array.from({length:e.lineCount},()=>({angle:Math.random()*Math.PI*2,length:(e.minLength+Math.random()*(e.maxLength-e.minLength))/100,width:2+Math.random()*8,opacity:.6+Math.random()*.4,pulseOffset:Math.random()*Math.PI*2,pulseSpeed:2+Math.random()*3})),F=(e,s,n,c,i,o,t,r,E=0,p=!1,u=1)=>{const y=c*(i/100);let M=s.opacity;if(p){const P=.5+(Math.sin(E*s.pulseSpeed*u+s.pulseOffset)+1)*.25;M*=P}const m=W(n,s.angle,t,r)+2;let g=m-m*s.length;if(g<y&&(g=y),g>=m)return;const T=Math.cos(s.angle),R=Math.sin(s.angle),b=n.x+T*m,h=n.y+R*m,l=n.x+T*g,f=n.y+R*g,d=-R,w=T,x=s.width/2;e.beginPath(),e.moveTo(b+d*x,h+w*x),e.lineTo(b-d*x,h-w*x),e.lineTo(l,f),e.closePath(),e.fillStyle=o,e.globalAlpha=M,e.fill(),e.globalAlpha=1},C=({center:e={x:50,y:50},lineCount:s=60,color:n="rgba(0, 0, 0, 0.6)",minLength:c=10,maxLength:i=30,innerRadius:o=0,animated:t=!1,animationSpeed:r=1,className:E="",style:p})=>{const u=a.useRef(null),y=a.useRef(null),M=a.useRef([]),S=a.useRef(e),m=a.useRef(0),[g,T]=a.useState({width:0,height:0});a.useEffect(()=>{S.current=e},[e.x,e.y]),a.useEffect(()=>{M.current=q({lineCount:s,minLength:c,maxLength:i})},[s,c,i]);const R=a.useCallback(()=>{if(y.current&&u.current){const{clientWidth:h,clientHeight:l}=y.current,f=window.devicePixelRatio||1;if(u.current.width!==h*f||u.current.height!==l*f){u.current.width=h*f,u.current.height=l*f,u.current.style.width=`${h}px`,u.current.style.height=`${l}px`;const d=u.current.getContext("2d");d&&d.scale(f,f),T({width:h,height:l})}}},[]);a.useEffect(()=>{R();const h=new ResizeObserver(R);return y.current&&h.observe(y.current),()=>h.disconnect()},[R]);const b=a.useCallback(h=>{const l=u.current,f=y.current,d=l==null?void 0:l.getContext("2d");if(!l||!f||!d||g.width===0)return;d.save(),d.setTransform(1,0,0,1,0,0),d.clearRect(0,0,l.width,l.height),d.restore();const w=f.clientWidth,x=f.clientHeight,v={x:S.current.x/100*w,y:S.current.y/100*x},P=Math.max(v.x,w-v.x),A=Math.max(v.y,x-v.y),O=Math.hypot(P,A);t&&(m.current+=h*.001),M.current.forEach(k=>{F(d,k,v,O,o,n,w,x,m.current,t,r)})},[n,o,t,r,g]);return D(b,t),a.useEffect(()=>{t||b(0)},[b,t,s,c,i,o,n,g]),I.jsx("div",{ref:y,className:`speed-lines-container ${E}`,style:{width:"100%",height:"100%",position:"relative",overflow:"hidden",pointerEvents:"none",...p},children:I.jsx("canvas",{ref:u,style:{width:"100%",height:"100%",display:"block"}})})};exports.IrisWipe=j;exports.Placeholder=$;exports.SpeedLines=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react/jsx-runtime"),i=require("react"),D=({text:e="Manga Effect Placeholder"})=>A.jsx("div",{style:{padding:"2rem",border:"4px dashed #333",textAlign:"center",fontFamily:"sans-serif",fontWeight:"bold",backgroundColor:"#f0f0f0"},children:e}),L=({children:e,isOpen:r,center:n={x:50,y:50},duration:u=1e3,easing:c="easeInOut",onComplete:o,className:t="",style:s})=>{const R=i.useRef(null);let y="ease-in-out";if(typeof c=="string")switch(c){case"linear":y="linear";break;case"easeIn":y="ease-in";break;case"easeOut":y="ease-out";break;case"easeInOut":y="ease-in-out";break;default:y=c}const h=l=>{l.propertyName==="clip-path"&&o&&o()},f={"--iris-cx":`${n.x}%`,"--iris-cy":`${n.y}%`,"--iris-duration":`${u}ms`,"--iris-easing":y,...s};return A.jsx("div",{ref:R,className:`iris-wipe ${t}`,"data-state":r?"open":"closed",style:f,onTransitionEnd:h,children:e})},O=(e,r)=>{const n=i.useRef(),u=i.useRef(),c=o=>{if(u.current!==void 0){const t=o-u.current;e(t)}u.current=o,n.current=requestAnimationFrame(c)};i.useEffect(()=>(r?n.current=requestAnimationFrame(c):(n.current&&cancelAnimationFrame(n.current),u.current=void 0),()=>{n.current&&cancelAnimationFrame(n.current)}),[r,e])},W=(e,r,n,u)=>{const c=Math.cos(r),o=Math.sin(r);let t=1/0;if(Math.abs(c)>1e-4)if(c>0){const s=(n-e.x)/c;s>=0&&(t=Math.min(t,s))}else{const s=(0-e.x)/c;s>=0&&(t=Math.min(t,s))}if(Math.abs(o)>1e-4)if(o>0){const s=(u-e.y)/o;s>=0&&(t=Math.min(t,s))}else{const s=(0-e.y)/o;s>=0&&(t=Math.min(t,s))}return t===1/0?0:t},q=e=>Array.from({length:e.lineCount},()=>({angle:Math.random()*Math.PI*2,length:(e.minLength+Math.random()*(e.maxLength-e.minLength))/100,width:2+Math.random()*8,opacity:.6+Math.random()*.4})),C=(e,r,n,u,c,o,t,s)=>{const R=u*(c/100),y=r.opacity,f=W(n,r.angle,t,s)+2;let l=f-f*r.length;if(l<R&&(l=R),l>=f)return;const p=Math.cos(r.angle),x=Math.sin(r.angle),M=n.x+p*f,v=n.y+x*f,E=n.x+p*l,I=n.y+x*l,b=-x,w=p,a=r.width/2;e.beginPath(),e.moveTo(M+b*a,v+w*a),e.lineTo(M-b*a,v-w*a),e.lineTo(E,I),e.closePath(),e.fillStyle=o,e.globalAlpha=y,e.fill(),e.globalAlpha=1},z=({center:e={x:50,y:50},lineCount:r=60,color:n="rgba(0, 0, 0, 0.6)",minLength:u=30,maxLength:c=60,innerRadius:o=0,animated:t=!1,animationSpeed:s=1,className:R="",style:y})=>{const h=i.useRef(null),f=i.useRef(null),l=i.useRef([]),p=i.useRef(0),x=i.useRef(e),M=i.useRef(0),v=i.useRef(0),[E,I]=i.useState({width:0,height:0});i.useEffect(()=>{x.current=e},[e.x,e.y]),i.useEffect(()=>{const a=t?3:1;l.current=Array.from({length:a},()=>q({lineCount:r,minLength:u,maxLength:c})),p.current=0},[r,u,c,t]);const b=i.useCallback(()=>{if(f.current&&h.current){const{clientWidth:a,clientHeight:d}=f.current,m=window.devicePixelRatio||1;if(h.current.width!==a*m||h.current.height!==d*m){h.current.width=a*m,h.current.height=d*m,h.current.style.width=`${a}px`,h.current.style.height=`${d}px`;const g=h.current.getContext("2d");g&&g.scale(m,m),I({width:a,height:d})}}},[]);i.useEffect(()=>{b();const a=new ResizeObserver(b);return f.current&&a.observe(f.current),()=>a.disconnect()},[b]);const w=i.useCallback(a=>{const d=h.current,m=f.current,g=d==null?void 0:d.getContext("2d");if(!d||!m||!g||E.width===0)return;g.save(),g.setTransform(1,0,0,1,0,0),g.clearRect(0,0,d.width,d.height),g.restore();const S=m.clientWidth,P=m.clientHeight,T={x:x.current.x/100*S,y:x.current.y/100*P},F=Math.max(T.x,S-T.x),$=Math.max(T.y,P-T.y),j=Math.hypot(F,$);if(t){M.current+=a;const k=80/Math.max(.1,s);M.current-v.current>k&&(p.current=(p.current+1)%l.current.length,v.current=M.current)}(l.current[p.current]||[]).forEach(k=>{C(g,k,T,j,o,n,S,P)})},[n,o,t,s,E]);return O(w,t),i.useEffect(()=>{t||w(0)},[w,t,r,u,c,o,n,E]),A.jsx("div",{ref:f,className:`speed-lines-container ${R}`,style:{width:"100%",height:"100%",position:"relative",overflow:"hidden",pointerEvents:"none",...y},children:A.jsx("canvas",{ref:h,style:{width:"100%",height:"100%",display:"block"}})})};exports.IrisWipe=L;exports.Placeholder=D;exports.SpeedLines=z;

package/dist/index.js

@@ -1,197 +1,193 @@
-import { jsx as S } from "react/jsx-runtime";
-import F, { useRef as M, useEffect as A, useCallback as P } from "react";
-const H = ({ text: t = "Manga Effect Placeholder" }) => /* @__PURE__ */ S("div", { style: {
+import { jsx as I } from "react/jsx-runtime";
+import W, { useRef as y, useEffect as A, useCallback as P } from "react";
+const X = ({ text: t = "Manga Effect Placeholder" }) => /* @__PURE__ */ I("div", { style: {
   padding: "2rem",
   border: "4px dashed #333",
   textAlign: "center",
   fontFamily: "sans-serif",
   fontWeight: "bold",
   backgroundColor: "#f0f0f0"
-}, children: t }), j = ({
+}, children: t }), Y = ({
   children: t,
-  isOpen: s,
+  isOpen: r,
   center: n = { x: 50, y: 50 },
   duration: a = 1e3,
   easing: i = "easeInOut",
   onComplete: o,
   className: e = "",
-  style: r
+  style: s
 }) => {
-  const E = M(null);
-  let p = "ease-in-out";
+  const M = y(null);
+  let d = "ease-in-out";
   if (typeof i == "string")
     switch (i) {
       case "linear":
-        p = "linear";
+        d = "linear";
         break;
       case "easeIn":
-        p = "ease-in";
+        d = "ease-in";
         break;
       case "easeOut":
-        p = "ease-out";
+        d = "ease-out";
         break;
       case "easeInOut":
-        p = "ease-in-out";
+        d = "ease-in-out";
         break;
       default:
-        p = i;
+        d = i;
     }
-  const c = (x) => {
-    x.propertyName === "clip-path" && o && o();
-  }, f = {
+  const u = (l) => {
+    l.propertyName === "clip-path" && o && o();
+  }, h = {
     "--iris-cx": `${n.x}%`,
     "--iris-cy": `${n.y}%`,
     "--iris-duration": `${a}ms`,
-    "--iris-easing": p,
-    ...r
+    "--iris-easing": d,
+    ...s
   };
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ I(
     "div",
     {
-      ref: E,
+      ref: M,
       className: `iris-wipe ${e}`,
-      "data-state": s ? "open" : "closed",
-      style: f,
-      onTransitionEnd: c,
+      "data-state": r ? "open" : "closed",
+      style: h,
+      onTransitionEnd: u,
       children: t
     }
   );
-}, W = (t, s) => {
-  const n = M(), a = M(), i = (o) => {
+}, q = (t, r) => {
+  const n = y(), a = y(), i = (o) => {
     if (a.current !== void 0) {
       const e = o - a.current;
       t(e);
     }
     a.current = o, n.current = requestAnimationFrame(i);
   };
-  A(() => (s ? n.current = requestAnimationFrame(i) : (n.current && cancelAnimationFrame(n.current), a.current = void 0), () => {
+  A(() => (r ? n.current = requestAnimationFrame(i) : (n.current && cancelAnimationFrame(n.current), a.current = void 0), () => {
     n.current && cancelAnimationFrame(n.current);
-  }), [s, t]);
-}, q = (t, s, n, a) => {
-  const i = Math.cos(s), o = Math.sin(s);
+  }), [r, t]);
+}, z = (t, r, n, a) => {
+  const i = Math.cos(r), o = Math.sin(r);
   let e = 1 / 0;
   if (Math.abs(i) > 1e-4)
     if (i > 0) {
-      const r = (n - t.x) / i;
-      r >= 0 && (e = Math.min(e, r));
+      const s = (n - t.x) / i;
+      s >= 0 && (e = Math.min(e, s));
     } else {
-      const r = (0 - t.x) / i;
-      r >= 0 && (e = Math.min(e, r));
+      const s = (0 - t.x) / i;
+      s >= 0 && (e = Math.min(e, s));
     }
   if (Math.abs(o) > 1e-4)
     if (o > 0) {
-      const r = (a - t.y) / o;
-      r >= 0 && (e = Math.min(e, r));
+      const s = (a - t.y) / o;
+      s >= 0 && (e = Math.min(e, s));
     } else {
-      const r = (0 - t.y) / o;
-      r >= 0 && (e = Math.min(e, r));
+      const s = (0 - t.y) / o;
+      s >= 0 && (e = Math.min(e, s));
     }
   return e === 1 / 0 ? 0 : e;
-}, z = (t) => Array.from({ length: t.lineCount }, () => ({
+}, C = (t) => Array.from({ length: t.lineCount }, () => ({
   angle: Math.random() * Math.PI * 2,
   // Convert percentage 0-100 to 0-1
   length: (t.minLength + Math.random() * (t.maxLength - t.minLength)) / 100,
   // Thick at start (outer edge), tapers to thin
   width: 2 + Math.random() * 8,
-  opacity: 0.6 + Math.random() * 0.4,
-  pulseOffset: Math.random() * Math.PI * 2,
-  // Increased pulse speed to be more noticeable (was 0.5-1.0, now 2.0-5.0)
-  pulseSpeed: 2 + Math.random() * 3
-})), C = (t, s, n, a, i, o, e, r, E = 0, p = !1, c = 1) => {
-  const f = a * (i / 100);
-  let x = s.opacity;
-  if (p) {
-    const O = 0.5 + (Math.sin(E * s.pulseSpeed * c + s.pulseOffset) + 1) * 0.25;
-    x *= O;
-  }
-  const m = q(n, s.angle, e, r) + 2;
-  let y = m - m * s.length;
-  if (y < f && (y = f), y >= m) return;
-  const T = Math.cos(s.angle), w = Math.sin(s.angle), b = n.x + T * m, l = n.y + w * m, h = n.x + T * y, u = n.y + w * y, d = -w, v = T, g = s.width / 2;
-  t.beginPath(), t.moveTo(b + d * g, l + v * g), t.lineTo(b - d * g, l - v * g), t.lineTo(h, u), t.closePath(), t.fillStyle = o, t.globalAlpha = x, t.fill(), t.globalAlpha = 1;
-}, X = ({
+  opacity: 0.6 + Math.random() * 0.4
+})), N = (t, r, n, a, i, o, e, s) => {
+  const M = a * (i / 100), d = r.opacity, h = z(n, r.angle, e, s) + 2;
+  let l = h - h * r.length;
+  if (l < M && (l = M), l >= h) return;
+  const p = Math.cos(r.angle), x = Math.sin(r.angle), w = n.x + p * h, R = n.y + x * h, T = n.x + p * l, F = n.y + x * l, b = -x, v = p, c = r.width / 2;
+  t.beginPath(), t.moveTo(w + b * c, R + v * c), t.lineTo(w - b * c, R - v * c), t.lineTo(T, F), t.closePath(), t.fillStyle = o, t.globalAlpha = d, t.fill(), t.globalAlpha = 1;
+}, B = ({
   center: t = { x: 50, y: 50 },
-  lineCount: s = 60,
+  lineCount: r = 60,
   color: n = "rgba(0, 0, 0, 0.6)",
-  minLength: a = 10,
-  // Percentage
-  maxLength: i = 30,
-  // Percentage
+  minLength: a = 30,
+  // Increased from 10
+  maxLength: i = 60,
+  // Increased from 30
   innerRadius: o = 0,
-  // Percentage
   animated: e = !1,
-  animationSpeed: r = 1,
-  className: E = "",
-  style: p
+  animationSpeed: s = 1,
+  className: M = "",
+  style: d
 }) => {
-  const c = M(null), f = M(null), x = M([]), I = M(t), m = M(0), [y, T] = F.useState({ width: 0, height: 0 });
+  const u = y(null), h = y(null), l = y([]), p = y(0), x = y(t), w = y(0), R = y(0), [T, F] = W.useState({ width: 0, height: 0 });
   A(() => {
-    I.current = t;
+    x.current = t;
   }, [t.x, t.y]), A(() => {
-    x.current = z({
-      lineCount: s,
-      minLength: a,
-      maxLength: i
-    });
-  }, [s, a, i]);
-  const w = P(() => {
-    if (f.current && c.current) {
-      const { clientWidth: l, clientHeight: h } = f.current, u = window.devicePixelRatio || 1;
-      if (c.current.width !== l * u || c.current.height !== h * u) {
-        c.current.width = l * u, c.current.height = h * u, c.current.style.width = `${l}px`, c.current.style.height = `${h}px`;
-        const d = c.current.getContext("2d");
-        d && d.scale(u, u), T({ width: l, height: h });
+    const c = e ? 3 : 1;
+    l.current = Array.from(
+      { length: c },
+      () => C({
+        lineCount: r,
+        minLength: a,
+        maxLength: i
+      })
+    ), p.current = 0;
+  }, [r, a, i, e]);
+  const b = P(() => {
+    if (h.current && u.current) {
+      const { clientWidth: c, clientHeight: f } = h.current, m = window.devicePixelRatio || 1;
+      if (u.current.width !== c * m || u.current.height !== f * m) {
+        u.current.width = c * m, u.current.height = f * m, u.current.style.width = `${c}px`, u.current.style.height = `${f}px`;
+        const g = u.current.getContext("2d");
+        g && g.scale(m, m), F({ width: c, height: f });
       }
     }
   }, []);
   A(() => {
-    w();
-    const l = new ResizeObserver(w);
-    return f.current && l.observe(f.current), () => l.disconnect();
-  }, [w]);
-  const b = P((l) => {
-    const h = c.current, u = f.current, d = h == null ? void 0 : h.getContext("2d");
-    if (!h || !u || !d || y.width === 0) return;
-    d.save(), d.setTransform(1, 0, 0, 1, 0, 0), d.clearRect(0, 0, h.width, h.height), d.restore();
-    const v = u.clientWidth, g = u.clientHeight, R = {
-      x: I.current.x / 100 * v,
-      y: I.current.y / 100 * g
-    }, O = Math.max(R.x, v - R.x), $ = Math.max(R.y, g - R.y), k = Math.hypot(O, $);
-    e && (m.current += l * 1e-3), x.current.forEach((D) => {
-      C(
-        d,
+    b();
+    const c = new ResizeObserver(b);
+    return h.current && c.observe(h.current), () => c.disconnect();
+  }, [b]);
+  const v = P((c) => {
+    const f = u.current, m = h.current, g = f == null ? void 0 : f.getContext("2d");
+    if (!f || !m || !g || T.width === 0) return;
+    g.save(), g.setTransform(1, 0, 0, 1, 0, 0), g.clearRect(0, 0, f.width, f.height), g.restore();
+    const $ = m.clientWidth, k = m.clientHeight, E = {
+      x: x.current.x / 100 * $,
+      y: x.current.y / 100 * k
+    }, S = Math.max(E.x, $ - E.x), L = Math.max(E.y, k - E.y), O = Math.hypot(S, L);
+    if (e) {
+      w.current += c;
+      const D = 80 / Math.max(0.1, s);
+      w.current - R.current > D && (p.current = (p.current + 1) % l.current.length, R.current = w.current);
+    }
+    (l.current[p.current] || []).forEach((D) => {
+      N(
+        g,
         D,
-        R,
-        k,
+        E,
+        O,
         o,
         n,
-        v,
-        g,
-        m.current,
-        e,
-        r
+        $,
+        k
       );
     });
-  }, [n, o, e, r, y]);
-  return W(b, e), A(() => {
-    e || b(0);
-  }, [b, e, s, a, i, o, n, y]), /* @__PURE__ */ S(
+  }, [n, o, e, s, T]);
+  return q(v, e), A(() => {
+    e || v(0);
+  }, [v, e, r, a, i, o, n, T]), /* @__PURE__ */ I(
     "div",
     {
-      ref: f,
-      className: `speed-lines-container ${E}`,
+      ref: h,
+      className: `speed-lines-container ${M}`,
       style: {
         width: "100%",
         height: "100%",
         position: "relative",
         overflow: "hidden",
         pointerEvents: "none",
-        ...p
+        ...d
       },
-      children: /* @__PURE__ */ S(
+      children: /* @__PURE__ */ I(
         "canvas",
         {
-          ref: c,
+          ref: u,
           style: { width: "100%", height: "100%", display: "block" }
         }
       )
@@ -199,7 +195,7 @@ const H = ({ text: t = "Manga Effect Placeholder" }) => /* @__PURE__ */ S("div",
   );
 };
 export {
-  j as IrisWipe,
-  H as Placeholder,
-  X as SpeedLines
+  Y as IrisWipe,
+  X as Placeholder,
+  B as SpeedLines
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-manga-effects",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Lightweight React components for manga/anime-style visual effects - iris wipes and speed lines",
   "keywords": [
     "react",