@johnfmorton/some-shade 0.1.0-beta.1 → 0.1.0-beta.11

package/CHANGELOG.md

@@ -0,0 +1,63 @@
+# Changelog
+
+## 0.1.0-beta.11
+
+- Add grid angle option to dot grid effect (`angle` attribute)
+- Add loading blur option (`loading-blur` attribute) — source image displays blurred until the WebGL effect resolves
+- Add `replayTransition()` public method for programmatically replaying the loading transition
+
+## 0.1.0-beta.10
+
+- **BREAKING:** Remove pixel sort effect (`pixel-sort`, `threshold`, `sort-direction`, `sort-span` attributes removed)
+
+## 0.1.0-beta.9
+
+- Fade transition when processed snapshot replaces the source image on scroll
+
+## 0.1.0-beta.8
+
+- Fix mobile crashes when using multiple instances on one page
+- Render-then-snapshot architecture: WebGL context is created, used, and torn down per render instead of held persistently
+- Cap devicePixelRatio at 2 to reduce canvas memory on 3×+ mobile screens
+- Global render queue serialises WebGL across all instances (at most one context at a time)
+- IntersectionObserver defers rendering for off-screen instances until they scroll into view
+
+## 0.1.0-beta.7
+
+- Guard custom element registration against double-define
+
+## 0.1.0-beta.6
+
+- Publish as `latest` dist-tag to fix missing sidebar links (Repository, Homepage, Issues) on npmjs.com
+
+## 0.1.0-beta.5
+
+- Add license, repository, homepage, and bugs fields to package.json
+- Add CHANGELOG.md and LICENSE to published package
+
+## 0.1.0-beta.4
+
+- Add publish scripts to monorepo root
+- Add license field to package.json (pending)
+
+## 0.1.0-beta.3
+
+- Include README in published npm package
+- Update all docs to use scoped package name `@johnfmorton/some-shade`
+
+## 0.1.0-beta.1
+
+- Rename package to `@johnfmorton/some-shade`
+- Display package name and version in playground header
+- Initial publish to npm
+
+## 0.1.0 (unpublished)
+
+- CMYK halftone shader effect with per-channel angle control
+- Duotone halftone shader effect with custom color
+- Pixel sort shader effect with configurable direction and threshold
+- Dot grid shader effect with customizable background color
+- Custom effect registration API (`register`, `get`, `list`)
+- WebGL fallback to plain `<img>` when unavailable
+- React playground with live controls and code export
+- GitHub Pages deployment for playground

package/README.md

