[{"data":1,"prerenderedAt":1093},["ShallowReactive",2],{"embed-grainy-liquid":3},{"id":4,"title":5,"author":6,"body":7,"date":1077,"description":1078,"extension":1079,"featured":1080,"lastUpdated":1081,"meta":1082,"navigation":88,"path":1083,"responsive":1080,"seo":1084,"stem":1085,"tags":1086,"thumbnail":1091,"__hash__":1092},"experiments\u002Fexperiments\u002Fgrainy-liquid.md","Grainy Liquid Blobs","alvarosabu",{"type":8,"value":9,"toc":1067},"minimark",[10,14,19,24,27,38,42,47,50,108,114,142,146,149,222,226,258,262,270,273,364,369,403,410,413,597,601,627,634,637,818,822,847,851,855,858,884,888,891,917,921,947,951,954,1027,1031,1034,1060,1063],[11,12,13],"p",{},"A dynamic website design featuring animated liquid blobs created with custom GLSL shaders, demonstrating organic deformation and fluid-like behavior.",[15,16,18],"h2",{"id":17},"technical-implementation","Technical Implementation",[20,21,23],"h3",{"id":22},"architecture-overview","Architecture Overview",[11,25,26],{},"The experiment consists of several key components working together to create the liquid blob effect:",[28,29,34],"pre",{"className":30,"code":32,"language":33},[31],"language-text","app\u002Fcomponents\u002Fgrainy-liquid\u002F\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\u002F\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",[35,36,32],"code",{"__ignoreMap":37},"",[20,39,41],{"id":40},"shader-system","Shader System",[43,44,46],"h4",{"id":45},"vertex-shader-displacement","Vertex Shader (Displacement)",[11,48,49],{},"The vertex shader creates organic liquid-like deformation using layered Simplex noise:",[28,51,55],{"className":52,"code":53,"language":54,"meta":37,"style":37},"language-glsl shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F 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\u002F\u002F 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",[35,56,57,65,71,77,83,90,96,102],{"__ignoreMap":37},[58,59,62],"span",{"class":60,"line":61},"line",1,[58,63,64],{},"\u002F\u002F Multiple noise layers for complex deformation\n",[58,66,68],{"class":60,"line":67},2,[58,69,70],{},"float noise1 = snoise(pos * u_frequency + time * 0.5);\n",[58,72,74],{"class":60,"line":73},3,[58,75,76],{},"float noise2 = snoise(pos * u_frequency * 2.0 + time * 0.3);\n",[58,78,80],{"class":60,"line":79},4,[58,81,82],{},"float noise3 = snoise(pos * u_frequency * 4.0 + time * 0.7);\n",[58,84,86],{"class":60,"line":85},5,[58,87,89],{"emptyLinePlaceholder":88},true,"\n",[58,91,93],{"class":60,"line":92},6,[58,94,95],{},"\u002F\u002F Combine with different amplitudes for organic movement\n",[58,97,99],{"class":60,"line":98},7,[58,100,101],{},"float displacement = noise1 * 0.6 + noise2 * 0.3 + noise3 * 0.1;\n",[58,103,105],{"class":60,"line":104},8,[58,106,107],{},"vec3 displacedPosition = pos + normal * displacement * u_amplitude;\n",[11,109,110],{},[111,112,113],"strong",{},"Key Features:",[115,116,117,124,130,136],"ul",{},[118,119,120,123],"li",{},[111,121,122],{},"Simplex noise implementation"," for smooth, organic deformation",[118,125,126,129],{},[111,127,128],{},"Multi-layered noise"," with different frequencies and speeds",[118,131,132,135],{},[111,133,134],{},"Normal-based displacement"," to maintain blob volume",[118,137,138,141],{},[111,139,140],{},"Time-based animation"," for continuous fluid movement",[43,143,145],{"id":144},"fragment-shader-surface-effects","Fragment Shader (Surface Effects)",[11,147,148],{},"The fragment shader handles color mixing, surface effects, and visual texture:",[28,150,152],{"className":52,"code":151,"language":54,"meta":37,"style":37},"\u002F\u002F Fresnel effect for liquid-like rim lighting\nfloat fresnel = 1.0 - dot(normal, viewDirection);\nfresnel = pow(fresnel, u_fresnelPower);\n\n\u002F\u002F 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\u002F\u002F Grain texture for surface detail\nfloat grain = random(v_uv * 100.0 + u_time * 0.02) * u_grainIntensity;\nfinalColor += vec3(grain);\n",[35,153,154,159,164,169,173,178,183,188,193,199,204,210,216],{"__ignoreMap":37},[58,155,156],{"class":60,"line":61},[58,157,158],{},"\u002F\u002F Fresnel effect for liquid-like rim lighting\n",[58,160,161],{"class":60,"line":67},[58,162,163],{},"float fresnel = 1.0 - dot(normal, viewDirection);\n",[58,165,166],{"class":60,"line":73},[58,167,168],{},"fresnel = pow(fresnel, u_fresnelPower);\n",[58,170,171],{"class":60,"line":79},[58,172,89],{"emptyLinePlaceholder":88},[58,174,175],{"class":60,"line":85},[58,176,177],{},"\u002F\u002F Flowing color mixing with noise\n",[58,179,180],{"class":60,"line":92},[58,181,182],{},"vec2 flowUv = v_uv + u_time * 0.1;\n",[58,184,185],{"class":60,"line":98},[58,186,187],{},"float colorNoise = fbm(flowUv * u_noiseScale);\n",[58,189,190],{"class":60,"line":104},[58,191,192],{},"vec3 baseColor = mix(u_colorA, u_colorB, colorNoise);\n",[58,194,196],{"class":60,"line":195},9,[58,197,198],{},"vec3 finalColor = mix(baseColor, u_colorC, fresnel);\n",[58,200,202],{"class":60,"line":201},10,[58,203,89],{"emptyLinePlaceholder":88},[58,205,207],{"class":60,"line":206},11,[58,208,209],{},"\u002F\u002F Grain texture for surface detail\n",[58,211,213],{"class":60,"line":212},12,[58,214,215],{},"float grain = random(v_uv * 100.0 + u_time * 0.02) * u_grainIntensity;\n",[58,217,219],{"class":60,"line":218},13,[58,220,221],{},"finalColor += vec3(grain);\n",[11,223,224],{},[111,225,113],{},[115,227,228,234,240,246,252],{},[118,229,230,233],{},[111,231,232],{},"Fresnel effect"," for realistic edge lighting",[118,235,236,239],{},[111,237,238],{},"Fractal Brownian Motion (FBM)"," for organic color patterns",[118,241,242,245],{},[111,243,244],{},"Multi-layer grain"," for surface texture",[118,247,248,251],{},[111,249,250],{},"Flowing color animation"," synchronized with deformation",[118,253,254,257],{},[111,255,256],{},"Iridescent highlights"," for liquid shimmer",[20,259,261],{"id":260},"component-architecture","Component Architecture",[43,263,265,266,269],{"id":264},"blob-component-blobvue","Blob Component (",[35,267,268],{},"Blob.vue",")",[11,271,272],{},"Individual blob with customizable properties:",[28,274,278],{"className":275,"code":276,"language":277,"meta":37,"style":37},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","interface Props {\n  colorA?: string     \u002F\u002F Primary color\n  colorB?: string     \u002F\u002F Secondary color  \n  colorC?: string     \u002F\u002F Highlight color\n  speed?: number      \u002F\u002F Animation speed\n  amplitude?: number  \u002F\u002F Deformation intensity\n}\n","typescript",[35,279,280,294,310,322,334,347,359],{"__ignoreMap":37},[58,281,282,286,290],{"class":60,"line":61},[58,283,285],{"class":284},"spNyl","interface",[58,287,289],{"class":288},"sBMFI"," Props",[58,291,293],{"class":292},"sMK4o"," {\n",[58,295,296,300,303,306],{"class":60,"line":67},[58,297,299],{"class":298},"swJcz","  colorA",[58,301,302],{"class":292},"?:",[58,304,305],{"class":288}," string",[58,307,309],{"class":308},"sHwdD","     \u002F\u002F Primary color\n",[58,311,312,315,317,319],{"class":60,"line":73},[58,313,314],{"class":298},"  colorB",[58,316,302],{"class":292},[58,318,305],{"class":288},[58,320,321],{"class":308},"     \u002F\u002F Secondary color  \n",[58,323,324,327,329,331],{"class":60,"line":79},[58,325,326],{"class":298},"  colorC",[58,328,302],{"class":292},[58,330,305],{"class":288},[58,332,333],{"class":308},"     \u002F\u002F Highlight color\n",[58,335,336,339,341,344],{"class":60,"line":85},[58,337,338],{"class":298},"  speed",[58,340,302],{"class":292},[58,342,343],{"class":288}," number",[58,345,346],{"class":308},"      \u002F\u002F Animation speed\n",[58,348,349,352,354,356],{"class":60,"line":92},[58,350,351],{"class":298},"  amplitude",[58,353,302],{"class":292},[58,355,343],{"class":288},[58,357,358],{"class":308},"  \u002F\u002F Deformation intensity\n",[58,360,361],{"class":60,"line":98},[58,362,363],{"class":292},"}\n",[11,365,366],{},[111,367,368],{},"Features:",[115,370,371,381,387,393],{},[118,372,373,376,377,380],{},[111,374,375],{},"Interactive controls"," via ",[35,378,379],{},"useControls()"," for real-time adjustment",[118,382,383,386],{},[111,384,385],{},"Prop-based customization"," for different blob variations",[118,388,389,392],{},[111,390,391],{},"Shader uniform management"," with reactive updates",[118,394,395,398,399,402],{},[111,396,397],{},"Animation loop"," using ",[35,400,401],{},"useLoop()"," composable",[43,404,406,407,269],{"id":405},"multiblob-component-multiblobvue","MultiBlob Component (",[35,408,409],{},"MultiBlob.vue",[11,411,412],{},"Manages multiple blob instances with varied configurations:",[28,414,416],{"className":275,"code":415,"language":277,"meta":37,"style":37},"const blobs: BlobConfig[] = [\n  {\n    position: [-4, 2, 0],\n    scale: [1.8, 1.8, 1.8],\n    colorA: '#6366f1',  \u002F\u002F Purple blob\n    colorB: '#8b5cf6',\n    colorC: '#ddd6fe',\n    speed: 0.6,\n    amplitude: 0.15\n  },\n  \u002F\u002F Pink and gray blobs with different properties...\n]\n",[35,417,418,442,447,481,506,528,544,560,572,582,587,592],{"__ignoreMap":37},[58,419,420,423,427,430,433,436,439],{"class":60,"line":61},[58,421,422],{"class":284},"const",[58,424,426],{"class":425},"sTEyZ"," blobs",[58,428,429],{"class":292},":",[58,431,432],{"class":288}," BlobConfig",[58,434,435],{"class":425},"[] ",[58,437,438],{"class":292},"=",[58,440,441],{"class":425}," [\n",[58,443,444],{"class":60,"line":67},[58,445,446],{"class":292},"  {\n",[58,448,449,452,454,457,460,464,467,470,472,475,478],{"class":60,"line":73},[58,450,451],{"class":298},"    position",[58,453,429],{"class":292},[58,455,456],{"class":425}," [",[58,458,459],{"class":292},"-",[58,461,463],{"class":462},"sbssI","4",[58,465,466],{"class":292},",",[58,468,469],{"class":462}," 2",[58,471,466],{"class":292},[58,473,474],{"class":462}," 0",[58,476,477],{"class":425},"]",[58,479,480],{"class":292},",\n",[58,482,483,486,488,490,493,495,498,500,502,504],{"class":60,"line":79},[58,484,485],{"class":298},"    scale",[58,487,429],{"class":292},[58,489,456],{"class":425},[58,491,492],{"class":462},"1.8",[58,494,466],{"class":292},[58,496,497],{"class":462}," 1.8",[58,499,466],{"class":292},[58,501,497],{"class":462},[58,503,477],{"class":425},[58,505,480],{"class":292},[58,507,508,511,513,516,520,523,525],{"class":60,"line":85},[58,509,510],{"class":298},"    colorA",[58,512,429],{"class":292},[58,514,515],{"class":292}," '",[58,517,519],{"class":518},"sfazB","#6366f1",[58,521,522],{"class":292},"'",[58,524,466],{"class":292},[58,526,527],{"class":308},"  \u002F\u002F Purple blob\n",[58,529,530,533,535,537,540,542],{"class":60,"line":92},[58,531,532],{"class":298},"    colorB",[58,534,429],{"class":292},[58,536,515],{"class":292},[58,538,539],{"class":518},"#8b5cf6",[58,541,522],{"class":292},[58,543,480],{"class":292},[58,545,546,549,551,553,556,558],{"class":60,"line":98},[58,547,548],{"class":298},"    colorC",[58,550,429],{"class":292},[58,552,515],{"class":292},[58,554,555],{"class":518},"#ddd6fe",[58,557,522],{"class":292},[58,559,480],{"class":292},[58,561,562,565,567,570],{"class":60,"line":104},[58,563,564],{"class":298},"    speed",[58,566,429],{"class":292},[58,568,569],{"class":462}," 0.6",[58,571,480],{"class":292},[58,573,574,577,579],{"class":60,"line":195},[58,575,576],{"class":298},"    amplitude",[58,578,429],{"class":292},[58,580,581],{"class":462}," 0.15\n",[58,583,584],{"class":60,"line":201},[58,585,586],{"class":292},"  },\n",[58,588,589],{"class":60,"line":206},[58,590,591],{"class":308},"  \u002F\u002F Pink and gray blobs with different properties...\n",[58,593,594],{"class":60,"line":212},[58,595,596],{"class":425},"]\n",[11,598,599],{},[111,600,368],{},[115,602,603,609,615,621],{},[118,604,605,608],{},[111,606,607],{},"Varied positioning"," for layered composition",[118,610,611,614],{},[111,612,613],{},"Different scales"," to create depth",[118,616,617,620],{},[111,618,619],{},"Unique color palettes"," per blob",[118,622,623,626],{},[111,624,625],{},"Staggered animation speeds"," for organic movement",[43,628,630,631,269],{"id":629},"website-layout-websitelayoutvue","Website Layout (",[35,632,633],{},"WebsiteLayout.vue",[11,635,636],{},"Complete website design with 3D background and text overlay:",[28,638,642],{"className":639,"code":640,"language":641,"meta":37,"style":37},"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 \u002F>\n      \u003C\u002FTresCanvas>\n    \u003C\u002Fdiv>\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\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[35,643,644,655,678,683,703,728,739,748,757,761,766,785,790,798,808],{"__ignoreMap":37},[58,645,646,649,652],{"class":60,"line":61},[58,647,648],{"class":292},"\u003C",[58,650,651],{"class":298},"template",[58,653,654],{"class":292},">\n",[58,656,657,660,663,666,668,671,674,676],{"class":60,"line":67},[58,658,659],{"class":292},"  \u003C",[58,661,662],{"class":298},"div",[58,664,665],{"class":284}," class",[58,667,438],{"class":292},[58,669,670],{"class":292},"\"",[58,672,673],{"class":518},"relative h-screen w-full overflow-hidden bg-gray-50",[58,675,670],{"class":292},[58,677,654],{"class":292},[58,679,680],{"class":60,"line":73},[58,681,682],{"class":308},"    \u003C!-- 3D Canvas Background -->\n",[58,684,685,688,690,692,694,696,699,701],{"class":60,"line":79},[58,686,687],{"class":292},"    \u003C",[58,689,662],{"class":298},[58,691,665],{"class":284},[58,693,438],{"class":292},[58,695,670],{"class":292},[58,697,698],{"class":518},"absolute inset-0",[58,700,670],{"class":292},[58,702,654],{"class":292},[58,704,705,708,711,714,717,719,721,724,726],{"class":60,"line":85},[58,706,707],{"class":292},"      \u003C",[58,709,710],{"class":298},"TresCanvas",[58,712,713],{"class":284}," window-size",[58,715,716],{"class":284}," clear-color",[58,718,438],{"class":292},[58,720,670],{"class":292},[58,722,723],{"class":518},"#f8fafc",[58,725,670],{"class":292},[58,727,654],{"class":292},[58,729,730,733,736],{"class":60,"line":92},[58,731,732],{"class":292},"        \u003C",[58,734,735],{"class":298},"Experience",[58,737,738],{"class":292}," \u002F>\n",[58,740,741,744,746],{"class":60,"line":98},[58,742,743],{"class":292},"      \u003C\u002F",[58,745,710],{"class":298},[58,747,654],{"class":292},[58,749,750,753,755],{"class":60,"line":104},[58,751,752],{"class":292},"    \u003C\u002F",[58,754,662],{"class":298},[58,756,654],{"class":292},[58,758,759],{"class":60,"line":195},[58,760,89],{"emptyLinePlaceholder":88},[58,762,763],{"class":60,"line":201},[58,764,765],{"class":308},"    \u003C!-- Content Overlay -->\n",[58,767,768,770,772,774,776,778,781,783],{"class":60,"line":206},[58,769,687],{"class":292},[58,771,662],{"class":298},[58,773,665],{"class":284},[58,775,438],{"class":292},[58,777,670],{"class":292},[58,779,780],{"class":518},"relative z-10 h-full flex flex-col",[58,782,670],{"class":292},[58,784,654],{"class":292},[58,786,787],{"class":60,"line":212},[58,788,789],{"class":308},"      \u003C!-- Header, main content, decorative elements -->\n",[58,791,792,794,796],{"class":60,"line":218},[58,793,752],{"class":292},[58,795,662],{"class":298},[58,797,654],{"class":292},[58,799,801,804,806],{"class":60,"line":800},14,[58,802,803],{"class":292},"  \u003C\u002F",[58,805,662],{"class":298},[58,807,654],{"class":292},[58,809,811,814,816],{"class":60,"line":810},15,[58,812,813],{"class":292},"\u003C\u002F",[58,815,651],{"class":298},[58,817,654],{"class":292},[11,819,820],{},[111,821,368],{},[115,823,824,830,836,842],{},[118,825,826,829],{},[111,827,828],{},"Layered design"," with 3D background and HTML overlay",[118,831,832,835],{},[111,833,834],{},"Responsive typography"," using TailwindCSS",[118,837,838,841],{},[111,839,840],{},"Google Fonts integration"," (Playfair Display serif)",[118,843,844,846],{},[111,845,375],{}," disabled for presentation mode",[20,848,850],{"id":849},"technical-highlights","Technical Highlights",[43,852,854],{"id":853},"noise-based-animation","Noise-Based Animation",[11,856,857],{},"The liquid effect relies on sophisticated noise techniques:",[115,859,860,866,872,878],{},[118,861,862,865],{},[111,863,864],{},"Simplex noise"," for smooth, organic deformation patterns",[118,867,868,871],{},[111,869,870],{},"Multiple octaves"," combined for complex surface detail",[118,873,874,877],{},[111,875,876],{},"Time-based offsets"," creating flowing animation",[118,879,880,883],{},[111,881,882],{},"Frequency variation"," for different scales of movement",[43,885,887],{"id":886},"color-system","Color System",[11,889,890],{},"Realistic liquid color mixing:",[115,892,893,899,905,911],{},[118,894,895,898],{},[111,896,897],{},"Fresnel-based rim lighting"," mimicking surface tension",[118,900,901,904],{},[111,902,903],{},"Flowing color patterns"," using FBM noise",[118,906,907,910],{},[111,908,909],{},"Multi-color blending"," for realistic liquid appearance",[118,912,913,916],{},[111,914,915],{},"Grain texture overlay"," for surface detail",[43,918,920],{"id":919},"performance-optimization","Performance Optimization",[115,922,923,929,935,941],{},[118,924,925,928],{},[111,926,927],{},"Efficient shader implementation"," with clamped displacement",[118,930,931,934],{},[111,932,933],{},"Instanced blob rendering"," for multiple objects",[118,936,937,940],{},[111,938,939],{},"Optimized geometry"," using icosahedron base mesh",[118,942,943,946],{},[111,944,945],{},"Controlled animation speeds"," for smooth performance",[20,948,950],{"id":949},"shader-mathematics","Shader Mathematics",[11,952,953],{},"The core deformation uses mathematical functions to simulate liquid behavior:",[28,955,957],{"className":52,"code":956,"language":54,"meta":37,"style":37},"\u002F\u002F Simplex noise for organic patterns\nfloat snoise(vec3 v) { \u002F* Implementation *\u002F }\n\n\u002F\u002F 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",[35,958,959,964,969,973,978,983,988,993,998,1003,1008,1013,1018,1023],{"__ignoreMap":37},[58,960,961],{"class":60,"line":61},[58,962,963],{},"\u002F\u002F Simplex noise for organic patterns\n",[58,965,966],{"class":60,"line":67},[58,967,968],{},"float snoise(vec3 v) { \u002F* Implementation *\u002F }\n",[58,970,971],{"class":60,"line":73},[58,972,89],{"emptyLinePlaceholder":88},[58,974,975],{"class":60,"line":79},[58,976,977],{},"\u002F\u002F Fractal Brownian Motion for color variation\n",[58,979,980],{"class":60,"line":85},[58,981,982],{},"float fbm(vec2 st) {\n",[58,984,985],{"class":60,"line":92},[58,986,987],{},"    float value = 0.0;\n",[58,989,990],{"class":60,"line":98},[58,991,992],{},"    float amplitude = 0.5;\n",[58,994,995],{"class":60,"line":104},[58,996,997],{},"    for (int i = 0; i \u003C 5; i++) {\n",[58,999,1000],{"class":60,"line":195},[58,1001,1002],{},"        value += amplitude * noise(st * frequency);\n",[58,1004,1005],{"class":60,"line":201},[58,1006,1007],{},"        frequency *= 2.0;\n",[58,1009,1010],{"class":60,"line":206},[58,1011,1012],{},"        amplitude *= 0.5;\n",[58,1014,1015],{"class":60,"line":212},[58,1016,1017],{},"    }\n",[58,1019,1020],{"class":60,"line":218},[58,1021,1022],{},"    return value;\n",[58,1024,1025],{"class":60,"line":800},[58,1026,363],{},[20,1028,1030],{"id":1029},"design-inspiration","Design Inspiration",[11,1032,1033],{},"The visual style draws from modern liquid design trends:",[115,1035,1036,1042,1048,1054],{},[118,1037,1038,1041],{},[111,1039,1040],{},"Organic blob shapes"," popular in contemporary web design",[118,1043,1044,1047],{},[111,1045,1046],{},"Grainy texture effects"," for tactile visual appeal",[118,1049,1050,1053],{},[111,1051,1052],{},"Gradient color schemes"," with purple\u002Fpink palettes",[118,1055,1056,1059],{},[111,1057,1058],{},"Minimalist layout"," focusing on typography and shapes",[11,1061,1062],{},"This experiment demonstrates how GLSL shaders can create sophisticated visual effects in web applications, combining mathematical precision with organic, fluid aesthetics.",[1064,1065,1066],"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":37,"searchDepth":67,"depth":67,"links":1068},[1069],{"id":17,"depth":67,"text":18,"children":1070},[1071,1072,1073,1074,1075,1076],{"id":22,"depth":73,"text":23},{"id":40,"depth":73,"text":41},{"id":260,"depth":73,"text":261},{"id":849,"depth":73,"text":850},{"id":949,"depth":73,"text":950},{"id":1029,"depth":73,"text":1030},"2025-08-13","Animated liquid blobs with GLSL shaders, noise effects, and organic deformation inspired by oil drops in water","md",false,"2025-12-02",{},"\u002Fexperiments\u002Fgrainy-liquid",{"title":5,"description":1078},"experiments\u002Fgrainy-liquid",[1087,54,1088,1089,1090],"shaders","liquid","noise","animation","\u002Fexperiments\u002Fgrainy-liquid.webp","TuRb2h7_8_MXnjtXc8I6vC2sH0Xv7-rzh7bd4PWhT_I",1793714844056]