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