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