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