knso/videogen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design-Sync: Kapsel-Shape (8) fuer Dither-Chips, Liquid-Metal u_shape 0

Browse Source 
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>
This commit is contained in:
root
2026-07-23 19:14:15 +00:00
parent 2f2ec31466
commit 65a19d7678
1 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
prototyp-app.html
View File

@@ -6,7 +6,7 @@
<meta name="theme-color" content="#0a0a0a"> <meta name="theme-color" content="#0a0a0a">
<title>BrandLoop – Prototyp</title> <title>BrandLoop – Prototyp</title>
<link rel="stylesheet" href="border-beam.css"> <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> <style>
/* Liquid-Metal-Buttons (aus BrandLoop.dc.html): Shader-Canvas ueber /* Liquid-Metal-Buttons (aus BrandLoop.dc.html): Shader-Canvas ueber
Metall-Gradient (Fallback ohne WebGL/offline), schwarzer Kern, graues Icon */ 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 offset = pow(l, -twist) + angle / TWO_PI;',
' float mid = smoothstep(0., 1., pow(l, twist));', ' float mid = smoothstep(0., 1., pow(l, twist));',
' shape = mix(0., fract(offset), mid);', ' shape = mix(0., fract(offset), mid);',
' } else {', ' } else if (u_shape < 7.5) {',
' shape_uv *= 2.;', ' shape_uv *= 2.;',
' float d = 1. - pow(length(shape_uv), 2.);', ' float d = 1. - pow(length(shape_uv), 2.);',
' vec3 pos = vec3(shape_uv, sqrt(d));', ' vec3 pos = vec3(shape_uv, sqrt(d));',
' vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));', ' vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));',
' shape = .5 + .5 * dot(lightPos, pos);', ' shape = .5 + .5 * dot(lightPos, pos);',
' shape *= step(0., d);', ' 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));', ' int type = int(floor(u_type));',
' float dithering = 0.0;', ' float dithering = 0.0;',
@@ -1558,7 +1567,7 @@ function initCreateDither(){
if(!chips.length) return; if(!chips.length) return;
DCHIPS.mounted=true; DCHIPS.mounted=true;
chips.forEach(function(c,i){ 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) */ /* Prompt-Editing über die Fake-Tastatur (Caret-genau wie im Design) */