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