particle-image 0.1.0

package/README.md

@@ -0,0 +1,66 @@
+# ParticleImage
+
+A high-performance 3D particle morphing library built with Three.js. Transform particles into any image (Path, Base64, or SVG) with smooth GPGPU-powered animations.
+
+**English | [中文](./README.zh_CN.md)**
+
+https://github.com/user-attachments/assets/aeac5d4f-d23a-4751-bc38-550211f4c67e
+
+## Installation
+
+```bash
+npm install particle-image
+```
+
+## Usage
+
+```javascript
+import { ParticleImage } from 'particle-image';
+
+const canvas = document.getElementById('canvas');
+const effect = new ParticleImage(canvas, {
+    theme: 'dark',        // 'dark' | 'light' (default: 'dark')
+    color: '#aecbfa',     // Base particle color
+    density: 200,         // Number of particles (default: 150)
+    particlesScale: 0.6,  // Scale of the morphed image (default: 0.5)
+    cameraZoom: 3.5,      // Camera distance (default: 3.5)
+    duration: 0.8         // Animation duration in seconds (default: 0.6)
+});
+
+// Morph to an image
+await effect.render('./path/to/image.png');
+
+// Scatter particles back to background state
+effect.scatter();
+
+// Clean up resources
+effect.destroy();
+```
+
+## Options
+
+| Property | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `theme` | `string` | `'dark'` | Visual theme (`'dark'` or `'light'`). Affects background and auto-default color. |
+| `color` | `string` | *Varies* | Hex color for particles in scattered/background state. Defaults to light blue for dark theme, dark grey for light theme. |
+| `density` | `number` | `150` | Higher values result in more particles and sharper images. |
+| `particlesScale` | `number` | `0.5` | The target size of the image relative to the canvas. |
+| `cameraZoom` | `number` | `3.5` | Perspective zoom level. Lower values create more wide-angle distortion. |
+| `duration` | `number` | `0.6` | Transition time for `render()` and `scatter()` animations. |
+
+## API
+
+### `render(imageSource)`
+- **Arguments**: `imageSource` (String: URL path, Base64 data, or raw SVG string).
+- **Returns**: `Promise<void>`
+- **Description**: Triggers the particle morphing animation towards the provided image. Uses an internal LRU cache to store processed data for instant repeated calls.
+
+### `scatter()`
+- **Description**: Resets particles back to their original wandering background state.
+
+### `destroy()`
+- **Description**: Stops the animation loop and releases all memory and GPU resources used by the instance. Use this when the component is unmounted to prevent memory leaks.
+
+## License
+
+MIT

package/README.zh_CN.md

@@ -0,0 +1,66 @@
+# ParticleImage
+
+基于 Three.js 开发的高性能 3D 粒子变形特效库。支持将粒子平滑地聚合形成特定的图像（支持 路径、Base64 或 SVG 源码），并带有高性能的着色器动画效果。
+
+**[English](./README.md) | 中文**
+
+https://github.com/user-attachments/assets/aeac5d4f-d23a-4751-bc38-550211f4c67e
+
+## 安装
+
+```bash
+npm install particle-image
+```
+
+## 基础用法
+
+```javascript
+import { ParticleImage } from 'particle-image';
+
+const canvas = document.getElementById('canvas');
+const effect = new ParticleImage(canvas, {
+    theme: 'dark',        // 'dark' | 'light' (默认: 'dark')
+    color: '#aecbfa',     // 粒子基础颜色
+    density: 200,         // 粒子密度/数量 (默认: 150)
+    particlesScale: 0.6,  // 聚合图像的缩放比例 (默认: 0.5)
+    cameraZoom: 3.5,      // 摄像机焦距/透视距离 (默认: 3.5)
+    duration: 0.8         // 动画切换时长，单位秒 (默认: 0.6)
+});
+
+// 变形为指定图片
+await effect.render('./path/to/image.png');
+
+// 将粒子散开回到背景随机漫游状态
+effect.scatter();
+
+// 销毁实例并释放内存
+effect.destroy();
+```
+
+## 配置项 (Options)
+
+| 属性 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| `theme` | `string` | `'dark'` | 视觉主题 (`'dark'` 或 `'light'`)。影响背景色及默认粒子颜色。 |
+| `color` | `string` | *根据主题* | 粒子在随机漫游状态下的 Hex 颜色值。深色主题默认为浅蓝，浅色主题默认为深灰。 |
+| `density` | `number` | `150` | 粒子密集度。值越大粒子越多，形成的图像越清晰。 |
+| `particlesScale` | `number` | `0.5` | 聚合图像相对于画布的大小比例。 |
+| `cameraZoom` | `number` | `3.5` | 透视缩放。值越小广角畸变越强，值越大画面越趋于平整。 |
+| `duration` | `number` | `0.6` | `render()` 和 `scatter()` 状态切换动画的持续时间。 |
+
+## API 接口
+
+### `render(imageSource)`
+- **参数**: `imageSource` (String: URL 路径, Base64 数据, 或原生 SVG 字符串)。
+- **返回值**: `Promise<void>`
+- **说明**: 触发粒子聚合动画。内置 LRU 缓存，相同图片的重复调用将通过缓存瞬时完成。
+
+### `scatter()`
+- **说明**: 触发粒子散开动画，使其回到初始的随机分布背景状态。
+
+### `destroy()`
+- **说明**: 停止动画循环并彻底释放实例占用的所有显存与内存资源。建议在组件销毁时调用，以确保没有内存泄漏。
+
+## 开源协议
+
+MIT

