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