@@ -0,0 +1,217 @@
+# Some Shade
+
+WebGL image effects as a web component. Drop `<some-shade-image>` into any page to apply shader-based visual effects to images.
+
+## Install
+
+```bash
+npm install @johnfmorton/some-shade
+```
+
+`lit` is a dependency and will be installed automatically.
+
+## Quick Start
+
+```html
+<script type="module">
+  import '@johnfmorton/some-shade';
+</script>
+
+<some-shade-image
+  src="photo.jpg"
+  effect="halftone-cmyk"
+  dot-radius="4"
+  grid-size="8"
+></some-shade-image>
+```
+
+## Effects
+
+### CMYK Halftone
+
+Simulates a CMYK halftone print screen with per-channel angle control.
+
+```html
+<some-shade-image
+  src="photo.jpg"
+  effect="halftone-cmyk"
+  dot-radius="4"
+  grid-size="8"
+  angle-c="15"
+  angle-m="75"
+  angle-y="0"
+  angle-k="45"
+></some-shade-image>
+```
+
+### Duotone Halftone
+
+Halftone effect using a single custom color.
+
+```html
+<some-shade-image
+  src="photo.jpg"
+  effect="halftone-duotone"
+  dot-radius="4"
+  grid-size="8"
+  duotone-color="#0099cc"
+  angle="0"
+></some-shade-image>
+```
+
+### Dot Grid
+
+Renders the image as a grid of dots with a customizable background.
+
+```html
+<some-shade-image
+  src="photo.jpg"
+  effect="dot-grid"
+  dot-radius="4"
+  grid-size="8"
+  dot-offset-x="0.5"
+  dot-offset-y="0.5"
+  bg-color="#ffffff"
+></some-shade-image>
+```
+
+## Attributes Reference
+
+| Attribute | Type | Default | Effects |
+|-----------|------|---------|---------|
+| `src` | string | `""` | all |
+| `effect` | string | `"halftone-cmyk"` | all |
+| `dot-radius` | number | `4` | halftone-cmyk, halftone-duotone, dot-grid |
+| `grid-size` | number | `8` | halftone-cmyk, halftone-duotone, dot-grid |
+| `angle-c` | number | `15` | halftone-cmyk |
+| `angle-m` | number | `75` | halftone-cmyk |
+| `angle-y` | number | `0` | halftone-cmyk |
+| `angle-k` | number | `45` | halftone-cmyk |
+| `duotone-color` | string (hex) | `"#0099cc"` | halftone-duotone |
+| `angle` | number | `0` | halftone-duotone |
+| `dot-offset-x` | number | `0.5` | dot-grid |
+| `dot-offset-y` | number | `0.5` | dot-grid |
+| `bg-color` | string (hex) | `"#ffffff"` | dot-grid |
+
+## Framework Usage
+
+The component works in any framework. Import `@johnfmorton/some-shade` once to register the custom element, then use `<some-shade-image>` in your templates.
+
+### React
+
+```tsx
+import '@johnfmorton/some-shade';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'some-shade-image': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement> & {
+          src?: string;
+          effect?: string;
+          'dot-radius'?: number;
+          'grid-size'?: number;
+        },
+        HTMLElement
+      >;
+    }
+  }
+}
+
+function App() {
+  return (
+    <some-shade-image
+      src="photo.jpg"
+      effect="halftone-cmyk"
+      dot-radius={4}
+      grid-size={8}
+    />
+  );
+}
+```
+
+## Custom Effects
+
+Register your own shader effects using the `register()` API:
+
+```ts
+import { register } from '@johnfmorton/some-shade';
+
+register({
+  name: 'my-effect',
+  vertexShader: `
+    attribute vec2 a_position;
+    attribute vec2 a_texCoord;
+    varying vec2 v_texCoord;
+    void main() {
+      gl_Position = vec4(a_position, 0.0, 1.0);
+      v_texCoord = a_texCoord;
+    }
+  `,
+  fragmentShader: `
+    precision mediump float;
+    uniform sampler2D u_image;
+    varying vec2 v_texCoord;
+    uniform float u_intensity;
+    void main() {
+      gl_FragColor = texture2D(u_image, v_texCoord) * u_intensity;
+    }
+  `,
+  uniforms: [
+    { name: 'u_intensity', type: 'float', default: 1.0, attribute: 'intensity' },
+  ],
+});
+```
+
+Then use it:
+
+```html
+<some-shade-image src="photo.jpg" effect="my-effect" intensity="0.8"></some-shade-image>
+```
+
+### `EffectDefinition`
+
+```ts
+interface EffectDefinition {
+  name: string;
+  fragmentShader: string;
+  vertexShader: string;
+  uniforms: UniformDefinition[];
+}
+
+interface UniformDefinition {
+  name: string;
+  type: 'float' | 'vec2' | 'vec3' | 'vec4';
+  default: number | number[];
+  attribute?: string;
+}
+```
+
+## Programmatic API
+
+```ts
+import { register, get, list, SomeShadeImage } from '@johnfmorton/some-shade';
+
+register(effectDef);            // Register a custom effect
+get('halftone-cmyk');           // Get an effect definition by name
+list();                         // List all registered effect names
+```
+
+`SomeShadeImage` is the Lit component class, exported for subclassing or direct use.
+
+## Browser Support
+
+Requires WebGL. If WebGL is unavailable, the component falls back to a plain `<img>` element.
+
+## Development
+
+```bash
+pnpm install
+pnpm dev            # Watch mode (component + playground)
+pnpm build          # Build everything
+pnpm build:component # Build web component only
+```
+
+## License
+
+ISC

package/dist/index.d.ts