package/dist/particle-image.d.ts

@@ -0,0 +1,73 @@
+
+export interface ParticleImageOptions {
+    /**
+     * Visual theme of the background and default particle color.
+     * @default 'dark'
+     */
+    theme?: 'dark' | 'light';
+
+    /**
+     * Base hex color for particles in scattered or transition state.
+     * Defaults to light blue for dark theme, and dark grey for light theme.
+     */
+    color?: string;
+
+    /**
+     * Scale of the morphed image relative to the canvas.
+     * @default 0.5
+     */
+    particlesScale?: number;
+
+    /**
+     * Particle density. Higher values result in more particles and sharper images.
+     * @default 150
+     */
+    density?: number;
+
+    /**
+     * Perspective zoom level for the 3D camera.
+     * @default 3.5
+     */
+    cameraZoom?: number;
+
+    /**
+     * Duration of the morphing and scattering animations in seconds.
+     * @default 0.6
+     */
+    duration?: number;
+}
+
+/**
+ * ParticleImage is a high-performance 3D particle morphing library built with Three.js.
+ */
+export class ParticleImage {
+    /**
+     * Creates an instance of ParticleImage.
+     * @param canvas The HTMLCanvasElement to render on.
+     * @param options Configuration options for the particle effect.
+     */
+    constructor(canvas: HTMLCanvasElement, options?: ParticleImageOptions);
+
+    /**
+     * The current progress of the morph animation (0 to 1).
+     */
+    progress: number;
+
+    /**
+     * Triggers the morphing animation to the specified image.
+     * Fits the image within the canvas while maintaining aspect ratio.
+     * @param imageSource URL path, Base64 string, or raw SVG string.
+     * @returns A promise that resolves when the image processing is complete and animation starts.
+     */
+    render(imageSource: string): Promise<void>;
+
+    /**
+     * Triggers the scattering animation, returning particles to their wandering background state.
+     */
+    scatter(): void;
+
+    /**
+     * Stops the animation loop and releases all memory and GPU resources.
+     */
+    destroy(): void;
+}

package/dist/particle-image.es.js

