react-manga-effects 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 erutobusiness
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,168 @@
+# 🎬 react-manga-effects
+
+> Add dramatic anime/manga impact effects to your React applications with zero fuss.
+
+![npm](https://img.shields.io/npm/v/@erutobusiness/react-manga-effects)
+![license](https://img.shields.io/npm/l/@erutobusiness/react-manga-effects)
+![size](https://img.shields.io/bundlephobia/minzip/@erutobusiness/react-manga-effects)
+
+**react-manga-effects** provides lightweight, customizable high-impact visual effects common in anime and manga, such as circular iris wipes and dynamic focus lines. Built with TypeScript and optimizing for performance.
+
+## Demo
+
+![Demo](./demo.gif)
+*(Placeholder: Effects demo appearing here)*
+
+## Features
+
+- **🌀 IrisWipe**: Classic anime-style circular transition to open/close scenes.
+- **⚡ SpeedLines**: Dynamic focus/concentration lines (motion lines) to emphasize action or shock.
+- **📘 TypeScript Support**: Fully typed props and exports.
+- **🎈 Lightweight**: Zero runtime dependencies (other than React).
+- **🚀 SSR Compatible**: Works with Next.js, Remix, and Gatsby.
+- **🎨 Highly Customizable**: Control colors, density, speed, easing, and positioning.
+
+## Installation
+
+```bash
+npm install @erutobusiness/react-manga-effects
+# or
+yarn add @erutobusiness/react-manga-effects
+# or
+pnpm add @erutobusiness/react-manga-effects
+```
+
+## Quick Start
+
+Import the components and use them in your React app:
+
+```tsx
+import React, { useState } from 'react';
+import { IrisWipe, SpeedLines } from '@erutobusiness/react-manga-effects';
+
+const App = () => {
+    const [isOpen, setIsOpen] = useState(true);
+
+    return (
+        <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
+            {/* Background Content */}
+            <img src="/my-manga-scene.jpg" alt="Scene" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+
+            {/* Overlay Effects */}
+            <SpeedLines 
+                animated 
+                color="rgba(0,0,0,0.5)" 
+                center={{ x: 50, y: 50 }} 
+            />
+
+            <IrisWipe 
+                isOpen={isOpen} 
+                duration={1000} 
+                center={{ x: 50, y: 50 }}
+                onComplete={() => console.log('Transition Complete')}
+            >
+                {/* Content to be revealed/hidden inside the wipe can go here if needed, 
+                    typically IrisWipe is used as an overlay. */}
+            </IrisWipe>
+            
+            <button 
+                onClick={() => setIsOpen(!isOpen)}
+                style={{ position: 'absolute', bottom: 20, left: 20, zIndex: 100 }}
+            >
+                Toggle Transition
+            </button>
+        </div>
+    );
+};
+
+export default App;
+```
+
+## Components API
+
+### IrisWipe
+
+A circular masking transition effect.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isOpen` | `boolean` | **Required** | `true` to reveal content (open iris), `false` to hide (close iris). |
+| `duration` | `number` | `500` | Animation duration in milliseconds. |
+| `center` | `{ x: number, y: number }` | `{ x: 50, y: 50 }` | Center point of the iris in percentage (0-100). |
+| `easing` | `string` | `'easeInOut'` | CSS transition timing function (e.g., `'linear'`, `'ease-out'`, `'cubic-bezier(...)`'). |
+| `onComplete` | `() => void` | `undefined` | Callback function fired when the transition finishes. |
+| `className` | `string` | `''` | Additional CSS classes for the container. |
+| `style` | `CSSProperties` | `{}` | Inline styles for the container. |
+
+#### Example: Custom Center
+```tsx
+<IrisWipe 
+  isOpen={show} 
+  center={{ x: 80, y: 20 }} // Focus on top-right
+  duration={1200}
+/>
+```
+
+### SpeedLines
+
+Concentration lines typically used to show speed, shock, or intense focus.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `lineCount` | `number` | `60` | Number of lines to draw. Higher values create a denser effect. |
+| `color` | `string` | `'rgba(0, 0, 0, 0.6)'` | Color of the lines. Supports valid CSS colors. |
+| `minLength` | `number` | `10` | Minimum length of lines as a percentage of the container size. |
+| `maxLength` | `number` | `30` | Maximum length of lines as a percentage of the container size. |
+| `innerRadius` | `number` | `0` | Radius of the empty safe zone in the center (percentage). |
+| `center` | `{ x: number, y: number }` | `{ x: 50, y: 50 }` | The convergence point of the lines. |
+| `animated` | `boolean` | `false` | If `true`, lines will animate (opacity pulse/shake). |
+| `animationSpeed`| `number` | `1` | Speed multiplier for the animation. |
+| `className` | `string` | `''` | Additional CSS classes. |
+| `style` | `CSSProperties` | `{}` | Inline styles. |
+
+#### Example: Intense Action
+```tsx
+<SpeedLines 
+  lineCount={120} 
+  color="red" 
+  innerRadius={10} 
+  animated={true}
+  animationSpeed={1.5}
+/>
+```
+
+## Storybook
+
+We use Storybook for development and testing.
+
+1. Clone the repository
+2. Install dependencies: `npm install`
+3. Run Storybook:
+   ```bash
+   npm run storybook
+   ```
+4. Open [http://localhost:6006](http://localhost:6006) to view the components.
+
+## Development
+
+Contributions are welcome!
+
+1. Clone the repo:
+   ```bash
+   git clone https://github.com/erutobusiness/react-manga-effects.git
+   cd react-manga-effects
+   ```
+
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+3. Start development server (Storybook):
+   ```bash
+   npm run storybook
+   ```
+
+## License
+
+MIT © [erutobusiness](https://github.com/erutobusiness)

package/dist/components/IrisWipe/IrisWipe.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IrisWipeProps } from '../../types';
+
+export declare const IrisWipe: React.FC<IrisWipeProps>;

package/dist/components/IrisWipe/index.d.ts

@@ -0,0 +1 @@
+export * from './IrisWipe';

package/dist/components/Placeholder/Placeholder.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+
+export interface PlaceholderProps {
+    text?: string;
+}
+export declare const Placeholder: React.FC<PlaceholderProps>;

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { SpeedLinesProps } from '../../types';
+
+export declare const SpeedLines: React.FC<SpeedLinesProps>;

package/dist/components/SpeedLines/hooks/useAnimationLoop.d.ts

@@ -0,0 +1 @@
+export declare const useAnimationLoop: (callback: (deltaTime: number) => void, isActive: boolean) => void;

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

@@ -0,0 +1 @@
+export * from './SpeedLines';

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

@@ -0,0 +1,13 @@
+export interface Line {
+    angle: number;
+    length: number;
+    width: number;
+    opacity: number;
+    pulseOffset: number;
+    pulseSpeed: number;
+}
+export interface SpeedLinesConfig {
+    lineCount: number;
+    minLength: number;
+    maxLength: number;
+}

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

@@ -0,0 +1,6 @@
+import { Point } from '../../../types';
+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;

package/dist/index.cjs

@@ -0,0 +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=500,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;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/Placeholder/Placeholder';
+export * from './components/IrisWipe';
+export * from './components/SpeedLines';
+export * from './types';

package/dist/index.js

@@ -0,0 +1,205 @@
+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: {
+  padding: "2rem",
+  border: "4px dashed #333",
+  textAlign: "center",
+  fontFamily: "sans-serif",
+  fontWeight: "bold",
+  backgroundColor: "#f0f0f0"
+}, children: t }), j = ({
+  children: t,
+  isOpen: s,
+  center: n = { x: 50, y: 50 },
+  duration: a = 500,
+  easing: i = "easeInOut",
+  onComplete: o,
+  className: e = "",
+  style: r
+}) => {
+  const E = M(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 c = (x) => {
+    x.propertyName === "clip-path" && o && o();
+  }, f = {
+    "--iris-cx": `${n.x}%`,
+    "--iris-cy": `${n.y}%`,
+    "--iris-duration": `${a}ms`,
+    "--iris-easing": p,
+    ...r
+  };
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      ref: E,
+      className: `iris-wipe ${e}`,
+      "data-state": s ? "open" : "closed",
+      style: f,
+      onTransitionEnd: c,
+      children: t
+    }
+  );
+}, W = (t, s) => {
+  const n = M(), a = M(), 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), () => {
+    n.current && cancelAnimationFrame(n.current);
+  }), [s, t]);
+}, q = (t, s, n, a) => {
+  const i = Math.cos(s), o = Math.sin(s);
+  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));
+    } else {
+      const r = (0 - t.x) / i;
+      r >= 0 && (e = Math.min(e, r));
+    }
+  if (Math.abs(o) > 1e-4)
+    if (o > 0) {
+      const r = (a - t.y) / o;
+      r >= 0 && (e = Math.min(e, r));
+    } else {
+      const r = (0 - t.y) / o;
+      r >= 0 && (e = Math.min(e, r));
+    }
+  return e === 1 / 0 ? 0 : e;
+}, z = (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 = ({
+  center: t = { x: 50, y: 50 },
+  lineCount: s = 60,
+  color: n = "rgba(0, 0, 0, 0.6)",
+  minLength: a = 10,
+  // Percentage
+  maxLength: i = 30,
+  // Percentage
+  innerRadius: o = 0,
+  // Percentage
+  animated: e = !1,
+  animationSpeed: r = 1,
+  className: E = "",
+  style: p
+}) => {
+  const c = M(null), f = M(null), x = M([]), I = M(t), m = M(0), [y, T] = F.useState({ width: 0, height: 0 });
+  A(() => {
+    I.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 });
+      }
+    }
+  }, []);
+  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,
+        D,
+        R,
+        k,
+        o,
+        n,
+        v,
+        g,
+        m.current,
+        e,
+        r
+      );
+    });
+  }, [n, o, e, r, y]);
+  return W(b, e), A(() => {
+    e || b(0);
+  }, [b, e, s, a, i, o, n, y]), /* @__PURE__ */ S(
+    "div",
+    {
+      ref: f,
+      className: `speed-lines-container ${E}`,
+      style: {
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        overflow: "hidden",
+        pointerEvents: "none",
+        ...p
+      },
+      children: /* @__PURE__ */ S(
+        "canvas",
+        {
+          ref: c,
+          style: { width: "100%", height: "100%", display: "block" }
+        }
+      )
+    }
+  );
+};
+export {
+  j as IrisWipe,
+  H as Placeholder,
+  X as SpeedLines
+};