@@ -28,34 +28,31 @@ export declare class SomeShadeImage extends LitElement {
     angleK: number;
     duotoneColor: string;
     angle: number;
-    threshold: number;
-    sortDirection: number;
-    sortSpan: number;
     dotOffsetX: number;
     dotOffsetY: number;
     bgColor: string;
+    loadingBlur: number;
     private _webglAvailable;
-    private _canvas;
-    private _gl;
-    private _programInfo;
-    private _textureInfo;
-    private _quadBuffer;
-    private _currentEffect;
+    private _snapshotUrl;
+    private _snapshotLoaded;
     private _image;
-    private _resizeObserver;
+    private _observer;
+    private _visible;
+    private _needsRender;
     render(): TemplateResult<1>;
-    firstUpdated(): void;
+    connectedCallback(): void;
     updated(changed: PropertyValues): void;
     disconnectedCallback(): void;
     private _loadImage;
-    private _uploadTexture;
-    private _sizeCanvas;
-    private _handleResize;
-    private _setupProgram;
+    private _scheduleRender;
+    private _renderEffect;
+    private _onSnapshotLoad;
+    /** Hide the rendered snapshot momentarily, then fade it back in.
+     *  Useful for previewing the loading-blur transition. */
+    replayTransition(delay?: number): void;
+    private _revokeSnapshot;
     private _getUniformValues;
     private _parseHexColor;
-    private _renderFrame;
-    private _cleanup;
 }
 
 export declare interface UniformDefinition {

package/dist/some-shade.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("lit"),i=require("lit/decorators.js");function y(e){return e.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function p(e,t,o){const a=e.createShader(t);if(!a)throw new Error("Failed to create shader");if(e.shaderSource(a,o),e.compileShader(a),!e.getShaderParameter(a,e.COMPILE_STATUS)){const n=e.getShaderInfoLog(a);throw e.deleteShader(a),new Error(`Shader compile error: ${n}`)}return a}function x(e,t,o){const a=p(e,e.VERTEX_SHADER,t),n=p(e,e.FRAGMENT_SHADER,o),r=e.createProgram();if(!r)throw new Error("Failed to create program");if(e.attachShader(r,a),e.attachShader(r,n),e.linkProgram(r),!e.getProgramParameter(r,e.LINK_STATUS)){const f=e.getProgramInfoLog(r);throw e.deleteProgram(r),new Error(`Program link error: ${f}`)}e.deleteShader(a),e.deleteShader(n);const u=new Map,b=e.getProgramParameter(r,e.ACTIVE_ATTRIBUTES);for(let f=0;f<b;f++){const l=e.getActiveAttrib(r,f);l&&u.set(l.name,e.getAttribLocation(r,l.name))}const _=new Map,S=e.getProgramParameter(r,e.ACTIVE_UNIFORMS);for(let f=0;f<S;f++){const l=e.getActiveUniform(r,f);if(l){const g=e.getUniformLocation(r,l.name);g&&_.set(l.name,g)}}return{program:r,attribLocations:u,uniformLocations:_}}function E(e,t,o){for(const[a,n]of Object.entries(o)){const r=t.uniformLocations.get(a);if(r){if(typeof n=="number")e.uniform1f(r,n);else if(Array.isArray(n))switch(n.length){case 2:e.uniform2fv(r,n);break;case 3:e.uniform3fv(r,n);break;case 4:e.uniform4fv(r,n);break}}}}function C(e,t){const o=e.createTexture();if(!o)throw new Error("Failed to create texture");return e.bindTexture(e.TEXTURE_2D,o),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),{texture:o,width:t.naturalWidth,height:t.naturalHeight}}function I(e,t){const o=new Float32Array([-1,-1,0,1,1,-1,1,1,-1,1,0,0,1,1,1,0]),a=e.createBuffer();if(!a)throw new Error("Failed to create buffer");e.bindBuffer(e.ARRAY_BUFFER,a),e.bufferData(e.ARRAY_BUFFER,o,e.STATIC_DRAW);const n=4*Float32Array.BYTES_PER_ELEMENT,r=t.attribLocations.get("a_position");r!==void 0&&r!==-1&&(e.enableVertexAttribArray(r),e.vertexAttribPointer(r,2,e.FLOAT,!1,n,0));const u=t.attribLocations.get("a_texCoord");return u!==void 0&&u!==-1&&(e.enableVertexAttribArray(u),e.vertexAttribPointer(u,2,e.FLOAT,!1,n,2*Float32Array.BYTES_PER_ELEMENT)),a}function R(e){e.drawArrays(e.TRIANGLE_STRIP,0,4)}const T=`precision mediump float;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("lit"),u=require("lit/decorators.js");function w(t){return t.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function x(t,e,a){const o=t.createShader(e);if(!o)throw new Error("Failed to create shader");if(t.shaderSource(o,a),t.compileShader(o),!t.getShaderParameter(o,t.COMPILE_STATUS)){const i=t.getShaderInfoLog(o);throw t.deleteShader(o),new Error(`Shader compile error: ${i}`)}return o}function U(t,e,a){const o=x(t,t.VERTEX_SHADER,e),i=x(t,t.FRAGMENT_SHADER,a),n=t.createProgram();if(!n)throw new Error("Failed to create program");if(t.attachShader(n,o),t.attachShader(n,i),t.linkProgram(n),!t.getProgramParameter(n,t.LINK_STATUS)){const d=t.getProgramInfoLog(n);throw t.deleteProgram(n),new Error(`Program link error: ${d}`)}t.deleteShader(o),t.deleteShader(i);const r=new Map,p=t.getProgramParameter(n,t.ACTIVE_ATTRIBUTES);for(let d=0;d<p;d++){const c=t.getActiveAttrib(n,d);c&&r.set(c.name,t.getAttribLocation(n,c.name))}const f=new Map,h=t.getProgramParameter(n,t.ACTIVE_UNIFORMS);for(let d=0;d<h;d++){const c=t.getActiveUniform(n,d);if(c){const _=t.getUniformLocation(n,c.name);_&&f.set(c.name,_)}}return{program:n,attribLocations:r,uniformLocations:f}}function P(t,e,a){for(const[o,i]of Object.entries(a)){const n=e.uniformLocations.get(o);if(n){if(typeof i=="number")t.uniform1f(n,i);else if(Array.isArray(i))switch(i.length){case 2:t.uniform2fv(n,i);break;case 3:t.uniform3fv(n,i);break;case 4:t.uniform4fv(n,i);break}}}}function k(t,e){const a=t.createTexture();if(!a)throw new Error("Failed to create texture");return t.bindTexture(t.TEXTURE_2D,a),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),{texture:a,width:e.naturalWidth,height:e.naturalHeight}}function D(t,e){const a=new Float32Array([-1,-1,0,1,1,-1,1,1,-1,1,0,0,1,1,1,0]),o=t.createBuffer();if(!o)throw new Error("Failed to create buffer");t.bindBuffer(t.ARRAY_BUFFER,o),t.bufferData(t.ARRAY_BUFFER,a,t.STATIC_DRAW);const i=4*Float32Array.BYTES_PER_ELEMENT,n=e.attribLocations.get("a_position");n!==void 0&&n!==-1&&(t.enableVertexAttribArray(n),t.vertexAttribPointer(n,2,t.FLOAT,!1,i,0));const r=e.attribLocations.get("a_texCoord");return r!==void 0&&r!==-1&&(t.enableVertexAttribArray(r),t.vertexAttribPointer(r,2,t.FLOAT,!1,i,2*Float32Array.BYTES_PER_ELEMENT)),o}function O(t){t.drawArrays(t.TRIANGLE_STRIP,0,4)}const z=`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -54,7 +54,7 @@ void main() {
 
   gl_FragColor = vec4(outR, outG, outB, color.a);
 }
-`,h=`attribute vec2 a_position;
+`,y=`attribute vec2 a_position;
 attribute vec2 a_texCoord;
 varying vec2 v_texCoord;
 
@@ -62,7 +62,7 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
   v_texCoord = a_texCoord;
 }
