[{"data":1,"prerenderedAt":467},["ShallowReactive",2],{"navigation":3,"\u002Fexperiments\u002Fglyph-cut-out":158,"authors":333},[4],{"title":5,"path":6,"stem":7,"children":8,"page":157},"Experiments","\u002Fexperiments","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,153],{"title":10,"path":11,"stem":12},"Array of cameras","\u002Fexperiments\u002Farray-cameras","experiments\u002Farray-cameras",{"title":14,"path":15,"stem":16},"Brickelangelo David","\u002Fexperiments\u002Fbrickelangelo-david","experiments\u002Fbrickelangelo-david",{"title":18,"path":19,"stem":20},"Basic Brownian distribution","\u002Fexperiments\u002Fbrownian-distribution","experiments\u002Fbrownian-distribution",{"title":22,"path":23,"stem":24},"Porsche 911 Car Showcase","\u002Fexperiments\u002Fcar-showcase","experiments\u002Fcar-showcase",{"title":26,"path":27,"stem":28},"Coffee Smoke","\u002Fexperiments\u002Fcoffee-smoke","experiments\u002Fcoffee-smoke",{"title":30,"path":31,"stem":32},"Cube Boy Dancefloor","\u002Fexperiments\u002Fcube-boy-dancefloor","experiments\u002Fcube-boy-dancefloor",{"title":34,"path":35,"stem":36},"Cult of the lamb 🐑","\u002Fexperiments\u002Fcult-of-the-lamb","experiments\u002Fcult-of-the-lamb",{"title":38,"path":39,"stem":40},"Dancing blob","\u002Fexperiments\u002Fdancing-blob","experiments\u002Fdancing-blob",{"title":42,"path":43,"stem":44},"Fireworks Shader","\u002Fexperiments\u002Ffireworks-shader","experiments\u002Ffireworks-shader",{"title":46,"path":47,"stem":48},"Galaxy Generator 🪐","\u002Fexperiments\u002Fgalaxy-generator","experiments\u002Fgalaxy-generator",{"title":50,"path":51,"stem":52},"Gelatinous Cube","\u002Fexperiments\u002Fgelatinous-cube","experiments\u002Fgelatinous-cube",{"title":54,"path":55,"stem":56},"Glass\u002FPlastic Material","\u002Fexperiments\u002Fglass-material","experiments\u002Fglass-material",{"title":58,"path":59,"stem":60},"Glyph Cut Out","\u002Fexperiments\u002Fglyph-cut-out","experiments\u002Fglyph-cut-out",{"title":62,"path":63,"stem":64},"Grainy Liquid Blobs","\u002Fexperiments\u002Fgrainy-liquid","experiments\u002Fgrainy-liquid",{"title":66,"path":67,"stem":68},"Haunted House","\u002Fexperiments\u002Fhaunted-house","experiments\u002Fhaunted-house",{"title":70,"path":71,"stem":72},"Phone with HTML inside","\u002Fexperiments\u002Fhtml-phone","experiments\u002Fhtml-phone",{"title":74,"path":75,"stem":76},"Low Poly Planet","\u002Fexperiments\u002Flowpoly-planet","experiments\u002Flowpoly-planet",{"title":78,"path":79,"stem":80},"Magical Marbles","\u002Fexperiments\u002Fmagical-marbles","experiments\u002Fmagical-marbles",{"title":82,"path":83,"stem":84},"Nuxt Stones","\u002Fexperiments\u002Fnuxt-stones","experiments\u002Fnuxt-stones",{"title":86,"path":87,"stem":88},"Particle Pumpkin Shader","\u002Fexperiments\u002Fparticle-pumpkin","experiments\u002Fparticle-pumpkin",{"title":90,"path":91,"stem":92},"Particles Morphing","\u002Fexperiments\u002Fparticles-morphing","experiments\u002Fparticles-morphing",{"title":94,"path":95,"stem":96},"Plexus Particles","\u002Fexperiments\u002Fplexus-particles","experiments\u002Fplexus-particles",{"title":98,"path":99,"stem":100},"Portal Journey","\u002Fexperiments\u002Fportal-journey","experiments\u002Fportal-journey",{"title":102,"path":103,"stem":104},"Portals RPG Difficulty","\u002Fexperiments\u002Fportals-rpg-difficulty","experiments\u002Fportals-rpg-difficulty",{"title":106,"path":107,"stem":108},"Wizard's Potion Classroom","\u002Fexperiments\u002Fpotions-classroom","experiments\u002Fpotions-classroom",{"title":110,"path":111,"stem":112},"Rapier Basketball","\u002Fexperiments\u002Frapier-basketball","experiments\u002Frapier-basketball",{"title":114,"path":115,"stem":116},"Rapier Vehicle","\u002Fexperiments\u002Frapier-car","experiments\u002Frapier-car",{"title":118,"path":119,"stem":120},"Rapier Object Clump","\u002Fexperiments\u002Frapier-object-clump","experiments\u002Frapier-object-clump",{"title":122,"path":123,"stem":124},"Rapier Wrecking Ball","\u002Fexperiments\u002Frapier-wrecking-ball","experiments\u002Frapier-wrecking-ball",{"title":126,"path":127,"stem":128},"Repulsion Effect","\u002Fexperiments\u002Frepulsion-effect","experiments\u002Frepulsion-effect",{"title":130,"path":131,"stem":132},"Shadertoy Museum","\u002Fexperiments\u002Fshadertoy-museum","experiments\u002Fshadertoy-museum",{"title":134,"path":135,"stem":136},"Space Game","\u002Fexperiments\u002Fspace-game","experiments\u002Fspace-game",{"title":138,"path":139,"stem":140},"Halloween Spooky-saur 🎃","\u002Fexperiments\u002Fspooky-saur","experiments\u002Fspooky-saur",{"title":142,"path":143,"stem":144},"Synthwave Landscape","\u002Fexperiments\u002Fsynthwave-landscape","experiments\u002Fsynthwave-landscape",{"title":146,"path":147,"stem":148},"Texture Particle Cursor","\u002Fexperiments\u002Ftexture-particle-cursor","experiments\u002Ftexture-particle-cursor",{"title":150,"path":151,"stem":152},"Vue Fes Japan 2025","\u002Fexperiments\u002Fvuefes-japan-2025","experiments\u002Fvuefes-japan-2025",{"title":154,"path":155,"stem":156},"WebGPU","\u002Fexperiments\u002Fwebgpu","experiments\u002Fwebgpu",false,{"id":159,"title":58,"author":160,"body":161,"date":319,"description":320,"extension":321,"featured":157,"lastUpdated":319,"meta":322,"navigation":323,"path":59,"responsive":323,"seo":324,"stem":60,"tags":325,"thumbnail":331,"__hash__":332},"experiments\u002Fexperiments\u002Fglyph-cut-out.md","alvarosabu",{"type":162,"value":163,"toc":312},"minimark",[164,168,184,189,232,236],[165,166,167],"p",{},"Three lines of a heavy display font fill the viewport. The video only exists inside the letters. Scroll, and the camera dives into the I until its stem becomes the frame and the clip goes full bleed.",[165,169,170,171,178,179,183],{},"The text is rendered by ",[172,173,177],"a",{"href":174,"rel":175},"https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fglyph",[176],"nofollow","pmndrs glyph",", the typography engine that recently got a TresJS adapter. This experiment uses its ",[180,181,182],"strong",{},"Slug"," technique: glyph coverage is integrated analytically from the font outlines, so a single letter can fill the screen and its edge stays sharp. No atlas, no texels, no blur.",[185,186,188],"h3",{"id":187},"what-youll-see","What You'll See",[190,191,192,204,210,216,226],"ul",{},[193,194,195,198,199,203],"li",{},[180,196,197],{},"Hero",": ",[200,201,202],"code",{},"TYPE IS \u002F A WINDOW \u002F TRESJS × GLYPH"," set in Anton, masked over a looping clip",[193,205,206,209],{},[180,207,208],{},"Parallax",": moving the pointer shifts the video sample, so the letters read as a window with depth",[193,211,212,215],{},[180,213,214],{},"Grain dissolve",": around the pointer the letter edges shed dithered dust that drifts away and rises, while the letter interiors stay solid. Moving fast kicks a spring that throws the dust further, then it settles back to a halo",[193,217,218,221,222,225],{},[180,219,220],{},"Dive",": scrolling dollies the camera into the I of ",[200,223,224],{},"WINDOW"," until the clip fills the frame",[193,227,228,231],{},[180,229,230],{},"Fallback",": if the clip cannot play, a procedural TSL liquid takes its place inside the letters",[185,233,235],{"id":234},"technical-implementation","Technical Implementation",[190,237,238,265,274,280,289,299],{},[193,239,240,245,246,249,250,253,254,257,258,261,262],{},[180,241,242],{},[200,243,244],{},"defineTextMaterial",": glyph hands the material factory a ",[200,247,248],{},"createDefaultMaterial()"," whose ",[200,251,252],{},"opacityNode"," already carries the analytic coverage. Only ",[200,255,256],{},"colorNode"," is replaced with a ",[200,259,260],{},"screenUV"," sample of the ",[200,263,264],{},"VideoTexture",[193,266,267,269,270,273],{},[180,268,214],{},": the Tres render function is replaced by a ",[200,271,272],{},"RenderPipeline"," with a scene pass. Every pixel takes one stochastic sample from a random point between itself and the cursor, with a length and cone set by a gaussian field and a spring driven by pointer speed. One sample per pixel, no averaging, is what gives the dithered film grain. The pass clears to transparent so alpha is glyph coverage, and the letter's own pixels are composited over the dust, which keeps interiors solid. Skipped on coarse pointers",[193,275,276,279],{},[180,277,278],{},"Cover fit",": the sample is scaled by the viewport and video aspect ratios, so the clip always covers the screen",[193,281,282,198,285,288],{},[180,283,284],{},"Dive target",[200,286,287],{},"Text.glyphs()"," returns per-glyph ink boxes. The I is located by its cluster index and its ink center becomes the camera target. A round letter would land in its counter, which is background",[193,290,291,294,295,298],{},[180,292,293],{},"Camera",": placed so one world unit equals one CSS pixel at ",[200,296,297],{},"z = 0",", then dollied toward the target on scroll with an exponential zoom, so the perceived speed stays constant across a 50x range",[193,300,301,304,305,308,309],{},[180,302,303],{},"Font",": Anton baked with the glyph CLI into a single ",[200,306,307],{},".font.glb"," with Slug and MSDF data, subset to Latin plus ",[200,310,311],{},"×",{"title":313,"searchDepth":314,"depth":314,"links":315},"",2,[316,318],{"id":187,"depth":317,"text":188},3,{"id":234,"depth":317,"text":235},"2026-09-24","Bold Slug text from pmndrs glyph used as a window into a video, with a scroll-driven dive into a single letter","md",{},true,{"title":58,"description":320},[326,327,328,329,330],"glyph","typography","webgpu","tsl","video","\u002Fexperiments\u002Fglyph-cut-out.webp","vtCJFu-aB8weFVFUvlt807hk0wtUBsTLo3qSl714YHQ",[334,349,364,381,397,415,432,450],{"id":335,"title":336,"avatar":337,"body":338,"description":313,"email":342,"extension":321,"github":160,"meta":343,"name":160,"navigation":323,"path":344,"seo":345,"slug":160,"stem":346,"twitter":160,"website":347,"__hash__":348},"authors\u002Fauthors\u002Falvarosabu.md","Alvarosabu","\u002Favatars\u002Falvarosabu.jpeg",{"type":162,"value":339,"toc":340},[],{"title":313,"searchDepth":314,"depth":314,"links":341},[],"hola@alvarosaburido.dev",{},"\u002Fauthors\u002Falvarosabu",{"description":313},"authors\u002Falvarosabu","https:\u002F\u002Falvarosabu.dev","kfjqjiPxKR64avAeoJeNF40fMr5laisoEnPnfgFGN_U",{"id":350,"title":351,"avatar":352,"body":353,"description":313,"email":357,"extension":321,"github":358,"meta":359,"name":358,"navigation":323,"path":360,"seo":361,"slug":358,"stem":362,"twitter":357,"website":357,"__hash__":363},"authors\u002Fauthors\u002Fandretchen0.md","Andretchen0","\u002Favatars\u002Fandretchen0.jpg",{"type":162,"value":354,"toc":355},[],{"title":313,"searchDepth":314,"depth":314,"links":356},[],null,"andretchen0",{},"\u002Fauthors\u002Fandretchen0",{"description":313},"authors\u002Fandretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":365,"title":366,"avatar":367,"body":368,"description":313,"email":372,"extension":321,"github":373,"meta":374,"name":375,"navigation":323,"path":376,"seo":377,"slug":373,"stem":378,"twitter":379,"website":357,"__hash__":380},"authors\u002Fauthors\u002Fdamienmontastier.md","Damienmontastier","\u002Favatars\u002Fdamienmontastier.jpg",{"type":162,"value":369,"toc":370},[],{"title":313,"searchDepth":314,"depth":314,"links":371},[],"montastier.damien@gmail.com","damienmontastier",{},"Damien Montastier","\u002Fauthors\u002Fdamienmontastier",{"description":313},"authors\u002Fdamienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":382,"title":383,"avatar":384,"body":385,"description":313,"email":357,"extension":321,"github":389,"meta":390,"name":391,"navigation":323,"path":392,"seo":393,"slug":389,"stem":394,"twitter":395,"website":357,"__hash__":396},"authors\u002Fauthors\u002Ffranciscohermida.md","Franciscohermida","\u002Favatars\u002Ffranciscohermida.jpg",{"type":162,"value":386,"toc":387},[],{"title":313,"searchDepth":314,"depth":314,"links":388},[],"franciscohermida",{},"Francisco Hermida","\u002Fauthors\u002Ffranciscohermida",{"description":313},"authors\u002Ffranciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":398,"title":399,"avatar":400,"body":401,"description":313,"email":405,"extension":321,"github":406,"meta":407,"name":399,"navigation":323,"path":408,"seo":409,"slug":410,"stem":411,"twitter":412,"website":413,"__hash__":414},"authors\u002Fauthors\u002Fjaime-torrealba.md","Jaime Torrealba","\u002Favatars\u002Fjaime-torrealba.jpg",{"type":162,"value":402,"toc":403},[],{"title":313,"searchDepth":314,"depth":314,"links":404},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"\u002Fauthors\u002Fjaime-torrealba",{"description":313},"jaime-bboyjt","authors\u002Fjaime-torrealba","jaimebboyjt","https:\u002F\u002Fjaimetorrealba.com\u002F","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":416,"title":417,"avatar":418,"body":419,"description":313,"email":423,"extension":321,"github":424,"meta":425,"name":426,"navigation":323,"path":427,"seo":428,"slug":426,"stem":429,"twitter":423,"website":430,"__hash__":431},"authors\u002Fauthors\u002Fluckystriike.md","Luckystriike","\u002Favatars\u002Fluckystriike.jpg",{"type":162,"value":420,"toc":421},[],{"title":313,"searchDepth":314,"depth":314,"links":422},[],"none","luckystriike22",{},"luckystriike","\u002Fauthors\u002Fluckystriike",{"description":313},"authors\u002Fluckystriike","https:\u002F\u002Fgithub.com\u002Fluckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":433,"title":434,"avatar":435,"body":436,"description":313,"email":440,"extension":321,"github":441,"meta":442,"name":443,"navigation":323,"path":444,"seo":445,"slug":441,"stem":446,"twitter":447,"website":448,"__hash__":449},"authors\u002Fauthors\u002Fneoprint3d.md","Neoprint3d","\u002Favatars\u002Fneoprint3d.jpg",{"type":162,"value":437,"toc":438},[],{"title":313,"searchDepth":314,"depth":314,"links":439},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","\u002Fauthors\u002Fneoprint3d",{"description":313},"authors\u002Fneoprint3d","drew_ronsman","https:\u002F\u002Fdronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",{"id":451,"title":452,"avatar":453,"body":454,"description":313,"email":458,"extension":321,"github":459,"meta":460,"name":452,"navigation":323,"path":461,"seo":462,"slug":459,"stem":463,"twitter":464,"website":465,"__hash__":466},"authors\u002Fauthors\u002Fneosoulink.md","Neosoulink","\u002Favatars\u002Fneosoulink.jpg",{"type":162,"value":455,"toc":456},[],{"title":313,"searchDepth":314,"depth":314,"links":457},[],"neodarksoulink@gmail.com","neosoulink",{},"\u002Fauthors\u002Fneosoulink",{"description":313},"authors\u002Fneosoulink","nsl_nathan","https:\u002F\u002Fgithub.com\u002FNeosoulink","69eGfzorl4NNNe56pFRh6qK3AhnfjnKUvCHO-_9Pa1Y",1790687396737]