package/dist/style.css

@@ -0,0 +1 @@
+.iris-wipe{--iris-cx: 50%;--iris-cy: 50%;--iris-duration: .5s;--iris-easing: ease-in-out;width:100%;height:100%;position:relative;overflow:hidden;will-change:clip-path;transition:clip-path var(--iris-duration) var(--iris-easing)}.iris-wipe[data-state=open]{clip-path:circle(150% at var(--iris-cx) var(--iris-cy))}.iris-wipe[data-state=closed]{clip-path:circle(0% at var(--iris-cx) var(--iris-cy))}

package/dist/test/setup.d.ts

@@ -0,0 +1 @@
+

package/dist/types/index.d.ts

@@ -0,0 +1,68 @@
+import { default as React } from 'react';
+
+export type { PlaceholderProps } from '../components/Placeholder/Placeholder';
+/**
+ * Represents a 2D point with coordinates.
+ */
+export interface Point {
+    /** X coordinate */
+    x: number;
+    /** Y coordinate */
+    y: number;
+}
+/**
+ * A function that maps a time value t (0-1) to an eased value.
+ * @param t - The time value between 0 and 1.
+ * @returns The eased value.
+ */
+export type EasingFunction = (t: number) => number;
+/**
+ * Preset easing names available in the library.
+ */
+export type EasingPreset = 'linear' | 'easeIn' | 'easeOut' | 'easeInOut';
+/**
+ * Props for the IrisWipe component.
+ */
+export interface IrisWipeProps {
+    /** The content to be revealed/hidden */
+    children: React.ReactNode;
+    /** Controls the open/close state of the iris. True for open, False for closed. */
+    isOpen: boolean;
+    /** Center point of the iris (0-100 percentage). Default: { x: 50, y: 50 } */
+    center?: Point;
+    /** Animation duration in milliseconds. Default: 500 */
+    duration?: number;
+    /** Easing function or preset name for the animation. Default: 'easeInOut' */
+    easing?: EasingPreset | EasingFunction;
+    /** Callback fired when animation completes */
+    onComplete?: () => void;
+    /** Additional CSS class for the container */
+    className?: string;
+    /** Additional inline styles for the container */
+    style?: React.CSSProperties;
+}
+/**
+ * Props for the SpeedLines component.
+ */
+export interface SpeedLinesProps {
+    /** Center point of the speed lines origin (0-100 percentage). Default: { x: 50, y: 50 } */
+    center?: Point;
+    /** Number of lines to render. Default: 60 */
+    lineCount?: number;
+    /** Line color (CSS color string). Default: 'rgba(0, 0, 0, 0.6)' */
+    color?: string;
+    /** Minimum line length as percentage of radius (0-100). Default: 10 */
+    minLength?: number;
+    /** Maximum line length as percentage of radius (0-100). Default: 30 */
+    maxLength?: number;
+    /** Radius of the clear center area as percentage of container size (0-100). Default: 0 */
+    innerRadius?: number;
+    /** Whether to animate the lines (subtle pulse). Default: false */
+    animated?: boolean;
+    /** Speed of the pulse animation if animated. Default: 1 */
+    animationSpeed?: number;
+    /** Additional CSS class for the container */
+    className?: string;
+    /** Additional inline styles for the container */
+    style?: React.CSSProperties;
+}

