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