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