-`,A={name:"halftone-cmyk",fragmentShader:T,vertexShader:h,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_angleC",type:"float",default:15,attribute:"angle-c"},{name:"u_angleM",type:"float",default:75,attribute:"angle-m"},{name:"u_angleY",type:"float",default:0,attribute:"angle-y"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"}]},w=`precision mediump float;
+`,F={name:"halftone-cmyk",fragmentShader:z,vertexShader:y,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_angleC",type:"float",default:15,attribute:"angle-c"},{name:"u_angleM",type:"float",default:75,attribute:"angle-m"},{name:"u_angleY",type:"float",default:0,attribute:"angle-y"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"}]},B=`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -97,76 +97,7 @@ void main() {
 
   gl_FragColor = vec4(result, color.a);
 }
-`,U={name:"halftone-duotone",fragmentShader:w,vertexShader:h,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_duotoneColor",type:"vec3",default:[0,.6,.8],attribute:"duotone-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},P=`precision mediump float;
-
-varying vec2 v_texCoord;
-
-uniform sampler2D u_image;
-uniform vec2 u_resolution;
-uniform float u_threshold;
-uniform float u_direction;
-uniform float u_span;
-
-float brightness(vec3 c) {
-  return dot(c, vec3(0.299, 0.587, 0.114));
-}
-
-void main() {
-  vec2 uv = v_texCoord;
-  vec4 color = texture2D(u_image, uv);
-  float bri = brightness(color.rgb);
-
-  // Boundary pixel — pass through
-  if (bri < u_threshold) {
-    gl_FragColor = color;
-    return;
-  }
-
-  float rad = radians(u_direction);
-  vec2 dir = vec2(cos(rad), sin(rad));
-  vec2 step = dir / u_resolution;
-
-  int spanLen = int(u_span);
-
-  // Walk backward to find span start
-  int backCount = 0;
-  for (int i = 1; i < 256; i++) {
-    if (i >= spanLen) break;
-    vec2 sampleUV = uv - step * float(i);
-    if (sampleUV.x < 0.0 || sampleUV.x > 1.0 || sampleUV.y < 0.0 || sampleUV.y > 1.0) break;
-    float b = brightness(texture2D(u_image, sampleUV).rgb);
-    if (b < u_threshold) break;
-    backCount++;
-  }
-
-  // Walk forward to find span end
-  int fwdCount = 0;
-  for (int i = 1; i < 256; i++) {
-    if (i >= spanLen) break;
-    vec2 sampleUV = uv + step * float(i);
-    if (sampleUV.x < 0.0 || sampleUV.x > 1.0 || sampleUV.y < 0.0 || sampleUV.y > 1.0) break;
-    float b = brightness(texture2D(u_image, sampleUV).rgb);
-    if (b < u_threshold) break;
-    fwdCount++;
-  }
-
-  int totalSpan = backCount + 1 + fwdCount;
-  vec2 spanStartUV = uv - step * float(backCount);
-
-  // Count pixels in span that are darker than current (= rank)
-  int rank = 0;
-  for (int i = 0; i < 256; i++) {
-    if (i >= totalSpan) break;
-    vec2 sampleUV = spanStartUV + step * float(i);
-    float b = brightness(texture2D(u_image, sampleUV).rgb);
-    if (b < bri) rank++;
-  }
-
-  // Resample at sorted position
-  vec2 sortedUV = spanStartUV + step * float(rank);
-  gl_FragColor = texture2D(u_image, sortedUV);
-}
-`,D={name:"pixel-sort",fragmentShader:P,vertexShader:h,uniforms:[{name:"u_threshold",type:"float",default:.5,attribute:"threshold"},{name:"u_direction",type:"float",default:0,attribute:"sort-direction"},{name:"u_span",type:"float",default:64,attribute:"sort-span"}]},k=`precision mediump float;
+`,M={name:"halftone-duotone",fragmentShader:B,vertexShader:y,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_duotoneColor",type:"vec3",default:[0,.6,.8],attribute:"duotone-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},I=`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -176,31 +107,42 @@ uniform float u_dotRadius;
 uniform float u_gridSize;
 uniform vec2 u_dotOffset;
 uniform vec3 u_bgColor;