@@ -0,0 +1,600 @@
+import * as s from "three";
+import x from "gsap";
+import T from "poisson-disk-sampling";
+const f = `
+// MATHS
+vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
+vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
+float permute(float x){return floor(mod(((x*34.0)+1.0)*x, 289.0));}
+
+vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
+float taylorInvSqrt(float r){return 1.79284291400159 - 0.85373472095314 * r;}
+
+// SIMPLEX NOISES
+// Simplex 2D noise
+float snoise(vec2 v){
+  const vec4 C = vec4(0.211324865405187, 0.366025403784439,
+          -0.577350269189626, 0.024390243902439);
+  vec2 i  = floor(v + dot(v, C.yy) );
+  vec2 x0 = v -   i + dot(i, C.xx);
+  vec2 i1;
+  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+  vec4 x12 = x0.xyxy + C.xxzz;
+  x12.xy -= i1;
+  i = mod(i, 289.0);
+  vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
+  + i.x + vec3(0.0, i1.x, 1.0 ));
+  vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
+    dot(x12.zw,x12.zw)), 0.0);
+  m = m*m ;
+  m = m*m ;
+  vec3 x = 2.0 * fract(p * C.www) - 1.0;
+  vec3 h = abs(x) - 0.5;
+  vec3 ox = floor(x + 0.5);
+  vec3 a0 = x - ox;
+  m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
+  vec3 g;
+  g.x  = a0.x  * x0.x  + h.x  * x0.y;
+  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+  return 130.0 * dot(m, g);
+}
+
+//	Simplex 3D Noise
+float snoise(vec3 v){
+  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  vec3 i  = floor(v + dot(v, C.yyy) );
+  vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min( g.xyz, l.zxy );
+  vec3 i2 = max( g.xyz, l.zxy );
+
+  vec3 x1 = x0 - i1 + 1.0 * C.xxx;
+  vec3 x2 = x0 - i2 + 2.0 * C.xxx;
+  vec3 x3 = x0 - 1. + 3.0 * C.xxx;
+
+  i = mod(i, 289.0 );
+  vec4 p = permute( permute( permute(
+            i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+          + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+          + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+  float n_ = 1.0/7.0; 
+  vec3  ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z *ns.z);  
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_ );    
+
+  vec4 x = x_ *ns.x + ns.yyyy;
+  vec4 y = y_ *ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4( x.xy, y.xy );
+  vec4 b1 = vec4( x.zw, y.zw );
+
+  vec4 s0 = floor(b0)*2.0 + 1.0;
+  vec4 s1 = floor(b1)*2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+  vec3 p0 = vec3(a0.xy,h.x);
+  vec3 p1 = vec3(a0.zw,h.y);
+  vec3 p2 = vec3(a1.xy,h.z);
+  vec3 p3 = vec3(a1.zw,h.w);
+
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
+                                dot(p2,x2), dot(p3,x3) ) );
+}
+
+vec4 grad4(float j, vec4 ip){
+  const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);
+  vec4 p,s;
+
+  p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;
+  p.w = 1.5 - dot(abs(p.xyz), ones.xyz);
+  s = vec4(lessThan(p, vec4(0.0)));
+  p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;
+
+  return p;
+}
+
+float snoise(vec4 v){
+  const vec2  C = vec2( 0.138196601125010504, 0.309016994374947451); 
+  vec4 i  = floor(v + dot(v, C.yyyy) );
+  vec4 x0 = v -   i + dot(i, C.xxxx);
+
+  vec4 i0;
+  vec3 isX = step( x0.yzw, x0.xxx );
+  vec3 isYZ = step( x0.zww, x0.yyz );
+  i0.x = isX.x + isX.y + isX.z;
+  i0.yzw = 1.0 - isX;
+  i0.y += isYZ.x + isYZ.y;
+  i0.zw += 1.0 - isYZ.xy;
+  i0.z += isYZ.z;
+  i0.w += 1.0 - isYZ.z;
+
+  vec4 i3 = clamp( i0, 0.0, 1.0 );
+  vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );
+  vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );
+
+  vec4 x1 = x0 - i1 + 1.0 * C.xxxx;
+  vec4 x2 = x0 - i2 + 2.0 * C.xxxx;
+  vec4 x3 = x0 - i3 + 3.0 * C.xxxx;
+  vec4 x4 = x0 - 1.0 + 4.0 * C.xxxx;
+
+  i = mod(i, 289.0);
+  float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);
+  vec4 j1 = permute( permute( permute( permute (
+            i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))
+          + i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))
+          + i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))
+          + i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));
+
+  vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;
+
+  vec4 p0 = grad4(j0,   ip);
+  vec4 p1 = grad4(j1.x, ip);
+  vec4 p2 = grad4(j1.y, ip);
+  vec4 p3 = grad4(j1.z, ip);
+  vec4 p4 = grad4(j1.w, ip);
+
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+  p4 *= taylorInvSqrt(dot(p4,p4));
+
+  vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);
+  vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4)            ), 0.0);
+  m0 = m0 * m0;
+  m1 = m1 * m1;
+  return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))
+              + dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;
+}
+`, S = `
+precision highp float;
+uniform sampler2D uPosition;
+uniform sampler2D uPosRefs;
+uniform sampler2D uPosNearest;
+
+uniform vec2 uMousePos;
+uniform float uTime;
+uniform float uDeltaTime;
+uniform float uProgress;
+uniform float uSize;
+
+vec2 hash( vec2 p ){
+    p = vec2( dot(p,vec2(2127.1,81.17)), dot(p,vec2(1269.5,283.37)) );
+    return fract(sin(p)*43758.5453);
+}
+
+void main() {
+    vec2 simTexCoords = gl_FragCoord.xy / vec2(uSize, uSize);
+    vec4 pFrame = texture2D(uPosition, simTexCoords);
+
+    float scale = pFrame.z;
+    float velocity = pFrame.w;
+    vec2 refPos = texture2D(uPosRefs, simTexCoords).xy;
+    vec2 nearestPos = texture2D(uPosNearest, simTexCoords).xy;
+    float seed = hash(simTexCoords).x;
+    float seed2 = hash(simTexCoords).y;
+
+    float time = uTime * .5;
+    float lifeEnd = 3. + sin(seed2 * 100.) * 1.;
+    float lifeTime = mod((seed * 100.) + time, lifeEnd);
+
+    vec2 disp = vec2(0., 0.);
+    vec2 pos = pFrame.xy;
+
+    vec2 targetPos = mix(refPos, nearestPos, uProgress);
+
+    vec2 direction = normalize(targetPos - pos);
+    float dist = length(targetPos - pos);
+    
+    float moveSpeed = mix(0.015, 0.03, uProgress); 
+    float distStrength = smoothstep(0.0, 0.2, dist);
+    
+    if(dist > 0.002){
+        pos += direction * moveSpeed * distStrength;
+    }
+
+    if(lifeTime < .01){
+        pos = refPos;
+        pFrame.xy = refPos;
+        scale = 0.;
+    }
+
+    float targetScale = smoothstep(.01, 0.5, lifeTime) - smoothstep(0.5, 1., lifeTime/lifeEnd);
+    targetScale += smoothstep(0.1, 0., smoothstep(0.001, .1, dist)) * 1.5 * uProgress;
+
+    float scaleDiff = targetScale - scale;
+    scaleDiff *= .1;
+    scale += scaleDiff;
+
+    float distRadius = 0.15;
+    vec2 finalPos = pos + (disp * smoothstep(0.001, distRadius, dist));
+    vec2 diff = finalPos - pFrame.xy;
+    diff *= .2;
+
+    velocity = smoothstep(distRadius, .001, dist) * uProgress;
+
+    vec4 frame = vec4(pFrame.xy + diff, scale, velocity);
+    gl_FragColor = frame;
+}
+`, C = `
+precision highp float;
+attribute vec4 seeds;
+
+uniform sampler2D uPosition;
+uniform float uTime;
+uniform float uParticleScale;
+uniform float uPixelRatio;
+uniform int uColorScheme;
+uniform float uProgress;
+uniform float uPulseProgress;
+
+varying vec4 vSeeds;
+varying float vVelocity;
+varying vec2 vLocalPos;
+varying vec2 vScreenPos;
+varying float vScale;
+varying vec2 vUv;
+
+// NOISE_SHADER_CHUNK will be prepended manually
+
+void main() {
+    vUv = uv;
+
+    vec4 pos = texture2D(uPosition, uv);
+    vSeeds = seeds;
+
+    float noiseX = snoise(vec3( vec2(pos.xy * 10.), uTime * .2 + 100.));
+    float noiseY = snoise(vec3( vec2(pos.xy * 10.), uTime * .2));
+
+    float noiseX2 = snoise(vec3( vec2(pos.xy * .5), uTime * .15 + 45.));
+    float noiseY2 = snoise(vec3( vec2(pos.xy * .5), uTime * .15 + 87.));
+
+    float cDist = length(pos.xy) * 1.;
+    float progress = uPulseProgress;
+    float t = smoothstep(progress - .25, progress, cDist) - smoothstep(progress, progress + .25, cDist);
+    t *= smoothstep(1., .0, cDist);
+    pos.xy *= 1. + (t * .02);
+
+    float dist = smoothstep(0., 0.9, pos.w);
+    dist = mix(0., dist, uProgress);
+
+    pos.y += noiseY * 0.005 * dist;
+    pos.x += noiseX * 0.005 * dist;
+    pos.y += noiseY2 * 0.02;
+    pos.x += noiseX2 * 0.02;
+
+    vVelocity = pos.w;
+    vScale = pos.z;
+    vLocalPos = pos.xy;
+    vec4 viewSpace  = modelViewMatrix * vec4(vec3(pos.xy, 0.), 1.0);
+
+    gl_Position = projectionMatrix * viewSpace;
+    vScreenPos = gl_Position.xy;
+
+    float minScale = .25;
+    minScale += float(uColorScheme) * .75;
+
+    gl_PointSize = ((vScale * 7.) * (uPixelRatio * 0.5) * uParticleScale) + (minScale * uPixelRatio);
+}
+`, R = `
+precision highp float;
+
+varying vec4 vSeeds;
+varying vec2 vScreenPos;
+varying vec2 vLocalPos;
+varying float vScale;
+varying float vVelocity;
+varying vec2 vUv;
+
+uniform vec3 uColor;
+
+uniform vec2 uMousePos;
+uniform vec2 uRez;
+
+uniform float uAlpha;
+uniform float uTime;
+uniform sampler2D uColorTex;
+uniform float uProgress;
+
+uniform int uColorScheme;
+
+// NOISE_SHADER_CHUNK will be prepended manually
+
+#define PI 3.1415926535897932384626433832795
+
+void main() {
+    float uBorderSize = 0.2;
+    float ratio = uRez.x / uRez.y;
+
+    vec2 uv = gl_PointCoord.xy - 0.5;
+    uv.y *= -1.;
+
+    float h = 0.5; 
+    vec3 gradientColor = mix(uColor, uColor * 0.8, vVelocity);
+    
+    vec3 imgColor = texture2D(uColorTex, vUv).rgb;
+    vec3 color = mix(gradientColor, imgColor, uProgress);
+
+    float dist = length(uv);
+
+    float dr = .5;
+    float t = smoothstep(dr+(uBorderSize + .0001), dr-uBorderSize, dist);
+    t = clamp(t, 0., 1.);
+
+    float disc = smoothstep(.5, .45, dist);
+
+    float a = uAlpha * disc * smoothstep(0.1, 0.2, vScale);
+
+    if(a < 0.01){
+        discard;
+    }
+
+    color = clamp(color, 0., 1.);
+    // For light mode, we want the particles to be darker when scattered
+    // To improve dot visibility in light mode, we use uColor directly when not hovering
+    vec3 finalCol = mix(color, uColor, float(uColorScheme) * (1.0 - uProgress));
+    
+    gl_FragColor = vec4(finalCol, clamp(a, 0., 1.));
+
+    #ifdef SRGB_TRANSFER
+        gl_FragColor = sRGBTransferOETF( gl_FragColor );
+    #endif
+}
+`, y = `(function(){"use strict";self.onmessage=function(w){const{imageData:t,pointsBase:r,density:q,width:g,height:p}=w.data,m=g/2,x=p/2,a=[],M=2;for(let n=0;n<t.height;n+=M)for(let e=0;e<t.width;e+=M){const l=Math.round(e),d=Math.round(n),c=(l+d*t.width)*4,s=t.data[c]/255,i=t.data[c+1]/255,h=t.data[c+2]/255,o=t.data[c+3]/255,y=(1-(.2126*s+.7152*i+.0722*h))*o;y>.1&&Math.random()<y*1.5&&a.push([e,n])}if(a.length===0)for(let n=0;n<r.length;n++)a.push([Math.random()*g,Math.random()*p]);const f=[],u=[],b=r.length,D=a.length;for(let n=0;n<b;n++){const e=r[n][0],l=r[n][1];let d=-1,c=1/0;for(let s=0;s<D;s++){const i=a[s][0]-e,h=a[s][1]-l,o=i*i+h*h;o<c&&(c=o,d=s)}if(d!==-1){const s=a[d];f.push(s[0]-m,s[1]-x);const i=Math.round(s[0]),h=Math.round(s[1]),o=(i+h*t.width)*4;u.push(t.data[o]/255,t.data[o+1]/255,t.data[o+2]/255,t.data[o+3]/255)}else f.push(e-m,l-x),u.push(0,0,0,0)}self.postMessage({nearestPoints:f,nearestColors:u})}})();
+`, g = typeof self < "u" && self.Blob && new Blob(["(self.URL || self.webkitURL).revokeObjectURL(self.location.href);", y], { type: "text/javascript;charset=utf-8" });
+function D(p) {
+  let e;
+  try {
+    if (e = g && (self.URL || self.webkitURL).createObjectURL(g), !e) throw "";
+    const t = new Worker(e, {
+      name: p?.name
+    });
+    return t.addEventListener("error", () => {
+      (self.URL || self.webkitURL).revokeObjectURL(e);
+    }), t;
+  } catch {
+    return new Worker(
+      "data:text/javascript;charset=utf-8," + encodeURIComponent(y),
+      {
+        name: p?.name
+      }
+    );
+  }
+}
+class M {
+  constructor(e = 10, t = null) {
+    this.limit = e, this.onDispose = t, this.cache = /* @__PURE__ */ new Map();
+  }
+  get(e) {
+    if (!this.cache.has(e)) return null;
+    const t = this.cache.get(e);
+    return this.cache.delete(e), this.cache.set(e, t), t;
+  }
+  set(e, t) {
+    if (this.cache.has(e))
+      this.cache.delete(e);
+    else if (this.cache.size >= this.limit) {
+      const i = this.cache.keys().next().value, n = this.cache.get(i);
+      this.onDispose && this.onDispose(n), this.cache.delete(i);
+    }
+    this.cache.set(e, t);
+  }
+  clear() {
+    if (this.onDispose)
+      for (let e of this.cache.values())
+        this.onDispose(e);
+    this.cache.clear();
+  }
+}
+class b {
+  constructor(e) {
+    this.parent = e, this.renderer = e.renderer, this.camera = e.camera, this.lastTime = 0, this.everRendered = !1, this.size = 256, this.length = this.size * this.size, this.colorScheme = e.theme === "dark" ? 0 : 1, this.particleScale = this.renderer.domElement.width / e.pixelRatio / 2e3 * e.particlesScale, this.worker = new D(), this.initBase();
+  }
+  initBase() {
+    const e = (o, m, d, u, v) => (o - m) * (v - u) / (d - m) + u, t = new T({
+      shape: [this.parent.width, this.parent.height],
+      minDistance: e(this.parent.density, 0, 300, 10, 2),
+      maxDistance: e(this.parent.density, 0, 300, 11, 3),
+      tries: 15
+    });
+    this.pointsBaseData = t.fill(), this.pointsData = [];
+    const i = this.parent.width / 2, n = this.parent.height / 2;
+    for (let o = 0; o < this.pointsBaseData.length; o++)
+      this.pointsData.push(this.pointsBaseData[o][0] - i, this.pointsBaseData[o][1] - n);
+    this.count = this.pointsData.length / 2, this.posTex = this.createDataTexturePosition(this.pointsData), this.posNearestTex = this.createDataTexturePosition(this.pointsData), this.colorNearestTex = this.createDataTextureColor(new Float32Array(this.length * 4)), this.rt1 = this.createRenderTarget(), this.rt2 = this.createRenderTarget(), this.simScene = new s.Scene(), this.simCamera = new s.OrthographicCamera(-1, 1, 1, -1, 0, 1), this.simMaterial = new s.ShaderMaterial({
+      uniforms: {
+        uPosition: { value: this.posTex },
+        uPosRefs: { value: this.posTex },
+        uPosNearest: { value: this.posNearestTex },
+        uMousePos: { value: new s.Vector2(0, 0) },
+        uTime: { value: 0 },
+        uDeltaTime: { value: 0 },
+        uProgress: { value: 0 },
+        uSize: { value: this.size }
+      },
+      vertexShader: `
+                void main() {
+                    gl_Position = vec4(position, 1.0);
+                }
+            `,
+      fragmentShader: S
+    });
+    const c = new s.Mesh(new s.PlaneGeometry(2, 2), this.simMaterial);
+    this.simScene.add(c);
+    const a = new s.BufferGeometry(), l = new Float32Array(this.count * 3), r = new Float32Array(this.count * 2), h = new Float32Array(this.count * 4);
+    for (let o = 0; o < this.count; o++) {
+      let m = o % this.size, d = Math.floor(o / this.size);
+      r[o * 2] = m / this.size, r[o * 2 + 1] = d / this.size, h[o * 4] = Math.random(), h[o * 4 + 1] = Math.random(), h[o * 4 + 2] = Math.random(), h[o * 4 + 3] = Math.random();
+    }
+    a.setAttribute("position", new s.BufferAttribute(l, 3)), a.setAttribute("uv", new s.BufferAttribute(r, 2)), a.setAttribute("seeds", new s.BufferAttribute(h, 4)), this.renderMaterial = new s.ShaderMaterial({
+      uniforms: {
+        uPosition: { value: this.posTex },
+        uColorTex: { value: this.colorNearestTex },
+        uTime: { value: 0 },
+        uColor: { value: new s.Color(this.parent.color) },
+        uAlpha: { value: 1 },
+        uProgress: { value: 0 },
+        uPulseProgress: { value: 0 },
+        uMousePos: { value: new s.Vector2(0, 0) },
+        uRez: { value: new s.Vector2(this.renderer.domElement.width, this.renderer.domElement.height) },
+        uParticleScale: { value: this.particleScale },
+        uPixelRatio: { value: this.parent.pixelRatio },
+        uColorScheme: { value: this.colorScheme }
+      },
+      vertexShader: f + `
+` + C,
+      fragmentShader: f + `
+` + R,
+      transparent: !0,
+      depthTest: !1,
+      depthWrite: !1
+    }), this.mesh = new s.Points(a, this.renderMaterial), this.parent.threeScene.add(this.mesh), this.resize();
+  }
+  createDataTextureColor(e) {
+    const t = e instanceof Float32Array, i = t ? e : new Float32Array(this.length * 4);
+    t || i.set(e);
+    const n = new s.DataTexture(i, this.size, this.size, s.RGBAFormat, s.FloatType);
+    return n.needsUpdate = !0, n;
+  }
+  createDataTexturePosition(e) {
+    const t = new Float32Array(this.length * 4), i = e.length / 2, n = 1 / (this.parent.width / 2), c = 1 / (this.parent.height / 2);
+    for (let l = 0; l < i; l++) {
+      let r = l * 4;
+      t[r + 0] = e[l * 2 + 0] * n, t[r + 1] = e[l * 2 + 1] * c, t[r + 2] = 0, t[r + 3] = 0;
+    }
+    const a = new s.DataTexture(t, this.size, this.size, s.RGBAFormat, s.FloatType);
+    return a.needsUpdate = !0, a;
+  }
+  createRenderTarget() {
+    return new s.WebGLRenderTarget(this.size, this.size, {
+      wrapS: s.RepeatWrapping,
+      wrapT: s.RepeatWrapping,
+      minFilter: s.NearestFilter,
+      magFilter: s.NearestFilter,
+      format: s.RGBAFormat,
+      type: s.HalfFloatType,
+      depthBuffer: !1,
+      stencilBuffer: !1
+    });
+  }
+  async processImage(e) {
+    return new Promise((t) => {
+      this.worker.onmessage = (i) => {
+        const n = this.createDataTexturePosition(i.data.nearestPoints), c = this.createDataTextureColor(i.data.nearestColors);
+        t({ posTex: n, colorTex: c });
+      }, this.worker.postMessage({
+        imageData: {
+          data: e.data,
+          width: e.width,
+          height: e.height
+        },
+        pointsBase: this.pointsBaseData,
+        density: this.parent.density,
+        width: this.parent.width,
+        height: this.parent.height
+      }, [e.data.buffer]);
+    });
+  }
+  update() {
+    const e = this.parent.clock.getElapsedTime(), t = e - this.lastTime;
+    this.lastTime = e, this.simMaterial.uniforms.uPosition.value = this.everRendered ? this.rt1.texture : this.posTex, this.simMaterial.uniforms.uTime.value = e, this.simMaterial.uniforms.uDeltaTime.value = t, this.simMaterial.uniforms.uProgress.value = this.parent.progress, this.renderer.setRenderTarget(this.rt2), this.renderer.render(this.simScene, this.simCamera), this.renderer.setRenderTarget(null), this.renderMaterial.uniforms.uPosition.value = this.rt2.texture, this.renderMaterial.uniforms.uTime.value = e, this.renderMaterial.uniforms.uProgress.value = this.parent.progress;
+    let i = this.rt1;
+    this.rt1 = this.rt2, this.rt2 = i, this.everRendered = !0;
+  }
+  resize() {
+    this.renderMaterial.uniforms.uRez.value.set(this.renderer.domElement.width, this.renderer.domElement.height), this.renderMaterial.uniforms.uPixelRatio.value = this.parent.pixelRatio;
+    const e = this.camera.fov, t = this.camera.position.z, i = 2 * Math.tan(e * Math.PI / 180 / 2) * t, n = i * (this.renderer.domElement.width / this.renderer.domElement.height);
+    this.mesh.scale.set(n / 2, -i / 2, 1);
+  }
+  destroy() {
+    this.worker.terminate(), this.mesh.geometry.dispose(), this.mesh.material.dispose(), this.rt1.dispose(), this.rt2.dispose(), this.posTex.dispose(), this.posNearestTex.dispose(), this.colorNearestTex.dispose(), this.simMaterial.dispose(), this.renderMaterial.dispose();
+  }
+}
+class B {
+  constructor(e, t = {}) {
+    this.canvas = e, this.container = e.parentElement, this.options = t, this.width = e.clientWidth || 500, this.height = e.clientHeight || 500, this.theme = t.theme || "dark", this.particlesScale = t.particlesScale || 0.5, this.density = t.density || 150, this.cameraZoom = t.cameraZoom || 3.5, this.color = t.color || (this.theme === "dark" ? "#aecbfa" : "#121212"), this.pixelRatio = window.devicePixelRatio, this.duration = t.duration || 0.6, this.progress = 0, this.clock = new s.Clock(), this.lru = new M(10, (i) => {
+      i.posTex && i.posTex.dispose(), i.colorTex && i.colorTex.dispose();
+    }), this.initThree(), this.manager = new b(this), this.animate = this.animate.bind(this), requestAnimationFrame(this.animate);
+  }
+  initThree() {
+    this.threeScene = new s.Scene(), this.threeScene.background = new s.Color(this.theme === "dark" ? 1184274 : 16777215), this.camera = new s.PerspectiveCamera(40, this.canvas.clientWidth / this.canvas.clientHeight, 0.1, 1e3), this.camera.position.z = this.cameraZoom, this.renderer = new s.WebGLRenderer({
+      canvas: this.canvas,
+      antialias: !0,
+      alpha: !0,
+      powerPreference: "high-performance"
+    }), this.renderer.setPixelRatio(this.pixelRatio), this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight);
+  }
+  async getImageData(e) {
+    return new Promise((t, i) => {
+      let n = new Image();
+      n.crossOrigin = "anonymous";
+      let c = e, a = !1;
+      if (e.startsWith("<svg")) {
+        const r = new Blob([e], { type: "image/svg+xml;charset=utf-8" });
+        c = URL.createObjectURL(r), a = !0;
+      }
+      const l = () => {
+        a && URL.revokeObjectURL(c), n.onload = null, n.onerror = null, n = null;
+      };
+      n.onload = () => {
+        const r = document.createElement("canvas");
+        r.width = this.width, r.height = this.height;
+        const h = r.getContext("2d"), o = this.width, m = this.height;
+        let d = n.width, u = n.height;
+        const v = Math.min(o / n.width, m / n.height);
+        v < 1 && (d = n.width * v, u = n.height * v);
+        const w = (o - d) / 2, z = (m - u) / 2;
+        h.drawImage(n, w, z, d, u);
+        const P = h.getImageData(0, 0, this.width, this.height);
+        r.width = 0, r.height = 0, t(P), l();
+      }, n.onerror = (r) => {
+        i(r), l();
+      }, n.src = c;
+    });
+  }
+  async render(e) {
+    if (!e) return;
+    const t = this.lru.get(e);
+    let i, n;
+    if (t)
+      i = t.posTex, n = t.colorTex;
+    else {
+      const c = await this.getImageData(e), a = await this.manager.processImage(c);
+      i = a.posTex, n = a.colorTex, this.lru.set(e, { posTex: i, colorTex: n });
+    }
+    this.manager.posNearestTex = i, this.manager.colorNearestTex = n, this.manager.simMaterial.uniforms.uPosNearest.value = i, this.manager.renderMaterial.uniforms.uColorTex.value = n, x.to(this, { progress: 1, duration: this.duration, ease: "power3.inOut" });
+  }
+  scatter() {
+    x.to(this, { progress: 0, duration: this.duration, ease: "power3.inOut" });
+  }
+  animate() {
+    this.renderer && (this.manager.update(), this.renderer.render(this.threeScene, this.camera), requestAnimationFrame(this.animate));
+  }
+  destroy() {
+    this.lru.clear(), this.manager.destroy(), this.renderer.dispose(), this.renderer = null;
+  }
+}
+export {
+  B as ParticleImage
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "particle-image",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Particle image effect using three.js",
+  "keywords": [
+    "threejs",
+    "particles",
+    "morphing",
+    "3d",
+    "webgl",
+    "animation",
+    "gsap",
+    "particle-effect",
+    "image-to-particles",
+    "canvas",
+    "glsl",
+    "shaders",
+    "gpgpu",
+    "vfx"
+  ],
+  "author": "shjyh",
+  "license": "MIT",
+  "main": "dist/particle-image.es.js",
+  "module": "dist/particle-image.es.js",
+  "types": "dist/particle-image.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/particle-image.es.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepublishOnly": "echo 'Ready to publish'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shjyh/ParticleImage.git"
+  },
+  "bugs": {
+    "url": "https://github.com/shjyh/ParticleImage/issues"
+  },
+  "homepage": "https://github.com/shjyh/ParticleImage#readme",
+  "dependencies": {
+    "gsap": "^3.14.2",
+    "poisson-disk-sampling": "^2.3.1",
+    "three": "^0.182.0"
+  },
+  "devDependencies": {
+    "vite": "^7.3.1"
+  }
+}