From 65a19d7678b3eecb365a7b0842f9107c0dc78b96 Mon Sep 17 00:00:00 2001
From: root <root@ubuntu-16gb-webklar-v1.0.0>
Date: Thu, 23 Jul 2026 19:14:15 +0000
Subject: [PATCH] Design-Sync: Kapsel-Shape (8) fuer Dither-Chips, Liquid-Metal
 u_shape 0

Aus prototyp-app.html im Design-Projekt uebernommen: neue GLSL-Shape 8
(aspect-korrigierte Kapsel statt zentrierter Kugel - passt sich der
Pill-Breite an), Chips auf shape:8, Liquid-Metal-Uniform u_shape 1->0.
Bildpfade bleiben .jpg (Design-Kopie basierte auf aelterem .png-Stand).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 prototyp-app.html | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/prototyp-app.html b/prototyp-app.html
index 51a37ed..edbd318 100644
--- a/prototyp-app.html
+++ b/prototyp-app.html
@@ -6,7 +6,7 @@
 <meta name="theme-color" content="#0a0a0a">
 <title>BrandLoop – Prototyp</title>
 <link rel="stylesheet" href="border-beam.css">
-<script type="module">import('https://esm.sh/@paper-design/shaders').then(function(m){window.__paperShaders=m;var u={u_repetition:4,u_softness:.5,u_shiftRed:.3,u_shiftBlue:.3,u_distortion:0,u_contour:0,u_angle:45,u_scale:8,u_shape:1,u_offsetX:.1,u_offsetY:-.1};setInterval(function(){document.querySelectorAll('.lm-shader:not([data-lm])').forEach(function(el){el.dataset.lm='1';try{new m.ShaderMount(el,m.liquidMetalFragmentShader,u,undefined,0.6)}catch(e){}})},500)}).catch(function(){})</script>
+<script type="module">import('https://esm.sh/@paper-design/shaders').then(function(m){window.__paperShaders=m;var u={u_repetition:4,u_softness:.5,u_shiftRed:.3,u_shiftBlue:.3,u_distortion:0,u_contour:0,u_angle:45,u_scale:8,u_shape:0,u_offsetX:.1,u_offsetY:-.1};setInterval(function(){document.querySelectorAll('.lm-shader:not([data-lm])').forEach(function(el){el.dataset.lm='1';try{new m.ShaderMount(el,m.liquidMetalFragmentShader,u,undefined,0.6)}catch(e){}})},500)}).catch(function(){})</script>
 <style>
   /* Liquid-Metal-Buttons (aus BrandLoop.dc.html): Shader-Canvas ueber
      Metall-Gradient (Fallback ohne WebGL/offline), schwarzer Kern, graues Icon */
@@ -1389,13 +1389,22 @@ var DITHER_FRAG=[
 '    float offset = pow(l, -twist) + angle / TWO_PI;',
 '    float mid = smoothstep(0., 1., pow(l, twist));',
 '    shape = mix(0., fract(offset), mid);',
-'  } else {',
+'  } else if (u_shape < 7.5) {',
 '    shape_uv *= 2.;',
 '    float d = 1. - pow(length(shape_uv), 2.);',
 '    vec3 pos = vec3(shape_uv, sqrt(d));',
 '    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));',
 '    shape = .5 + .5 * dot(lightPos, pos);',
 '    shape *= step(0., d);',
+'  } else {',
+'    float ar = u_resolution.x / u_resolution.y;',
+'    vec2 p = shape_uv * vec2(ar, 1.) * 2.1;',
+'    vec2 q = vec2(sign(p.x) * max(abs(p.x) - (1.05 * ar - 1.), 0.), p.y);',
+'    float d = 1. - dot(q, q);',
+'    vec3 pos = vec3(q, sqrt(max(d, 0.)));',
+'    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));',
+'    shape = .5 + .5 * dot(lightPos, pos);',
+'    shape *= step(0., d);',
 '  }',
 '  int type = int(floor(u_type));',
 '  float dithering = 0.0;',
@@ -1558,7 +1567,7 @@ function initCreateDither(){
   if(!chips.length) return;
   DCHIPS.mounted=true;
   chips.forEach(function(c,i){
-    DCHIPS.insts[i]=mountDither(c.querySelector('canvas'), {front:(i===C.model)?DITHER_ON:DITHER_OFF, shape:7, type:1, pxSize:2, speed:1.5});
+    DCHIPS.insts[i]=mountDither(c.querySelector('canvas'), {front:(i===C.model)?DITHER_ON:DITHER_OFF, shape:8, type:1, pxSize:2, speed:1.5});
   });
 }
 /* Prompt-Editing über die Fake-Tastatur (Caret-genau wie im Design) */