+uniform float u_angle;
 
 void main() {
   vec2 uv = v_texCoord * u_resolution;
 
-  // Which grid cell this fragment belongs to
-  vec2 cell = floor(uv / u_gridSize);
+  // Rotate grid
+  float rad = radians(u_angle);
+  float s = sin(rad);
+  float c = cos(rad);
+  mat2 rot = mat2(c, -s, s, c);
+  mat2 invRot = mat2(c, s, -s, c);
+  vec2 rotUV = rot * uv;
+
+  // Which grid cell this fragment belongs to (in rotated space)
+  vec2 cell = floor(rotUV / u_gridSize);
 
-  // Cell origin in pixel space
+  // Cell origin in rotated space
   vec2 cellOrigin = cell * u_gridSize;
 
   // Dot center within the cell, shifted by u_dotOffset (0–1 range)
   vec2 dotCenter = cellOrigin + u_dotOffset * u_gridSize;
 
   // 4×4 multi-sample average color across the cell
+  // Sample points are computed in rotated space then un-rotated for texture lookup
   vec3 avg = vec3(0.0);
   for (int y = 0; y < 4; y++) {
     for (int x = 0; x < 4; x++) {
-      vec2 sampleUV = (cellOrigin + (vec2(float(x), float(y)) + 0.5) * (u_gridSize / 4.0)) / u_resolution;
+      vec2 rotSample = cellOrigin + (vec2(float(x), float(y)) + 0.5) * (u_gridSize / 4.0);
+      vec2 sampleUV = (invRot * rotSample) / u_resolution;
       avg += texture2D(u_image, sampleUV).rgb;
     }
   }
   avg /= 16.0;
 
-  // Wrapped (toroidal) distance from fragment to dot center within the cell
-  vec2 d = (uv - dotCenter) / u_gridSize;
+  // Wrapped (toroidal) distance from fragment to dot center (in rotated space)
+  vec2 d = (rotUV - dotCenter) / u_gridSize;
   d = fract(d + 0.5) - 0.5;  // wrap to [-0.5, 0.5]
   float dist = length(d) * u_gridSize;
 
@@ -211,15 +153,33 @@ void main() {
 
   gl_FragColor = vec4(result, 1.0);
 }
-`,L={name:"dot-grid",fragmentShader:k,vertexShader:h,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_dotOffset",type:"vec2",default:[.5,.5],attribute:"dot-offset"},{name:"u_bgColor",type:"vec3",default:[1,1,1],attribute:"bg-color"}]},m=new Map;function d(e){m.set(e.name,e)}function v(e){return m.get(e)}function z(){return Array.from(m.keys())}d(A);d(U);d(D);d(L);var F=Object.defineProperty,O=Object.getOwnPropertyDescriptor,s=(e,t,o,a)=>{for(var n=a>1?void 0:a?O(t,o):t,r=e.length-1,u;r>=0;r--)(u=e[r])&&(n=(a?u(t,o,n):u(n))||n);return a&&n&&F(t,o,n),n};exports.SomeShadeImage=class extends c.LitElement{constructor(){super(...arguments),this.src="",this.effect="halftone-cmyk",this.dotRadius=4,this.gridSize=8,this.angleC=15,this.angleM=75,this.angleY=0,this.angleK=45,this.duotoneColor="#0099cc",this.angle=0,this.threshold=.5,this.sortDirection=0,this.sortSpan=64,this.dotOffsetX=.5,this.dotOffsetY=.5,this.bgColor="#ffffff",this._webglAvailable=!0,this._canvas=null,this._gl=null,this._programInfo=null,this._textureInfo=null,this._quadBuffer=null,this._currentEffect=null,this._image=null,this._resizeObserver=null}render(){return this._webglAvailable?c.html`<canvas></canvas>`:c.html`<img .src=${this.src} alt="" />`}firstUpdated(){if(this._webglAvailable&&(this._canvas=this.shadowRoot.querySelector("canvas"),!!this._canvas)){if(this._gl=y(this._canvas),!this._gl){this._webglAvailable=!1,this.classList.add("webgl-unavailable");return}this._resizeObserver=new ResizeObserver(()=>this._handleResize()),this._resizeObserver.observe(this),this.src&&this._loadImage(this.src)}}updated(t){if(this._gl){if(t.has("src")&&this.src){this._loadImage(this.src);return}if(t.has("effect")){this._setupProgram(),this._renderFrame();return}this._renderFrame()}}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._resizeObserver)==null||t.disconnect(),this._cleanup()}_loadImage(t){const o=new Image;o.crossOrigin="anonymous",o.onload=()=>{this._image=o,this._uploadTexture(),this._sizeCanvas(),this._setupProgram(),this._renderFrame()},o.onerror=()=>{console.warn(`[some-shade] Failed to load image: ${t}`)},o.src=t}_uploadTexture(){!this._gl||!this._image||(this._textureInfo&&this._gl.deleteTexture(this._textureInfo.texture),this._textureInfo=C(this._gl,this._image))}_sizeCanvas(){if(!this._canvas||!this._textureInfo)return;const t=window.devicePixelRatio||1,o=this._textureInfo.width,a=this._textureInfo.height;this._canvas.width=o*t,this._canvas.height=a*t,this._canvas.style.aspectRatio=`${o} / ${a}`}_handleResize(){this._renderFrame()}_setupProgram(){if(!this._gl)return;const t=v(this.effect);if(!t){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}this._programInfo&&this._gl.deleteProgram(this._programInfo.program),this._currentEffect=t,this._programInfo=x(this._gl,t.vertexShader,t.fragmentShader),this._quadBuffer&&this._gl.deleteBuffer(this._quadBuffer),this._gl.useProgram(this._programInfo.program),this._quadBuffer=I(this._gl,this._programInfo)}_getUniformValues(){const t={};return this._textureInfo&&(t.u_resolution=[this._textureInfo.width*(window.devicePixelRatio||1),this._textureInfo.height*(window.devicePixelRatio||1)],t.u_dotRadius=this.dotRadius,t.u_gridSize=this.gridSize,this.effect==="halftone-cmyk"?(t.u_angleC=this.angleC,t.u_angleM=this.angleM,t.u_angleY=this.angleY,t.u_angleK=this.angleK):this.effect==="halftone-duotone"?(t.u_duotoneColor=this._parseHexColor(this.duotoneColor),t.u_angle=this.angle):this.effect==="pixel-sort"?(t.u_threshold=this.threshold,t.u_direction=this.sortDirection,t.u_span=this.sortSpan):this.effect==="dot-grid"&&(t.u_dotOffset=[this.dotOffsetX,this.dotOffsetY],t.u_bgColor=this._parseHexColor(this.bgColor))),t}_parseHexColor(t){const o=t.replace("#",""),a=parseInt(o.substring(0,2),16)/255,n=parseInt(o.substring(2,4),16)/255,r=parseInt(o.substring(4,6),16)/255;return[a,n,r]}_renderFrame(){const t=this._gl;if(!t||!this._programInfo||!this._textureInfo||!this._canvas)return;t.viewport(0,0,this._canvas.width,this._canvas.height),t.clearColor(0,0,0,0),t.clear(t.COLOR_BUFFER_BIT),t.useProgram(this._programInfo.program),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this._textureInfo.texture);const o=this._programInfo.uniformLocations.get("u_image");o&&t.uniform1i(o,0),E(t,this._programInfo,this._getUniformValues()),t.bindBuffer(t.ARRAY_BUFFER,this._quadBuffer);const a=4*Float32Array.BYTES_PER_ELEMENT,n=this._programInfo.attribLocations.get("a_position");n!==void 0&&n!==-1&&(t.enableVertexAttribArray(n),t.vertexAttribPointer(n,2,t.FLOAT,!1,a,0));const r=this._programInfo.attribLocations.get("a_texCoord");r!==void 0&&r!==-1&&(t.enableVertexAttribArray(r),t.vertexAttribPointer(r,2,t.FLOAT,!1,a,2*Float32Array.BYTES_PER_ELEMENT)),R(t)}_cleanup(){this._gl&&(this._textureInfo&&this._gl.deleteTexture(this._textureInfo.texture),this._programInfo&&this._gl.deleteProgram(this._programInfo.program),this._quadBuffer&&this._gl.deleteBuffer(this._quadBuffer),this._gl=null,this._programInfo=null,this._textureInfo=null,this._quadBuffer=null)}};exports.SomeShadeImage.styles=c.css`
+`,N={name:"dot-grid",fragmentShader:I,vertexShader:y,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_dotOffset",type:"vec2",default:[.5,.5],attribute:"dot-offset"},{name:"u_bgColor",type:"vec3",default:[1,1,1],attribute:"bg-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},R=new Map;function b(t){R.set(t.name,t)}function A(t){return R.get(t)}function V(){return Array.from(R.keys())}b(F);b(M);b(N);var Y=Object.defineProperty,l=(t,e,a,o)=>{for(var i=void 0,n=t.length-1,r;n>=0;n--)(r=t[n])&&(i=r(e,a,i)||i);return i&&Y(e,a,i),i};const K=2;let C=Promise.resolve();function T(t){const e=C.then(t,t);return C=e,e}const X=new Set(["effect","dotRadius","gridSize","angleC","angleM","angleY","angleK","duotoneColor","angle","dotOffsetX","dotOffsetY","bgColor"]),E=class E extends m.LitElement{constructor(){super(...arguments),this.src="",this.effect="halftone-cmyk",this.dotRadius=4,this.gridSize=8,this.angleC=15,this.angleM=75,this.angleY=0,this.angleK=45,this.duotoneColor="#0099cc",this.angle=0,this.dotOffsetX=.5,this.dotOffsetY=.5,this.bgColor="#ffffff",this.loadingBlur=0,this._webglAvailable=!0,this._snapshotUrl="",this._snapshotLoaded=!1,this._image=null,this._observer=null,this._visible=!1,this._needsRender=!1}render(){if(!this._webglAvailable)return m.html`<img src=${this.src} alt="" />`;const e=this.loadingBlur>0?`filter: blur(${this.loadingBlur}px)`:"";return m.html`
+      <img src=${this.src} alt="" style=${e} />
+      ${this._snapshotUrl?m.html`<img
+            class="snapshot${this._snapshotLoaded?" loaded":""}"
+            src=${this._snapshotUrl}
+            @load=${this._onSnapshotLoad}
+            alt="" />`:""}
+    `}connectedCallback(){super.connectedCallback(),this._observer=new IntersectionObserver(e=>{var o;const a=this._visible;this._visible=((o=e[0])==null?void 0:o.isIntersecting)??!1,this._visible&&!a&&this._needsRender&&(this._needsRender=!1,T(()=>this._renderEffect()))},{rootMargin:"200px"}),this._observer.observe(this)}updated(e){if(e.has("src")&&this.src){this._loadImage(this.src);return}if(!this._image)return;[...e.keys()].some(o=>X.has(o))&&this._scheduleRender()}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this._observer)==null||e.disconnect(),this._revokeSnapshot()}_loadImage(e){const a=new Image;a.crossOrigin="anonymous",a.onload=()=>{this._image=a,this._scheduleRender()},a.onerror=()=>{console.warn(`[some-shade] Failed to load image: ${e}`)},a.src=e}_scheduleRender(){this._visible?T(()=>this._renderEffect()):this._needsRender=!0}async _renderEffect(){var p;if(!this._image)return;const e=A(this.effect);if(!e){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}const a=Math.min(window.devicePixelRatio||1,K),o=this._image.naturalWidth,i=this._image.naturalHeight,n=document.createElement("canvas");n.width=o*a,n.height=i*a;const r=w(n);if(!r){this._webglAvailable=!1;return}try{const f=U(r,e.vertexShader,e.fragmentShader);r.useProgram(f.program);const h=k(r,this._image),d=D(r,f);r.viewport(0,0,n.width,n.height),r.clearColor(0,0,0,0),r.clear(r.COLOR_BUFFER_BIT),r.activeTexture(r.TEXTURE0),r.bindTexture(r.TEXTURE_2D,h.texture);const c=f.uniformLocations.get("u_image");c&&r.uniform1i(c,0),P(r,f,this._getUniformValues(h,a)),r.bindBuffer(r.ARRAY_BUFFER,d);const _=4*Float32Array.BYTES_PER_ELEMENT,g=f.attribLocations.get("a_position");g!==void 0&&g!==-1&&(r.enableVertexAttribArray(g),r.vertexAttribPointer(g,2,r.FLOAT,!1,_,0));const v=f.attribLocations.get("a_texCoord");v!==void 0&&v!==-1&&(r.enableVertexAttribArray(v),r.vertexAttribPointer(v,2,r.FLOAT,!1,_,2*Float32Array.BYTES_PER_ELEMENT)),O(r);const S=await new Promise(L=>n.toBlob(L));r.deleteTexture(h.texture),r.deleteProgram(f.program),r.deleteBuffer(d),S&&(this._snapshotLoaded=!1,this._revokeSnapshot(),this._snapshotUrl=URL.createObjectURL(S))}finally{(p=r.getExtension("WEBGL_lose_context"))==null||p.loseContext()}}_onSnapshotLoad(){this._snapshotLoaded=!0}replayTransition(e=500){this._snapshotUrl&&(this._snapshotLoaded=!1,this.updateComplete.then(()=>{setTimeout(()=>{this._snapshotLoaded=!0},e)}))}_revokeSnapshot(){this._snapshotUrl&&(URL.revokeObjectURL(this._snapshotUrl),this._snapshotUrl="")}_getUniformValues(e,a){const o={};return o.u_resolution=[e.width*a,e.height*a],o.u_dotRadius=this.dotRadius,o.u_gridSize=this.gridSize,this.effect==="halftone-cmyk"?(o.u_angleC=this.angleC,o.u_angleM=this.angleM,o.u_angleY=this.angleY,o.u_angleK=this.angleK):this.effect==="halftone-duotone"?(o.u_duotoneColor=this._parseHexColor(this.duotoneColor),o.u_angle=this.angle):this.effect==="dot-grid"&&(o.u_dotOffset=[this.dotOffsetX,this.dotOffsetY],o.u_bgColor=this._parseHexColor(this.bgColor),o.u_angle=this.angle),o}_parseHexColor(e){const a=e.replace("#",""),o=parseInt(a.substring(0,2),16)/255,i=parseInt(a.substring(2,4),16)/255,n=parseInt(a.substring(4,6),16)/255;return[o,i,n]}};E.styles=m.css`
     :host {
       display: block;
       position: relative;
       overflow: hidden;
     }
-    canvas, img {
+    img {
       display: block;
       width: 100%;
       height: auto;
     }
-  `;s([i.property()],exports.SomeShadeImage.prototype,"src",2);s([i.property()],exports.SomeShadeImage.prototype,"effect",2);s([i.property({type:Number,attribute:"dot-radius"})],exports.SomeShadeImage.prototype,"dotRadius",2);s([i.property({type:Number,attribute:"grid-size"})],exports.SomeShadeImage.prototype,"gridSize",2);s([i.property({type:Number,attribute:"angle-c"})],exports.SomeShadeImage.prototype,"angleC",2);s([i.property({type:Number,attribute:"angle-m"})],exports.SomeShadeImage.prototype,"angleM",2);s([i.property({type:Number,attribute:"angle-y"})],exports.SomeShadeImage.prototype,"angleY",2);s([i.property({type:Number,attribute:"angle-k"})],exports.SomeShadeImage.prototype,"angleK",2);s([i.property({attribute:"duotone-color"})],exports.SomeShadeImage.prototype,"duotoneColor",2);s([i.property({type:Number})],exports.SomeShadeImage.prototype,"angle",2);s([i.property({type:Number})],exports.SomeShadeImage.prototype,"threshold",2);s([i.property({type:Number,attribute:"sort-direction"})],exports.SomeShadeImage.prototype,"sortDirection",2);s([i.property({type:Number,attribute:"sort-span"})],exports.SomeShadeImage.prototype,"sortSpan",2);s([i.property({type:Number,attribute:"dot-offset-x"})],exports.SomeShadeImage.prototype,"dotOffsetX",2);s([i.property({type:Number,attribute:"dot-offset-y"})],exports.SomeShadeImage.prototype,"dotOffsetY",2);s([i.property({attribute:"bg-color"})],exports.SomeShadeImage.prototype,"bgColor",2);s([i.state()],exports.SomeShadeImage.prototype,"_webglAvailable",2);exports.SomeShadeImage=s([i.customElement("some-shade-image")],exports.SomeShadeImage);exports.get=v;exports.list=z;exports.register=d;
+    img.snapshot {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+    img.snapshot.loaded {
+      opacity: 1;
+    }
+  `;let s=E;l([u.property()],s.prototype,"src");l([u.property()],s.prototype,"effect");l([u.property({type:Number,attribute:"dot-radius"})],s.prototype,"dotRadius");l([u.property({type:Number,attribute:"grid-size"})],s.prototype,"gridSize");l([u.property({type:Number,attribute:"angle-c"})],s.prototype,"angleC");l([u.property({type:Number,attribute:"angle-m"})],s.prototype,"angleM");l([u.property({type:Number,attribute:"angle-y"})],s.prototype,"angleY");l([u.property({type:Number,attribute:"angle-k"})],s.prototype,"angleK");l([u.property({attribute:"duotone-color"})],s.prototype,"duotoneColor");l([u.property({type:Number})],s.prototype,"angle");l([u.property({type:Number,attribute:"dot-offset-x"})],s.prototype,"dotOffsetX");l([u.property({type:Number,attribute:"dot-offset-y"})],s.prototype,"dotOffsetY");l([u.property({attribute:"bg-color"})],s.prototype,"bgColor");l([u.property({type:Number,attribute:"loading-blur"})],s.prototype,"loadingBlur");l([u.state()],s.prototype,"_webglAvailable");l([u.state()],s.prototype,"_snapshotUrl");l([u.state()],s.prototype,"_snapshotLoaded");customElements.get("some-shade-image")||customElements.define("some-shade-image",s);exports.SomeShadeImage=s;exports.get=A;exports.list=V;exports.register=b;