package/dist/utils/easing.d.ts

@@ -0,0 +1,13 @@
+import { EasingFunction } from '../types';
+
+export declare const linear: EasingFunction;
+export declare const easeIn: EasingFunction;
+export declare const easeOut: EasingFunction;
+export declare const easeInOut: EasingFunction;
+export declare const easings: {
+    linear: EasingFunction;
+    easeIn: EasingFunction;
+    easeOut: EasingFunction;
+    easeInOut: EasingFunction;
+};
+export declare const getEasing: (easing?: string | EasingFunction) => EasingFunction;

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "react-manga-effects",
+  "version": "0.1.0",
+  "description": "Lightweight React components for manga/anime-style visual effects - iris wipes and speed lines",
+  "keywords": [
+    "react",
+    "manga",
+    "anime",
+    "effects",
+    "iris-wipe",
+    "speed-lines",
+    "focus-lines",
+    "transition",
+    "animation",
+    "typescript"
+  ],
+  "homepage": "https://github.com/erutobusiness/react-manga-effects#readme",
+  "bugs": {
+    "url": "https://github.com/erutobusiness/react-manga-effects/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/erutobusiness/react-manga-effects.git"
+  },
+  "license": "MIT",
+  "author": "erutobusiness",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-vite": "^8.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "jsdom": "^27.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^8.0.0",
+    "typescript": "^5.2.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.0.0",
+    "vitest": "^1.0.0"
+  }
+}