@firecms/neat 0.8.0 → 0.9.1

package/dist/shaders.js

@@ -1,5 +1,6 @@
 export const vertexShaderSource = `void main() {
     vUv = uv;
+    vPosition = position;
 
     // SCROLLING LOGIC
     // Separate multipliers for wave, color, and flow offsets
@@ -41,11 +42,36 @@ export const vertexShaderSource = `void main() {
     // We take the computed flow UVs and apply the color offset
     // Scale by plane height to match wave offset speed (world space vs UV space)
     vec3 color = u_colors[0].color;
-    // ...
-    vec2 adjustedUv = flowUv;
-    adjustedUv.y += colorOffset / u_plane_height; // Scroll the color mixing pattern
 
-    vec2 noise_cord = adjustedUv * u_color_pressure;
+    vec3 distortedPos = position;
+    if (u_flat_shading < 0.5) {
+        if (u_flow_enabled > 0.5) {
+            if (u_flow_ease > 0.0 || u_flow_distortion_a > 0.0) {
+                vec3 ppp = position / 25.0;
+                ppp.xyz += 0.1 * cos((1.5 * u_flow_scale) * ppp.yxz + 1.1 * u_time + vec3(0.1, 1.1, 2.1));
+                ppp.xyz += 0.1 * cos((2.3 * u_flow_scale) * ppp.zxy + 1.3 * u_time + vec3(3.2, 3.4, 1.2));
+                ppp.xyz += 0.1 * cos((2.2 * u_flow_scale) * ppp.yxz + 1.7 * u_time + vec3(1.8, 5.2, 3.1));
+                ppp.xyz += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.zxy + 1.4 * u_time + vec3(6.3, 3.9, 4.5));
+
+                float r = length(ppp);
+                distortedPos = mix(position, vec3(
+                    position.x * (1.0 - u_flow_ease) + r * u_flow_ease * 25.0,
+                    position.y,
+                    position.z * (1.0 - u_flow_ease) + r * u_flow_ease * 25.0
+                ), u_flow_ease);
+            }
+        }
+    }
+
+    vec3 noise_cord;
+    if (u_flat_shading < 0.5) {
+        noise_cord = vec3(distortedPos.x / 50.0, (distortedPos.y + colorOffset) / 50.0, distortedPos.z / 50.0);
+    } else {
+        vec2 adjustedUv = flowUv;
+        adjustedUv.y += colorOffset / u_plane_height;
+        noise_cord = vec3(adjustedUv, 0.0);
+    }
+
     const float minNoise = .0;
     const float maxNoise = .9;
 
