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