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