[{"data":1,"prerenderedAt":504},["ShallowReactive",2],{"navigation":3,"/experiments/magical-marbles":130,"authors":386},[4],{"title":5,"path":6,"stem":7,"children":8,"page":129},"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],{"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},"Pixel Noise Shaders Sandbox","/experiments/pixel-noise-shaders-sandbox","experiments/pixel-noise-shaders-sandbox",{"title":90,"path":91,"stem":92},"Pixel Plasma Shader","/experiments/pixel-plasma-shader","experiments/pixel-plasma-shader",{"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},"Repulsion Effect","/experiments/repulsion-effect","experiments/repulsion-effect",{"title":106,"path":107,"stem":108},"Shadertoy Museum","/experiments/shadertoy-museum","experiments/shadertoy-museum",{"title":110,"path":111,"stem":112},"Space Game","/experiments/space-game","experiments/space-game",{"title":114,"path":115,"stem":116},"Halloween Spooky-saur 🎃","/experiments/spooky-saur","experiments/spooky-saur",{"title":118,"path":119,"stem":120},"Synthwave Landscape","/experiments/synthwave-landscape","experiments/synthwave-landscape",{"title":122,"path":123,"stem":124},"Texture Particle Cursor","/experiments/texture-particle-cursor","experiments/texture-particle-cursor",{"title":126,"path":127,"stem":128},"WebGPU","/experiments/webgpu","experiments/webgpu",false,{"id":131,"title":70,"author":132,"body":133,"date":370,"description":371,"extension":372,"featured":129,"lastUpdated":373,"meta":374,"navigation":375,"path":71,"seo":376,"stem":72,"tags":377,"thumbnail":384,"__hash__":385},"experiments/experiments/magical-marbles.md","damienmontastier",{"type":134,"value":135,"toc":360},"minimark",[136,153,158,161,201,205,208,246,250,253,291,295,327,331,357],[137,138,139,140,144,145,152],"p",{},"This experiment creates a ",[141,142,143],"strong",{},"stunning interactive marble sphere"," with sophisticated custom shaders and smooth color transitions. Inspired by the famous ",[146,147,151],"a",{"href":148,"rel":149},"https://tympanus.net/codrops/2021/08/02/magical-marbles-in-three-js/",[150],"nofollow","Codrops tutorial",", this implementation showcases advanced material techniques and interactive animations.",[154,155,157],"h3",{"id":156},"what-youll-see","What You'll See",[137,159,160],{},"An enchanting interactive experience featuring:",[162,163,164,171,177,183,189,195],"ul",{},[165,166,167,170],"li",{},[141,168,169],{},"Procedural Marble Surface",": Custom vertex and fragment shaders creating realistic marble patterns",[165,172,173,176],{},[141,174,175],{},"Color-Cycling Interaction",": Click to cycle through 5 beautiful color schemes",[165,178,179,182],{},[141,180,181],{},"Dynamic Background",": Radial gradients that smoothly transition with marble colors",[165,184,185,188],{},[141,186,187],{},"Contact Shadows",": Realistic ground shadows that adapt to current color scheme",[165,190,191,194],{},[141,192,193],{},"Elastic Animations",": Smooth hover and click effects with elastic scaling",[165,196,197,200],{},[141,198,199],{},"Post-Processing Pipeline",": Tone mapping and multisampling for enhanced visual quality",[154,202,204],{"id":203},"technical-implementation","Technical Implementation",[137,206,207],{},"This experiment demonstrates advanced shader and animation techniques:",[162,209,210,216,222,228,234,240],{},[165,211,212,215],{},[141,213,214],{},"CustomShaderMaterial",": Combines standard PBR features with custom shader logic",[165,217,218,221],{},[141,219,220],{},"Displacement Mapping",": Height and displacement textures for surface detail",[165,223,224,227],{},[141,225,226],{},"Real-Time Uniforms",": Live parameter adjustment affecting marble appearance",[165,229,230,233],{},[141,231,232],{},"GSAP Animations",": Professional-grade animations for color transitions and scaling",[165,235,236,239],{},[141,237,238],{},"Color Space Management",": HSL color manipulation for smooth gradients",[165,241,242,245],{},[141,243,244],{},"Interactive Materials",": Cursor changes and visual feedback on hover",[154,247,249],{"id":248},"shader-parameters","Shader Parameters",[137,251,252],{},"Fully controllable marble characteristics:",[162,254,255,261,267,273,279,285],{},[165,256,257,260],{},[141,258,259],{},"Iterations",": 1-64 steps for noise complexity and detail level",[165,262,263,266],{},[141,264,265],{},"Depth",": Surface displacement intensity for 3D marble veining",[165,268,269,272],{},[141,270,271],{},"Smoothing",": Blend between sharp and soft pattern transitions",[165,274,275,278],{},[141,276,277],{},"Displacement",": Overall surface deformation amount",[165,280,281,284],{},[141,282,283],{},"Speed",": Animation timing for flowing marble patterns",[165,286,287,290],{},[141,288,289],{},"Material Properties",": Roughness and metalness for realistic surface response",[154,292,294],{"id":293},"interactive-features","Interactive Features",[162,296,297,303,309,315,321],{},[165,298,299,302],{},[141,300,301],{},"Click Cycling",": Smooth transitions between 5 predefined color schemes",[165,304,305,308],{},[141,306,307],{},"Hover Effects",": Subtle scaling and cursor changes for user feedback",[165,310,311,314],{},[141,312,313],{},"Auto-Rotation",": Gentle orbital movement showcasing the marble from all angles",[165,316,317,320],{},[141,318,319],{},"Real-Time Controls",": Live parameter adjustment with immediate visual response",[165,322,323,326],{},[141,324,325],{},"Background Sync",": Gradient backgrounds that match current marble colors",[154,328,330],{"id":329},"visual-design","Visual Design",[162,332,333,339,345,351],{},[165,334,335,338],{},[141,336,337],{},"Professional Gradients",": Carefully crafted radial backgrounds enhancing marble visibility",[165,340,341,344],{},[141,342,343],{},"Contact Integration",": Ground shadows that respond to color changes",[165,346,347,350],{},[141,348,349],{},"Elastic Feedback",": Satisfying bounce animations on interaction",[165,352,353,356],{},[141,354,355],{},"HDR Environment",": Urban environment preset for realistic reflections",[137,358,359],{},"This experiment perfectly demonstrates how custom shaders can create captivating interactive materials, combining mathematical precision with artistic beauty to create an engaging user experience.",{"title":361,"searchDepth":362,"depth":362,"links":363},"",2,[364,366,367,368,369],{"id":156,"depth":365,"text":157},3,{"id":203,"depth":365,"text":204},{"id":248,"depth":365,"text":249},{"id":293,"depth":365,"text":294},{"id":329,"depth":365,"text":330},"2024-02-28","Magical Marbles Sphere","md","2025-06-29",{},true,{"title":70,"description":371},[378,379,380,381,382,383],"magical","marbles","sphere","shaders","glsl","contact shadow","/experiments/magical-marbles.png","rW7yo4M79bDhpK0yX6CH302O2XYoZ8-TK810Y8QZbRw",[387,404,419,435,451,469,486],{"id":388,"title":389,"avatar":390,"body":391,"description":361,"email":395,"extension":372,"github":396,"meta":397,"name":398,"navigation":375,"path":399,"seo":400,"slug":396,"stem":401,"twitter":396,"website":402,"__hash__":403},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpg",{"type":134,"value":392,"toc":393},[],{"title":361,"searchDepth":362,"depth":362,"links":394},[],"hola@alvarosaburido.dev","alvarosabu",{},"Alvaro Saburido","/authors/alvarosabu",{"description":361},"authors/alvarosabu","https://alvarosaburido.dev","FWpr6-OcVRzMvvsjRaD8icRidgpKVLCtrKy9-l_5GZM",{"id":405,"title":406,"avatar":407,"body":408,"description":361,"email":412,"extension":372,"github":413,"meta":414,"name":413,"navigation":375,"path":415,"seo":416,"slug":413,"stem":417,"twitter":412,"website":412,"__hash__":418},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":134,"value":409,"toc":410},[],{"title":361,"searchDepth":362,"depth":362,"links":411},[],null,"andretchen0",{},"/authors/andretchen0",{"description":361},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":420,"title":421,"avatar":422,"body":423,"description":361,"email":427,"extension":372,"github":132,"meta":428,"name":429,"navigation":375,"path":430,"seo":431,"slug":132,"stem":432,"twitter":433,"website":412,"__hash__":434},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":134,"value":424,"toc":425},[],{"title":361,"searchDepth":362,"depth":362,"links":426},[],"montastier.damien@gmail.com",{},"Damien Montastier","/authors/damienmontastier",{"description":361},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":436,"title":437,"avatar":438,"body":439,"description":361,"email":412,"extension":372,"github":443,"meta":444,"name":445,"navigation":375,"path":446,"seo":447,"slug":443,"stem":448,"twitter":449,"website":412,"__hash__":450},"authors/authors/franciscohermida.md","Franciscohermida","/avatars/franciscohermida.jpg",{"type":134,"value":440,"toc":441},[],{"title":361,"searchDepth":362,"depth":362,"links":442},[],"franciscohermida",{},"Francisco Hermida","/authors/franciscohermida",{"description":361},"authors/franciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":452,"title":453,"avatar":454,"body":455,"description":361,"email":459,"extension":372,"github":460,"meta":461,"name":453,"navigation":375,"path":462,"seo":463,"slug":464,"stem":465,"twitter":466,"website":467,"__hash__":468},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":134,"value":456,"toc":457},[],{"title":361,"searchDepth":362,"depth":362,"links":458},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":361},"jaime-bboyjt","authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":470,"title":471,"avatar":472,"body":473,"description":361,"email":477,"extension":372,"github":478,"meta":479,"name":480,"navigation":375,"path":481,"seo":482,"slug":480,"stem":483,"twitter":477,"website":484,"__hash__":485},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":134,"value":474,"toc":475},[],{"title":361,"searchDepth":362,"depth":362,"links":476},[],"none","luckystriike22",{},"luckystriike","/authors/luckystriike",{"description":361},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":487,"title":488,"avatar":489,"body":490,"description":361,"email":494,"extension":372,"github":495,"meta":496,"name":497,"navigation":375,"path":498,"seo":499,"slug":495,"stem":500,"twitter":501,"website":502,"__hash__":503},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":134,"value":491,"toc":492},[],{"title":361,"searchDepth":362,"depth":362,"links":493},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","/authors/neoprint3d",{"description":361},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",1774953670494]