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