[{"data":1,"prerenderedAt":1333},["ShallowReactive",2],{"navigation":3,"/experiments/grainy-liquid":130,"authors":1216},[4],{"title":5,"path":6,"stem":7,"children":8,"page":129},"Experiments","/experiments","experiments",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125],{"title":10,"path":11,"stem":12},"Array of cameras","/experiments/array-cameras","experiments/array-cameras",{"title":14,"path":15,"stem":16},"Brickelangelo David","/experiments/brickelangelo-david","experiments/brickelangelo-david",{"title":18,"path":19,"stem":20},"Basic Brownian distribution","/experiments/brownian-distribution","experiments/brownian-distribution",{"title":22,"path":23,"stem":24},"Porsche 911 Car Showcase","/experiments/car-showcase","experiments/car-showcase",{"title":26,"path":27,"stem":28},"Coffee Smoke","/experiments/coffee-smoke","experiments/coffee-smoke",{"title":30,"path":31,"stem":32},"Cube Boy Dancefloor","/experiments/cube-boy-dancefloor","experiments/cube-boy-dancefloor",{"title":34,"path":35,"stem":36},"Cult of the lamb 🐑","/experiments/cult-of-the-lamb","experiments/cult-of-the-lamb",{"title":38,"path":39,"stem":40},"Dancing blob","/experiments/dancing-blob","experiments/dancing-blob",{"title":42,"path":43,"stem":44},"Fireworks Shader","/experiments/fireworks-shader","experiments/fireworks-shader",{"title":46,"path":47,"stem":48},"Galaxy Generator 🪐","/experiments/galaxy-generator","experiments/galaxy-generator",{"title":50,"path":51,"stem":52},"Glass/Plastic Material","/experiments/glass-material","experiments/glass-material",{"title":54,"path":55,"stem":56},"Grainy Liquid Blobs","/experiments/grainy-liquid","experiments/grainy-liquid",{"title":58,"path":59,"stem":60},"Haunted House","/experiments/haunted-house","experiments/haunted-house",{"title":62,"path":63,"stem":64},"Phone with HTML inside","/experiments/html-phone","experiments/html-phone",{"title":66,"path":67,"stem":68},"Low Poly Planet","/experiments/lowpoly-planet","experiments/lowpoly-planet",{"title":70,"path":71,"stem":72},"Magical Marbles","/experiments/magical-marbles","experiments/magical-marbles",{"title":74,"path":75,"stem":76},"Nuxt Stones","/experiments/nuxt-stones","experiments/nuxt-stones",{"title":78,"path":79,"stem":80},"Particle Pumpkin Shader","/experiments/particle-pumpkin","experiments/particle-pumpkin",{"title":82,"path":83,"stem":84},"Particles Morphing","/experiments/particles-morphing","experiments/particles-morphing",{"title":86,"path":87,"stem":88},"Pixel Noise Shaders Sandbox","/experiments/pixel-noise-shaders-sandbox","experiments/pixel-noise-shaders-sandbox",{"title":90,"path":91,"stem":92},"Pixel Plasma Shader","/experiments/pixel-plasma-shader","experiments/pixel-plasma-shader",{"title":94,"path":95,"stem":96},"Portal Journey","/experiments/portal-journey","experiments/portal-journey",{"title":98,"path":99,"stem":100},"Wizard's Potion Classroom","/experiments/potions-classroom","experiments/potions-classroom",{"title":102,"path":103,"stem":104},"Repulsion Effect","/experiments/repulsion-effect","experiments/repulsion-effect",{"title":106,"path":107,"stem":108},"Shadertoy Museum","/experiments/shadertoy-museum","experiments/shadertoy-museum",{"title":110,"path":111,"stem":112},"Space Game","/experiments/space-game","experiments/space-game",{"title":114,"path":115,"stem":116},"Halloween Spooky-saur 🎃","/experiments/spooky-saur","experiments/spooky-saur",{"title":118,"path":119,"stem":120},"Synthwave Landscape","/experiments/synthwave-landscape","experiments/synthwave-landscape",{"title":122,"path":123,"stem":124},"Texture Particle Cursor","/experiments/texture-particle-cursor","experiments/texture-particle-cursor",{"title":126,"path":127,"stem":128},"WebGPU","/experiments/webgpu","experiments/webgpu",false,{"id":131,"title":54,"author":132,"body":133,"date":1203,"description":1204,"extension":1205,"featured":129,"lastUpdated":1206,"meta":1207,"navigation":214,"path":55,"seo":1208,"stem":56,"tags":1209,"thumbnail":1214,"__hash__":1215},"experiments/experiments/grainy-liquid.md","alvarosabu",{"type":134,"value":135,"toc":1193},"minimark",[136,140,145,150,153,164,168,173,176,234,240,268,272,275,348,352,384,388,396,399,490,495,529,536,539,723,727,753,760,763,944,948,973,977,981,984,1010,1014,1017,1043,1047,1073,1077,1080,1153,1157,1160,1186,1189],[137,138,139],"p",{},"A dynamic website design featuring animated liquid blobs created with custom GLSL shaders, demonstrating organic deformation and fluid-like behavior.",[141,142,144],"h2",{"id":143},"technical-implementation","Technical Implementation",[146,147,149],"h3",{"id":148},"architecture-overview","Architecture Overview",[137,151,152],{},"The experiment consists of several key components working together to create the liquid blob effect:",[154,155,160],"pre",{"className":156,"code":158,"language":159},[157],"language-text","app/components/grainy-liquid/\n├── index.global.vue         # Main entry point\n├── WebsiteLayout.vue        # Full website layout with text overlay\n├── Experience.vue           # 3D scene setup\n├── MultiBlob.vue           # Multiple blob instances\n├── Blob.vue                # Individual blob component\n└── shaders/\n    ├── vertex.glsl         # Vertex displacement shader\n    ├── fragment.glsl       # Color and surface effects\n    ├── vertex.glsl.d.ts    # TypeScript declarations\n    └── fragment.glsl.d.ts\n","text",[161,162,158],"code",{"__ignoreMap":163},"",[146,165,167],{"id":166},"shader-system","Shader System",[169,170,172],"h4",{"id":171},"vertex-shader-displacement","Vertex Shader (Displacement)",[137,174,175],{},"The vertex shader creates organic liquid-like deformation using layered Simplex noise:",[154,177,181],{"className":178,"code":179,"language":180,"meta":163,"style":163},"language-glsl shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// Multiple noise layers for complex deformation\nfloat noise1 = snoise(pos * u_frequency + time * 0.5);\nfloat noise2 = snoise(pos * u_frequency * 2.0 + time * 0.3);\nfloat noise3 = snoise(pos * u_frequency * 4.0 + time * 0.7);\n\n// Combine with different amplitudes for organic movement\nfloat displacement = noise1 * 0.6 + noise2 * 0.3 + noise3 * 0.1;\nvec3 displacedPosition = pos + normal * displacement * u_amplitude;\n","glsl",[161,182,183,191,197,203,209,216,222,228],{"__ignoreMap":163},[184,185,188],"span",{"class":186,"line":187},"line",1,[184,189,190],{},"// Multiple noise layers for complex deformation\n",[184,192,194],{"class":186,"line":193},2,[184,195,196],{},"float noise1 = snoise(pos * u_frequency + time * 0.5);\n",[184,198,200],{"class":186,"line":199},3,[184,201,202],{},"float noise2 = snoise(pos * u_frequency * 2.0 + time * 0.3);\n",[184,204,206],{"class":186,"line":205},4,[184,207,208],{},"float noise3 = snoise(pos * u_frequency * 4.0 + time * 0.7);\n",[184,210,212],{"class":186,"line":211},5,[184,213,215],{"emptyLinePlaceholder":214},true,"\n",[184,217,219],{"class":186,"line":218},6,[184,220,221],{},"// Combine with different amplitudes for organic movement\n",[184,223,225],{"class":186,"line":224},7,[184,226,227],{},"float displacement = noise1 * 0.6 + noise2 * 0.3 + noise3 * 0.1;\n",[184,229,231],{"class":186,"line":230},8,[184,232,233],{},"vec3 displacedPosition = pos + normal * displacement * u_amplitude;\n",[137,235,236],{},[237,238,239],"strong",{},"Key Features:",[241,242,243,250,256,262],"ul",{},[244,245,246,249],"li",{},[237,247,248],{},"Simplex noise implementation"," for smooth, organic deformation",[244,251,252,255],{},[237,253,254],{},"Multi-layered noise"," with different frequencies and speeds",[244,257,258,261],{},[237,259,260],{},"Normal-based displacement"," to maintain blob volume",[244,263,264,267],{},[237,265,266],{},"Time-based animation"," for continuous fluid movement",[169,269,271],{"id":270},"fragment-shader-surface-effects","Fragment Shader (Surface Effects)",[137,273,274],{},"The fragment shader handles color mixing, surface effects, and visual texture:",[154,276,278],{"className":178,"code":277,"language":180,"meta":163,"style":163},"// Fresnel effect for liquid-like rim lighting\nfloat fresnel = 1.0 - dot(normal, viewDirection);\nfresnel = pow(fresnel, u_fresnelPower);\n\n// Flowing color mixing with noise\nvec2 flowUv = v_uv + u_time * 0.1;\nfloat colorNoise = fbm(flowUv * u_noiseScale);\nvec3 baseColor = mix(u_colorA, u_colorB, colorNoise);\nvec3 finalColor = mix(baseColor, u_colorC, fresnel);\n\n// Grain texture for surface detail\nfloat grain = random(v_uv * 100.0 + u_time * 0.02) * u_grainIntensity;\nfinalColor += vec3(grain);\n",[161,279,280,285,290,295,299,304,309,314,319,325,330,336,342],{"__ignoreMap":163},[184,281,282],{"class":186,"line":187},[184,283,284],{},"// Fresnel effect for liquid-like rim lighting\n",[184,286,287],{"class":186,"line":193},[184,288,289],{},"float fresnel = 1.0 - dot(normal, viewDirection);\n",[184,291,292],{"class":186,"line":199},[184,293,294],{},"fresnel = pow(fresnel, u_fresnelPower);\n",[184,296,297],{"class":186,"line":205},[184,298,215],{"emptyLinePlaceholder":214},[184,300,301],{"class":186,"line":211},[184,302,303],{},"// Flowing color mixing with noise\n",[184,305,306],{"class":186,"line":218},[184,307,308],{},"vec2 flowUv = v_uv + u_time * 0.1;\n",[184,310,311],{"class":186,"line":224},[184,312,313],{},"float colorNoise = fbm(flowUv * u_noiseScale);\n",[184,315,316],{"class":186,"line":230},[184,317,318],{},"vec3 baseColor = mix(u_colorA, u_colorB, colorNoise);\n",[184,320,322],{"class":186,"line":321},9,[184,323,324],{},"vec3 finalColor = mix(baseColor, u_colorC, fresnel);\n",[184,326,328],{"class":186,"line":327},10,[184,329,215],{"emptyLinePlaceholder":214},[184,331,333],{"class":186,"line":332},11,[184,334,335],{},"// Grain texture for surface detail\n",[184,337,339],{"class":186,"line":338},12,[184,340,341],{},"float grain = random(v_uv * 100.0 + u_time * 0.02) * u_grainIntensity;\n",[184,343,345],{"class":186,"line":344},13,[184,346,347],{},"finalColor += vec3(grain);\n",[137,349,350],{},[237,351,239],{},[241,353,354,360,366,372,378],{},[244,355,356,359],{},[237,357,358],{},"Fresnel effect"," for realistic edge lighting",[244,361,362,365],{},[237,363,364],{},"Fractal Brownian Motion (FBM)"," for organic color patterns",[244,367,368,371],{},[237,369,370],{},"Multi-layer grain"," for surface texture",[244,373,374,377],{},[237,375,376],{},"Flowing color animation"," synchronized with deformation",[244,379,380,383],{},[237,381,382],{},"Iridescent highlights"," for liquid shimmer",[146,385,387],{"id":386},"component-architecture","Component Architecture",[169,389,391,392,395],{"id":390},"blob-component-blobvue","Blob Component (",[161,393,394],{},"Blob.vue",")",[137,397,398],{},"Individual blob with customizable properties:",[154,400,404],{"className":401,"code":402,"language":403,"meta":163,"style":163},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","interface Props {\n  colorA?: string     // Primary color\n  colorB?: string     // Secondary color  \n  colorC?: string     // Highlight color\n  speed?: number      // Animation speed\n  amplitude?: number  // Deformation intensity\n}\n","typescript",[161,405,406,420,436,448,460,473,485],{"__ignoreMap":163},[184,407,408,412,416],{"class":186,"line":187},[184,409,411],{"class":410},"spNyl","interface",[184,413,415],{"class":414},"sBMFI"," Props",[184,417,419],{"class":418},"sMK4o"," {\n",[184,421,422,426,429,432],{"class":186,"line":193},[184,423,425],{"class":424},"swJcz","  colorA",[184,427,428],{"class":418},"?:",[184,430,431],{"class":414}," string",[184,433,435],{"class":434},"sHwdD","     // Primary color\n",[184,437,438,441,443,445],{"class":186,"line":199},[184,439,440],{"class":424},"  colorB",[184,442,428],{"class":418},[184,444,431],{"class":414},[184,446,447],{"class":434},"     // Secondary color  \n",[184,449,450,453,455,457],{"class":186,"line":205},[184,451,452],{"class":424},"  colorC",[184,454,428],{"class":418},[184,456,431],{"class":414},[184,458,459],{"class":434},"     // Highlight color\n",[184,461,462,465,467,470],{"class":186,"line":211},[184,463,464],{"class":424},"  speed",[184,466,428],{"class":418},[184,468,469],{"class":414}," number",[184,471,472],{"class":434},"      // Animation speed\n",[184,474,475,478,480,482],{"class":186,"line":218},[184,476,477],{"class":424},"  amplitude",[184,479,428],{"class":418},[184,481,469],{"class":414},[184,483,484],{"class":434},"  // Deformation intensity\n",[184,486,487],{"class":186,"line":224},[184,488,489],{"class":418},"}\n",[137,491,492],{},[237,493,494],{},"Features:",[241,496,497,507,513,519],{},[244,498,499,502,503,506],{},[237,500,501],{},"Interactive controls"," via ",[161,504,505],{},"useControls()"," for real-time adjustment",[244,508,509,512],{},[237,510,511],{},"Prop-based customization"," for different blob variations",[244,514,515,518],{},[237,516,517],{},"Shader uniform management"," with reactive updates",[244,520,521,524,525,528],{},[237,522,523],{},"Animation loop"," using ",[161,526,527],{},"useLoop()"," composable",[169,530,532,533,395],{"id":531},"multiblob-component-multiblobvue","MultiBlob Component (",[161,534,535],{},"MultiBlob.vue",[137,537,538],{},"Manages multiple blob instances with varied configurations:",[154,540,542],{"className":401,"code":541,"language":403,"meta":163,"style":163},"const blobs: BlobConfig[] = [\n  {\n    position: [-4, 2, 0],\n    scale: [1.8, 1.8, 1.8],\n    colorA: '#6366f1',  // Purple blob\n    colorB: '#8b5cf6',\n    colorC: '#ddd6fe',\n    speed: 0.6,\n    amplitude: 0.15\n  },\n  // Pink and gray blobs with different properties...\n]\n",[161,543,544,568,573,607,632,654,670,686,698,708,713,718],{"__ignoreMap":163},[184,545,546,549,553,556,559,562,565],{"class":186,"line":187},[184,547,548],{"class":410},"const",[184,550,552],{"class":551},"sTEyZ"," blobs",[184,554,555],{"class":418},":",[184,557,558],{"class":414}," BlobConfig",[184,560,561],{"class":551},"[] ",[184,563,564],{"class":418},"=",[184,566,567],{"class":551}," [\n",[184,569,570],{"class":186,"line":193},[184,571,572],{"class":418},"  {\n",[184,574,575,578,580,583,586,590,593,596,598,601,604],{"class":186,"line":199},[184,576,577],{"class":424},"    position",[184,579,555],{"class":418},[184,581,582],{"class":551}," [",[184,584,585],{"class":418},"-",[184,587,589],{"class":588},"sbssI","4",[184,591,592],{"class":418},",",[184,594,595],{"class":588}," 2",[184,597,592],{"class":418},[184,599,600],{"class":588}," 0",[184,602,603],{"class":551},"]",[184,605,606],{"class":418},",\n",[184,608,609,612,614,616,619,621,624,626,628,630],{"class":186,"line":205},[184,610,611],{"class":424},"    scale",[184,613,555],{"class":418},[184,615,582],{"class":551},[184,617,618],{"class":588},"1.8",[184,620,592],{"class":418},[184,622,623],{"class":588}," 1.8",[184,625,592],{"class":418},[184,627,623],{"class":588},[184,629,603],{"class":551},[184,631,606],{"class":418},[184,633,634,637,639,642,646,649,651],{"class":186,"line":211},[184,635,636],{"class":424},"    colorA",[184,638,555],{"class":418},[184,640,641],{"class":418}," '",[184,643,645],{"class":644},"sfazB","#6366f1",[184,647,648],{"class":418},"'",[184,650,592],{"class":418},[184,652,653],{"class":434},"  // Purple blob\n",[184,655,656,659,661,663,666,668],{"class":186,"line":218},[184,657,658],{"class":424},"    colorB",[184,660,555],{"class":418},[184,662,641],{"class":418},[184,664,665],{"class":644},"#8b5cf6",[184,667,648],{"class":418},[184,669,606],{"class":418},[184,671,672,675,677,679,682,684],{"class":186,"line":224},[184,673,674],{"class":424},"    colorC",[184,676,555],{"class":418},[184,678,641],{"class":418},[184,680,681],{"class":644},"#ddd6fe",[184,683,648],{"class":418},[184,685,606],{"class":418},[184,687,688,691,693,696],{"class":186,"line":230},[184,689,690],{"class":424},"    speed",[184,692,555],{"class":418},[184,694,695],{"class":588}," 0.6",[184,697,606],{"class":418},[184,699,700,703,705],{"class":186,"line":321},[184,701,702],{"class":424},"    amplitude",[184,704,555],{"class":418},[184,706,707],{"class":588}," 0.15\n",[184,709,710],{"class":186,"line":327},[184,711,712],{"class":418},"  },\n",[184,714,715],{"class":186,"line":332},[184,716,717],{"class":434},"  // Pink and gray blobs with different properties...\n",[184,719,720],{"class":186,"line":338},[184,721,722],{"class":551},"]\n",[137,724,725],{},[237,726,494],{},[241,728,729,735,741,747],{},[244,730,731,734],{},[237,732,733],{},"Varied positioning"," for layered composition",[244,736,737,740],{},[237,738,739],{},"Different scales"," to create depth",[244,742,743,746],{},[237,744,745],{},"Unique color palettes"," per blob",[244,748,749,752],{},[237,750,751],{},"Staggered animation speeds"," for organic movement",[169,754,756,757,395],{"id":755},"website-layout-websitelayoutvue","Website Layout (",[161,758,759],{},"WebsiteLayout.vue",[137,761,762],{},"Complete website design with 3D background and text overlay:",[154,764,768],{"className":765,"code":766,"language":767,"meta":163,"style":163},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"relative h-screen w-full overflow-hidden bg-gray-50\">\n    \u003C!-- 3D Canvas Background -->\n    \u003Cdiv class=\"absolute inset-0\">\n      \u003CTresCanvas window-size clear-color=\"#f8fafc\">\n        \u003CExperience />\n      \u003C/TresCanvas>\n    \u003C/div>\n\n    \u003C!-- Content Overlay -->\n    \u003Cdiv class=\"relative z-10 h-full flex flex-col\">\n      \u003C!-- Header, main content, decorative elements -->\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n","vue",[161,769,770,781,804,809,829,854,865,874,883,887,892,911,916,924,934],{"__ignoreMap":163},[184,771,772,775,778],{"class":186,"line":187},[184,773,774],{"class":418},"\u003C",[184,776,777],{"class":424},"template",[184,779,780],{"class":418},">\n",[184,782,783,786,789,792,794,797,800,802],{"class":186,"line":193},[184,784,785],{"class":418},"  \u003C",[184,787,788],{"class":424},"div",[184,790,791],{"class":410}," class",[184,793,564],{"class":418},[184,795,796],{"class":418},"\"",[184,798,799],{"class":644},"relative h-screen w-full overflow-hidden bg-gray-50",[184,801,796],{"class":418},[184,803,780],{"class":418},[184,805,806],{"class":186,"line":199},[184,807,808],{"class":434},"    \u003C!-- 3D Canvas Background -->\n",[184,810,811,814,816,818,820,822,825,827],{"class":186,"line":205},[184,812,813],{"class":418},"    \u003C",[184,815,788],{"class":424},[184,817,791],{"class":410},[184,819,564],{"class":418},[184,821,796],{"class":418},[184,823,824],{"class":644},"absolute inset-0",[184,826,796],{"class":418},[184,828,780],{"class":418},[184,830,831,834,837,840,843,845,847,850,852],{"class":186,"line":211},[184,832,833],{"class":418},"      \u003C",[184,835,836],{"class":424},"TresCanvas",[184,838,839],{"class":410}," window-size",[184,841,842],{"class":410}," clear-color",[184,844,564],{"class":418},[184,846,796],{"class":418},[184,848,849],{"class":644},"#f8fafc",[184,851,796],{"class":418},[184,853,780],{"class":418},[184,855,856,859,862],{"class":186,"line":218},[184,857,858],{"class":418},"        \u003C",[184,860,861],{"class":424},"Experience",[184,863,864],{"class":418}," />\n",[184,866,867,870,872],{"class":186,"line":224},[184,868,869],{"class":418},"      \u003C/",[184,871,836],{"class":424},[184,873,780],{"class":418},[184,875,876,879,881],{"class":186,"line":230},[184,877,878],{"class":418},"    \u003C/",[184,880,788],{"class":424},[184,882,780],{"class":418},[184,884,885],{"class":186,"line":321},[184,886,215],{"emptyLinePlaceholder":214},[184,888,889],{"class":186,"line":327},[184,890,891],{"class":434},"    \u003C!-- Content Overlay -->\n",[184,893,894,896,898,900,902,904,907,909],{"class":186,"line":332},[184,895,813],{"class":418},[184,897,788],{"class":424},[184,899,791],{"class":410},[184,901,564],{"class":418},[184,903,796],{"class":418},[184,905,906],{"class":644},"relative z-10 h-full flex flex-col",[184,908,796],{"class":418},[184,910,780],{"class":418},[184,912,913],{"class":186,"line":338},[184,914,915],{"class":434},"      \u003C!-- Header, main content, decorative elements -->\n",[184,917,918,920,922],{"class":186,"line":344},[184,919,878],{"class":418},[184,921,788],{"class":424},[184,923,780],{"class":418},[184,925,927,930,932],{"class":186,"line":926},14,[184,928,929],{"class":418},"  \u003C/",[184,931,788],{"class":424},[184,933,780],{"class":418},[184,935,937,940,942],{"class":186,"line":936},15,[184,938,939],{"class":418},"\u003C/",[184,941,777],{"class":424},[184,943,780],{"class":418},[137,945,946],{},[237,947,494],{},[241,949,950,956,962,968],{},[244,951,952,955],{},[237,953,954],{},"Layered design"," with 3D background and HTML overlay",[244,957,958,961],{},[237,959,960],{},"Responsive typography"," using TailwindCSS",[244,963,964,967],{},[237,965,966],{},"Google Fonts integration"," (Playfair Display serif)",[244,969,970,972],{},[237,971,501],{}," disabled for presentation mode",[146,974,976],{"id":975},"technical-highlights","Technical Highlights",[169,978,980],{"id":979},"noise-based-animation","Noise-Based Animation",[137,982,983],{},"The liquid effect relies on sophisticated noise techniques:",[241,985,986,992,998,1004],{},[244,987,988,991],{},[237,989,990],{},"Simplex noise"," for smooth, organic deformation patterns",[244,993,994,997],{},[237,995,996],{},"Multiple octaves"," combined for complex surface detail",[244,999,1000,1003],{},[237,1001,1002],{},"Time-based offsets"," creating flowing animation",[244,1005,1006,1009],{},[237,1007,1008],{},"Frequency variation"," for different scales of movement",[169,1011,1013],{"id":1012},"color-system","Color System",[137,1015,1016],{},"Realistic liquid color mixing:",[241,1018,1019,1025,1031,1037],{},[244,1020,1021,1024],{},[237,1022,1023],{},"Fresnel-based rim lighting"," mimicking surface tension",[244,1026,1027,1030],{},[237,1028,1029],{},"Flowing color patterns"," using FBM noise",[244,1032,1033,1036],{},[237,1034,1035],{},"Multi-color blending"," for realistic liquid appearance",[244,1038,1039,1042],{},[237,1040,1041],{},"Grain texture overlay"," for surface detail",[169,1044,1046],{"id":1045},"performance-optimization","Performance Optimization",[241,1048,1049,1055,1061,1067],{},[244,1050,1051,1054],{},[237,1052,1053],{},"Efficient shader implementation"," with clamped displacement",[244,1056,1057,1060],{},[237,1058,1059],{},"Instanced blob rendering"," for multiple objects",[244,1062,1063,1066],{},[237,1064,1065],{},"Optimized geometry"," using icosahedron base mesh",[244,1068,1069,1072],{},[237,1070,1071],{},"Controlled animation speeds"," for smooth performance",[146,1074,1076],{"id":1075},"shader-mathematics","Shader Mathematics",[137,1078,1079],{},"The core deformation uses mathematical functions to simulate liquid behavior:",[154,1081,1083],{"className":178,"code":1082,"language":180,"meta":163,"style":163},"// Simplex noise for organic patterns\nfloat snoise(vec3 v) { /* Implementation */ }\n\n// Fractal Brownian Motion for color variation\nfloat fbm(vec2 st) {\n    float value = 0.0;\n    float amplitude = 0.5;\n    for (int i = 0; i \u003C 5; i++) {\n        value += amplitude * noise(st * frequency);\n        frequency *= 2.0;\n        amplitude *= 0.5;\n    }\n    return value;\n}\n",[161,1084,1085,1090,1095,1099,1104,1109,1114,1119,1124,1129,1134,1139,1144,1149],{"__ignoreMap":163},[184,1086,1087],{"class":186,"line":187},[184,1088,1089],{},"// Simplex noise for organic patterns\n",[184,1091,1092],{"class":186,"line":193},[184,1093,1094],{},"float snoise(vec3 v) { /* Implementation */ }\n",[184,1096,1097],{"class":186,"line":199},[184,1098,215],{"emptyLinePlaceholder":214},[184,1100,1101],{"class":186,"line":205},[184,1102,1103],{},"// Fractal Brownian Motion for color variation\n",[184,1105,1106],{"class":186,"line":211},[184,1107,1108],{},"float fbm(vec2 st) {\n",[184,1110,1111],{"class":186,"line":218},[184,1112,1113],{},"    float value = 0.0;\n",[184,1115,1116],{"class":186,"line":224},[184,1117,1118],{},"    float amplitude = 0.5;\n",[184,1120,1121],{"class":186,"line":230},[184,1122,1123],{},"    for (int i = 0; i \u003C 5; i++) {\n",[184,1125,1126],{"class":186,"line":321},[184,1127,1128],{},"        value += amplitude * noise(st * frequency);\n",[184,1130,1131],{"class":186,"line":327},[184,1132,1133],{},"        frequency *= 2.0;\n",[184,1135,1136],{"class":186,"line":332},[184,1137,1138],{},"        amplitude *= 0.5;\n",[184,1140,1141],{"class":186,"line":338},[184,1142,1143],{},"    }\n",[184,1145,1146],{"class":186,"line":344},[184,1147,1148],{},"    return value;\n",[184,1150,1151],{"class":186,"line":926},[184,1152,489],{},[146,1154,1156],{"id":1155},"design-inspiration","Design Inspiration",[137,1158,1159],{},"The visual style draws from modern liquid design trends:",[241,1161,1162,1168,1174,1180],{},[244,1163,1164,1167],{},[237,1165,1166],{},"Organic blob shapes"," popular in contemporary web design",[244,1169,1170,1173],{},[237,1171,1172],{},"Grainy texture effects"," for tactile visual appeal",[244,1175,1176,1179],{},[237,1177,1178],{},"Gradient color schemes"," with purple/pink palettes",[244,1181,1182,1185],{},[237,1183,1184],{},"Minimalist layout"," focusing on typography and shapes",[137,1187,1188],{},"This experiment demonstrates how GLSL shaders can create sophisticated visual effects in web applications, combining mathematical precision with organic, fluid aesthetics.",[1190,1191,1192],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":163,"searchDepth":193,"depth":193,"links":1194},[1195],{"id":143,"depth":193,"text":144,"children":1196},[1197,1198,1199,1200,1201,1202],{"id":148,"depth":199,"text":149},{"id":166,"depth":199,"text":167},{"id":386,"depth":199,"text":387},{"id":975,"depth":199,"text":976},{"id":1075,"depth":199,"text":1076},{"id":1155,"depth":199,"text":1156},"2025-08-13","Animated liquid blobs with GLSL shaders, noise effects, and organic deformation inspired by oil drops in water","md","2025-12-02",{},{"title":54,"description":1204},[1210,180,1211,1212,1213],"shaders","liquid","noise","animation",null,"B7v26D4Tjz44MJ_zlUUfHQpd-pIzzN0k7AlMuNkEtpI",[1217,1233,1247,1264,1280,1298,1315],{"id":1218,"title":1219,"avatar":1220,"body":1221,"description":163,"email":1225,"extension":1205,"github":132,"meta":1226,"name":1227,"navigation":214,"path":1228,"seo":1229,"slug":132,"stem":1230,"twitter":132,"website":1231,"__hash__":1232},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpg",{"type":134,"value":1222,"toc":1223},[],{"title":163,"searchDepth":193,"depth":193,"links":1224},[],"hola@alvarosaburido.dev",{},"Alvaro Saburido","/authors/alvarosabu",{"description":163},"authors/alvarosabu","https://alvarosaburido.dev","FWpr6-OcVRzMvvsjRaD8icRidgpKVLCtrKy9-l_5GZM",{"id":1234,"title":1235,"avatar":1236,"body":1237,"description":163,"email":1214,"extension":1205,"github":1241,"meta":1242,"name":1241,"navigation":214,"path":1243,"seo":1244,"slug":1241,"stem":1245,"twitter":1214,"website":1214,"__hash__":1246},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":134,"value":1238,"toc":1239},[],{"title":163,"searchDepth":193,"depth":193,"links":1240},[],"andretchen0",{},"/authors/andretchen0",{"description":163},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":1248,"title":1249,"avatar":1250,"body":1251,"description":163,"email":1255,"extension":1205,"github":1256,"meta":1257,"name":1258,"navigation":214,"path":1259,"seo":1260,"slug":1256,"stem":1261,"twitter":1262,"website":1214,"__hash__":1263},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":134,"value":1252,"toc":1253},[],{"title":163,"searchDepth":193,"depth":193,"links":1254},[],"montastier.damien@gmail.com","damienmontastier",{},"Damien Montastier","/authors/damienmontastier",{"description":163},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":1265,"title":1266,"avatar":1267,"body":1268,"description":163,"email":1214,"extension":1205,"github":1272,"meta":1273,"name":1274,"navigation":214,"path":1275,"seo":1276,"slug":1272,"stem":1277,"twitter":1278,"website":1214,"__hash__":1279},"authors/authors/franciscohermida.md","Franciscohermida","/avatars/franciscohermida.jpg",{"type":134,"value":1269,"toc":1270},[],{"title":163,"searchDepth":193,"depth":193,"links":1271},[],"franciscohermida",{},"Francisco Hermida","/authors/franciscohermida",{"description":163},"authors/franciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":1281,"title":1282,"avatar":1283,"body":1284,"description":163,"email":1288,"extension":1205,"github":1289,"meta":1290,"name":1282,"navigation":214,"path":1291,"seo":1292,"slug":1293,"stem":1294,"twitter":1295,"website":1296,"__hash__":1297},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":134,"value":1285,"toc":1286},[],{"title":163,"searchDepth":193,"depth":193,"links":1287},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":163},"jaime-bboyjt","authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":1299,"title":1300,"avatar":1301,"body":1302,"description":163,"email":1306,"extension":1205,"github":1307,"meta":1308,"name":1309,"navigation":214,"path":1310,"seo":1311,"slug":1309,"stem":1312,"twitter":1306,"website":1313,"__hash__":1314},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":134,"value":1303,"toc":1304},[],{"title":163,"searchDepth":193,"depth":193,"links":1305},[],"none","luckystriike22",{},"luckystriike","/authors/luckystriike",{"description":163},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":1316,"title":1317,"avatar":1318,"body":1319,"description":163,"email":1323,"extension":1205,"github":1324,"meta":1325,"name":1326,"navigation":214,"path":1327,"seo":1328,"slug":1324,"stem":1329,"twitter":1330,"website":1331,"__hash__":1332},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":134,"value":1320,"toc":1321},[],{"title":163,"searchDepth":193,"depth":193,"links":1322},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","/authors/neoprint3d",{"description":163},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",1774953670491]