diff --git a/registry/components/filmed-screen/README.md b/registry/components/filmed-screen/README.md index 16bd1a9746..efe94b00c3 100644 --- a/registry/components/filmed-screen/README.md +++ b/registry/components/filmed-screen/README.md @@ -90,6 +90,13 @@ HFFilmedScreen.mount({ | fadeOut | true | Fades to black over the last 0.4 s of the owning composition. | | zIndex | 10 | z-index of the lens output canvas. | +**Previous look.** Before these defaults the lens used `blur: 0.9`, `rack: 0.7`, `vignette: 0.42`, +`aberration: 1`, `led: 0.9` and `curve: 0`; pass those to get close to it. Two changes have no +option and can't be restored: the LED grid now fades in only once a cell spans about 4 output +pixels, and a quarter of the fringing stays on the focused element. + +`curve` is clamped at 0, and the vignette never darkens past black, so very large values are safe. + Pass `document.querySelectorAll(...)` from your own snippet rather than a selector string. The library initialises once per page, so its own `document` belongs to whichever copy loaded first; your query is scoped to your composition, which is what keeps two instances (or the same diff --git a/registry/components/filmed-screen/demo.html b/registry/components/filmed-screen/demo.html index 80930c7c5b..75b0bdf5e7 100644 --- a/registry/components/filmed-screen/demo.html +++ b/registry/components/filmed-screen/demo.html @@ -343,7 +343,7 @@ void main() { col *= mix(vec3(1.0), led * 1.3, ledAmt * uLed * (1.0 - 0.7 * sharp)); col = col * (1.0 + uCut * 1.1) + uCut * 0.06; vec2 v = s0 * vec2(0.85, 1.15); - col *= 1.0 - uVig * dot(v, v); + col *= max(0.0, 1.0 - uVig * dot(v, v)); col *= 1.0 - (0.035 - 0.035 * sin(coord.y * 0.9 - uTime * 55.0)); col += (hash(coord + frameSeed * 1.31) - 0.5) * 0.06; col *= 1.0 - uOut; @@ -781,7 +781,8 @@ void main() { gl.uniform1f(loc.uVig, opts.vignette == null ? 1.0 : opts.vignette); gl.uniform1f(loc.uCA, opts.aberration == null ? 2.2 : opts.aberration); gl.uniform1f(loc.uLed, opts.led == null ? 0.45 : opts.led); - gl.uniform1f(loc.uCurve, opts.curve == null ? 0.15 : opts.curve); + // A negative curve would sample outside the frame and fold over. + gl.uniform1f(loc.uCurve, Math.max(0, opts.curve == null ? 0.15 : opts.curve)); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); fs = null; return true; diff --git a/registry/components/filmed-screen/filmed-screen.html b/registry/components/filmed-screen/filmed-screen.html index 7d6c66719f..c5f66e7e06 100644 --- a/registry/components/filmed-screen/filmed-screen.html +++ b/registry/components/filmed-screen/filmed-screen.html @@ -191,7 +191,7 @@ void main() { col *= mix(vec3(1.0), led * 1.3, ledAmt * uLed * (1.0 - 0.7 * sharp)); col = col * (1.0 + uCut * 1.1) + uCut * 0.06; vec2 v = s0 * vec2(0.85, 1.15); - col *= 1.0 - uVig * dot(v, v); + col *= max(0.0, 1.0 - uVig * dot(v, v)); col *= 1.0 - (0.035 - 0.035 * sin(coord.y * 0.9 - uTime * 55.0)); col += (hash(coord + frameSeed * 1.31) - 0.5) * 0.06; col *= 1.0 - uOut; @@ -628,7 +628,8 @@ void main() { gl.uniform1f(loc.uVig, opts.vignette == null ? 1.0 : opts.vignette); gl.uniform1f(loc.uCA, opts.aberration == null ? 2.2 : opts.aberration); gl.uniform1f(loc.uLed, opts.led == null ? 0.45 : opts.led); - gl.uniform1f(loc.uCurve, opts.curve == null ? 0.15 : opts.curve); + // A negative curve would sample outside the frame and fold over. + gl.uniform1f(loc.uCurve, Math.max(0, opts.curve == null ? 0.15 : opts.curve)); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); fs = null; return true; diff --git a/registry/components/filmed-screen/filmed-screen.test.mjs b/registry/components/filmed-screen/filmed-screen.test.mjs index 25d7b5ceba..9074ad9dab 100644 --- a/registry/components/filmed-screen/filmed-screen.test.mjs +++ b/registry/components/filmed-screen/filmed-screen.test.mjs @@ -10,12 +10,15 @@ const library = html.match(/