@@ -56,11 +82,16 @@ export const vertexShaderSource = `void main() {
                 float noiseSpeed = (1. + float(i)) * 0.11;
                 float noiseSeed = 13. + float(i) * 7.;
 
+                float noise_z = u_time * noiseSpeed;
+                if (u_flat_shading < 0.5) {
+                    noise_z = noise_cord.z * u_color_pressure.x * u_color_pressure.x + u_time * noiseSpeed;
+                }
+
                 float noise = snoise(
                     vec3(
-                        noise_cord.x * u_color_pressure.x + u_time * noiseFlow * 2.,
-                        noise_cord.y * u_color_pressure.y,
-                        u_time * noiseSpeed
+                        noise_cord.x * u_color_pressure.x * u_color_pressure.x + u_time * noiseFlow * 2.,
+                        noise_cord.y * u_color_pressure.y * u_color_pressure.y,
+                        noise_z
                     ) + noiseSeed
                 ) - (.1 * float(i)) + (.5 * u_color_blending);
 
@@ -77,7 +108,10 @@ export const vertexShaderSource = `void main() {
 
     // 5. VERTEX POSITION
     vec3 newPosition = position + normal * v_displacement_amount * u_wave_amplitude;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
+    vec4 mvPosition = modelViewMatrix * vec4(newPosition, 1.0);
+    vViewPosition = mvPosition.xyz;
+    vNormal = normalize((modelViewMatrix * vec4(normal, 0.0)).xyz);
+    gl_Position = projectionMatrix * mvPosition;
     v_new_position = gl_Position;
 }
 `;
@@ -89,7 +123,7 @@ float fbm(vec3 x) {
     float value = 0.0;
     float amplitude = 0.5;
     float frequency = 1.0;
-    for (int i = 0; i < 4; i++) {
+    for (int i = 0; i < 2; i++) {
         value += amplitude * snoise(x * frequency);
         frequency *= 2.0;
         amplitude *= 0.5;
@@ -107,25 +141,55 @@ void main() {
     vec2 finalUv = vFlowUv;
     
     vec3 baseColor;
+    float texAlpha = 1.0;
 
     if (u_enable_procedural_texture > 0.5) {
-        vec2 ppp = -1.0 + 2.0 * finalUv;
-        ppp += 0.1 * cos((1.5 * u_flow_scale) * ppp.yx + 1.1 * u_time + vec2(0.1, 1.1));
-        ppp += 0.1 * cos((2.3 * u_flow_scale) * ppp.yx + 1.3 * u_time + vec2(3.2, 3.4));
-        ppp += 0.1 * cos((2.2 * u_flow_scale) * ppp.yx + 1.7 * u_time + vec2(1.8, 5.2));
-        ppp += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.yx + 1.4 * u_time + vec2(6.3, 3.9));
-        float r = length(ppp);
-        
-        float vx = (finalUv.x * u_texture_ease) + (r * (1.0 - u_texture_ease));
-        float vy = (finalUv.y * u_texture_ease) + (0.0 * (1.0 - u_texture_ease));
-        vec2 texUv = vec2(vx, vy);
-
-        float parallaxFactor = 0.25;
-        texUv.y -= (u_y_offset * u_y_offset_color_multiplier / u_plane_height) * parallaxFactor;
-        texUv *= 1.5;
-
-        vec4 texSample = texture2D(u_procedural_texture, texUv);
-        baseColor = texSample.rgb;
+        if (u_flat_shading < 0.5) {
+            float parallaxFactor = 0.25;
+            float scrollOffset = (u_y_offset * u_y_offset_color_multiplier) * parallaxFactor;
+            vec3 scrolledPos = vPosition;
+            scrolledPos.y -= scrollOffset;
+            
+            vec3 p = (scrolledPos * 1.5) / 50.0;
+            vec2 uvX = p.yz + vec2(0.5);
+            vec2 uvY = p.zx + vec2(0.5);
+            vec2 uvZ = p.xy + vec2(0.5);
+            
+            vec4 colX = texture2D(u_procedural_texture, uvX);
+            vec4 colY = texture2D(u_procedural_texture, uvY);
+            vec4 colZ = texture2D(u_procedural_texture, uvZ);
+            
+            vec3 n = normalize(vNormal);
+            vec3 blendWeights = abs(n);
+            blendWeights = blendWeights / (blendWeights.x + blendWeights.y + blendWeights.z + 0.0001);
+            
+            vec4 texSample = colX * blendWeights.x + colY * blendWeights.y + colZ * blendWeights.z;
+            baseColor = texSample.rgb;
+            if (u_transparent_texture_void > 0.5) {
+                texAlpha = texSample.a;
+            }
+        } else {
+            vec2 ppp = -1.0 + 2.0 * finalUv;
+            ppp += 0.1 * cos((1.5 * u_flow_scale) * ppp.yx + 1.1 * u_time + vec2(0.1, 1.1));
+            ppp += 0.1 * cos((2.3 * u_flow_scale) * ppp.yx + 1.3 * u_time + vec2(3.2, 3.4));
+            ppp += 0.1 * cos((2.2 * u_flow_scale) * ppp.yx + 1.7 * u_time + vec2(1.8, 5.2));
+            ppp += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.yx + 1.4 * u_time + vec2(6.3, 3.9));
+            float r = length(ppp);
+            
+            float vx = (finalUv.x * u_texture_ease) + (r * (1.0 - u_texture_ease));
+            float vy = (finalUv.y * u_texture_ease) + (0.0 * (1.0 - u_texture_ease));
+            vec2 texUv = vec2(vx, vy);
+
+            float parallaxFactor = 0.25;
+            texUv.y -= (u_y_offset * u_y_offset_color_multiplier / u_plane_height) * parallaxFactor;
+            texUv *= 1.5;
+
+            vec4 texSample = texture2D(u_procedural_texture, texUv);
+            baseColor = texSample.rgb;
+            if (u_transparent_texture_void > 0.5) {
+                texAlpha = texSample.a;
+            }
+        }
     } else {
         baseColor = v_color;
     }
@@ -134,7 +198,13 @@ void main() {
 
     // === DOMAIN WARPING (simplified: 3 fbm calls instead of 5) ===
     if (u_domain_warp_enabled > 0.5) {
-        vec3 p = vec3(finalUv * u_domain_warp_scale, u_time * 0.15);
+        vec3 p;
+        if (u_flat_shading < 0.5) {
+            p = vec3((vPosition / 50.0 + vec3(0.5)) * u_domain_warp_scale);
+            p.z += u_time * 0.15;
+        } else {
+            p = vec3(finalUv * u_domain_warp_scale, u_time * 0.15);
+        }
         vec2 q = vec2(fbm(p), fbm(p + vec3(5.2, 1.3, 0.0)));
         float f = fbm(p + vec3(4.0 * q, 0.0));
         vec3 warpColor = color * (1.0 + f * 0.8 * u_domain_warp_intensity);
@@ -143,9 +213,42 @@ void main() {
     }
 
     // Post-processing
-    color += v_displacement_amount * u_highlights;
-    float shadowFactor = 1.0 - v_displacement_amount;
-    color -= shadowFactor * shadowFactor * u_shadows;
+    // Compute dynamic pixel-perfect normal using smooth normal
+    vec3 normal = normalize(vNormal);
+    vec3 viewDir = vec3(0.0, 0.0, 1.0);
+    float ndotv = dot(normal, viewDir);
+    
+    // Cull back-faces for closed 3D shapes (Sphere=1, Torus=2, Cylinder=3)
+    if (u_shape_type > 0.5 && u_shape_type < 3.5) {
+        if (ndotv < 0.0) {
+            discard;
+        }
+    } else {
+        // Double-sided shapes (Plane, Ribbon): flip normal if back-facing
+        if (ndotv < 0.0) {
+            normal = -normal;
+            ndotv = -ndotv;
+        }
+    }
+    vec3 lightDir = normalize(vec3(1.0, 1.0, 1.0));
+    float diffuse = max(dot(normal, lightDir), 0.0);
+    vec3 halfDir = normalize(lightDir + viewDir);
+    float specular = pow(max(dot(normal, halfDir), 0.0), 32.0);
+
+    // Blend smooth 3D shading with smooth height-based wave shading
+    if (u_flat_shading > 0.5) {
+        // Flat / height-based wave shading (plane style)
+        color += v_displacement_amount * u_highlights;
+        float heightShadow = 1.0 - v_displacement_amount;
+        color -= heightShadow * heightShadow * u_shadows;
+    } else {
+        // 3D shading
+        color += specular * u_highlights;
+        color += v_displacement_amount * u_highlights * 0.5;
+        float heightShadow = 1.0 - v_displacement_amount;
+        color -= heightShadow * heightShadow * u_shadows * 0.5;
+        color -= (1.0 - diffuse) * u_shadows * 0.5;
+    }
     color = saturation(color, 1.0 + u_saturation);
     color = color * u_brightness;
 
@@ -165,7 +268,11 @@ void main() {
 
     // === VIGNETTE ===
     if (u_vignette_intensity > 0.0) {
-        float dist = length(vUv - vec2(0.5));
+        vec2 vigUv = vUv;
+        if (u_flat_shading < 0.5) {
+            vigUv = (v_new_position.xy / v_new_position.w) * 0.5 + vec2(0.5);
+        }
+        float dist = length(vigUv - vec2(0.5));
         float vig = smoothstep(u_vignette_radius, u_vignette_radius * 0.3, dist);
         color *= mix(1.0, vig, u_vignette_intensity);
     }
@@ -180,7 +287,11 @@ void main() {
     // === CHROMATIC ABERRATION ===
     if (u_chromatic_aberration > 0.0) {
         float caAmount = u_chromatic_aberration * 0.008;
-        float dist = length(vUv - vec2(0.5));
+        vec2 caUv = vUv;
+        if (u_flat_shading < 0.5) {
+            caUv = (v_new_position.xy / v_new_position.w) * 0.5 + vec2(0.5);
+        }
+        float dist = length(caUv - vec2(0.5));
         float rShift = v_displacement_amount + caAmount * dist;
         float bShift = v_displacement_amount - caAmount * dist;
         color.r *= 1.0 + rShift * caAmount * 10.0;
@@ -191,7 +302,7 @@ void main() {
     float grain = 0.0;
     if (u_grain_intensity > 0.0) {
         vec2 noiseCoords = gl_FragCoord.xy / u_grain_scale;
-        if (u_grain_speed != 0.0) {
+        if (u_grain_speed != 0.0 || u_flat_shading > 0.5) {
             grain = fbm(vec3(noiseCoords, u_time * u_grain_speed));
         } else {
             // Static grain: use cheap hash instead of fbm
@@ -206,7 +317,25 @@ void main() {
 
     color += vec3(grain);
 
-    gl_FragColor = vec4(color, 1.0);
+    float edgeAlpha = 1.0;
+    
+    // Silhouette falloff for 3D shapes (skip when flat shading or fade is zero)
+    if (u_silhouette_fade > 0.0 && u_flat_shading < 0.5) {
+        edgeAlpha = smoothstep(0.0, u_silhouette_fade, ndotv);
+    }
+    
+    // UV boundary falloff for open shapes
+    if (u_shape_type == 3.0) { // Cylinder: fade top/bottom ends
+        float vFade = smoothstep(0.0, u_cylinder_fade, vUv.y) * smoothstep(1.0, 1.0 - u_cylinder_fade, vUv.y);
+        edgeAlpha *= vFade;
+    } else if (u_shape_type == 4.0) { // Ribbon: fade all 4 borders
+        float uFade = smoothstep(0.0, u_ribbon_fade, vUv.x) * smoothstep(1.0, 1.0 - u_ribbon_fade, vUv.x);
+        float vFade = smoothstep(0.0, u_ribbon_fade, vUv.y) * smoothstep(1.0, 1.0 - u_ribbon_fade, vUv.y);
+        edgeAlpha *= uFade * vFade;
+    }
+
+    edgeAlpha *= texAlpha;
+    gl_FragColor = vec4(color, edgeAlpha);
 }
 `;
 export function buildVertUniforms() {
@@ -224,6 +353,9 @@ varying vec2 vFlowUv;
 varying vec4 v_new_position;
 varying vec3 v_color;
 varying float v_displacement_amount;
+varying vec3 vViewPosition;
+varying vec3 vNormal;
+varying vec3 vPosition;
 
 uniform float u_time;
 uniform vec2 u_resolution;
@@ -260,6 +392,9 @@ uniform float u_fresnel_enabled;
 uniform float u_fresnel_power;
 uniform float u_fresnel_intensity;
 uniform vec3 u_fresnel_color;
+
+uniform float u_shape_type;
+uniform float u_flat_shading;
 `;
 }
 export function buildFragUniforms() {
@@ -267,8 +402,12 @@ export function buildFragUniforms() {
 
 varying vec2 vUv;
 varying vec2 vFlowUv;
+varying vec4 v_new_position;
 varying vec3 v_color;
 varying float v_displacement_amount;
+varying vec3 vViewPosition;
+varying vec3 vNormal;
+varying vec3 vPosition;
 
 uniform float u_time;
 uniform vec2 u_resolution;
@@ -324,6 +463,12 @@ uniform float u_bloom_threshold;
 
 // Chromatic aberration
 uniform float u_chromatic_aberration;
+uniform float u_shape_type;
+uniform float u_transparent_texture_void;
+uniform float u_silhouette_fade;
+uniform float u_cylinder_fade;
+uniform float u_ribbon_fade;
+uniform float u_flat_shading;
 `;
 }
 export function buildNoise() {

package/dist/shaders.js.map

@@ -1 +1 @@
-{"version":3,"file":"shaders.js","sourceRoot":"","sources":["../src/shaders.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFjC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HnC,CAAC;AAEF,MAAM,UAAU,iBAAiB;IAC7B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDV,CAAC;AACF,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC7B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DV,CAAC;AACF,CAAC;AAED,MAAM,UAAU,UAAU;IACtB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwJV,CAAC;AACF,CAAC;AAED,MAAM,UAAU,mBAAmB;IAC/B,OAAO;;;;;;CAMV,CAAC;AACF,CAAC"}
+{"version":3,"file":"shaders.js","sourceRoot":"","sources":["../src/shaders.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoHjC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8NnC,CAAC;AAEF,MAAM,UAAU,iBAAiB;IAC7B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDV,CAAC;AACF,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC7B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEV,CAAC;AACF,CAAC;AAED,MAAM,UAAU,UAAU;IACtB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwJV,CAAC;AACF,CAAC;AAED,MAAM,UAAU,mBAAmB;IAC/B,OAAO;;;;;;CAMV,CAAC;AACF,CAAC"}

package/dist/types.d.ts

@@ -56,6 +56,32 @@ export type NeatConfig = {
     bloomIntensity?: number;
     bloomThreshold?: number;
     chromaticAberration?: number;
+    shapeType?: 'plane' | 'sphere' | 'torus' | 'cylinder' | 'ribbon';
+    shapeRotationX?: number;
+    shapeRotationY?: number;
+    shapeRotationZ?: number;
+    shapeAutoRotateSpeedX?: number;
+    shapeAutoRotateSpeedY?: number;
+    sphereRadius?: number;
+    torusRadius?: number;
+    torusTube?: number;
+    cylinderRadius?: number;
+    cylinderHeight?: number;
+    planeBend?: number;
+    planeTwist?: number;
+    transparentTextureVoid?: boolean;
+    flatShading?: boolean;
+    silhouetteFade?: number;
+    cylinderFade?: number;
+    ribbonFade?: number;
+    cameraLock?: boolean;
+    cameraX?: number;
+    cameraY?: number;
+    cameraZ?: number;
+    cameraRotationX?: number;
+    cameraRotationY?: number;
+    cameraRotationZ?: number;
+    cameraZoom?: number;
 };
 export type NeatColor = {
     color: string;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@firecms/neat",
   "description": "Beautiful 3D gradients for your website",
   "access": "public",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -47,6 +47,9 @@
     "url": "https://github.com/FireCMSco/neat/issues"
   },
   "homepage": "https://github.com/FireCMSco/neat#readme",
+  "pnpm": {
+    "onlyBuiltDependencies": ["esbuild"]
+  },
   "publishConfig": {
     "access": "public"
   }