X Bookmarks: 3D & Shaders (Mar–May 2026)

Bookmarked 3D/shader tweets covering WebGL tools, shader composition platforms, voxel engines, and html-in-canvas breakthroughs.

Routing

Open this page before choosing 3D, shader, WebGL, WebGPU, or creative-coding references from X bookmarks. Route engine/source selection through Web3D Library Ranking, then implementation work to Frontend and Design Skills, Frontend and Design Skills, or the relevant shader/tool page; keep source-critical demos visible as tweet artifacts and artifact cards.

Non-X 3D Source Additions

Kevin's 2026-07-06 request added two non-runtime sources beside the WebGL/shader stack:

Source Tweet Artifacts

Batch 26-150 (2026-06-13)

HTML-in-Canvas (Chrome origin trial)

HTMLを直接3Dの質感として描画できる新機能「html-in-canvas」... - @tokufxug | 2026-04-20 | 6,894 likes, 3,304 bookmarks

Takeaway: HTML-in-Canvas shows real DOM controls becoming a manipulable 3D material: the reviewed demo places sliders, buttons, image content, and theme controls on a paper-like surface inside a live 3D scene. Current WICG snapshot is untagged at HEAD cb22f4d8 with 3,693 stars; route implementation work as experimental/flag-gated. Source: X/@tokufxug thread, 2026-04-20; Source: GitHub/local visual review, 2026-07-01

Shader Lab endorsement (kubadesign)

this is the best tool ever btw - @kubadesign | 2026-04-14 | 4,481 likes, 3,227 bookmarks

Takeaway: Output-range evidence for Shader Lab, not just a community endorsement. The four reviewed images show dithered animal silhouettes, red LED-grain portrait lighting, point-cloud facial shading, and blue horizontal glitch/smear treatment. Route workflow and source authority through Shader Lab. Source: X/@kubadesign and local artifact review, 2026-07-02

Shader Tools

Shader Lab by Basement Studio

gm, today we're launching Shader Lab, like photoshop but for shaders - design slick layered shader compositions, export production-ready GLSL - @basementstudio | 2026-04-13 | 2,264 likes

Takeaway: Visual shader composition tool - GLSL without hand-writing uniforms. See Shader Lab. Source: X/@basementstudio, 2026-04-13

Shaders MCP

Introducing Shaders MCP - the way you build shaders just changed. Your agent now finds, tweaks, and ships the perfect shader for your scene. - @npm_i_shaders | 2026-04-14 | 943 likes

Takeaway: MCP-native shader search and customization - agents can discover and apply shaders programmatically. See Shaders MCP. Source: X/@npm_i_shaders, 2026-04-14

Logo Shaders for Framer

Logo Shaders are coming to @framer. They work with any PNG and SVG. Highly customizable. Live on your site in seconds. - @benjaminnathan | 2026-04-10 | 1,835 likes, 858 bookmarks

Takeaway: Drop-in logo shader effects for Framer, optimized for PNG/SVG logos and web deployment. The reviewed video shows several small logos/icons with chrome, glass, iridescent gradient, neon, and wireframe treatments on a black canvas. Treat as a Framer-native visual effect reference until a public install surface is confirmed. Source: X/@benjaminnathan and local contact sheet /tmp/xreview-next12-videos/logo-shaders-sheet.jpg, reviewed 2026-07-02

Paper Shader Launch

ALERT it's Paper Shader launch day - and all free usage is 10x this week only - @paper | 2026-04-14 | 171 likes

Takeaway: Paper-style shader effects as a service with generous free tier. Source: X/@paper, 2026-04-14

Shaders × Bolt Integration

Announcing: Shaders × @boltdotnew - the perfect shader is now just a prompt away. Ask Bolt to search from hundreds of pre-built shaders. - @npm_i_shaders | 2026-04-21 | 85 likes

Takeaway: Shaders MCP expanding to more agent platforms beyond Claude/Cursor. See Bolt.new. Source: X/@npm_i_shaders, 2026-04-21

Web3D Techniques

HTML-in-Canvas (Chrome Origin Trial)

HTMLを直接3Dの質感として描画できる新機能「html-in-canvas」- 複雑な操作画面をWebブラウザの標準機能でそのまま3D空間へ配置できます - @tokufxug | 2026-04-20 | 6,894 likes

Takeaway: Browser-native HTML rendering as 3D textures - eliminates the CSS-to-texture pipeline. The reviewed artifact makes the value concrete: HTML controls and content sit on a bending/rotating 3D panel instead of being recreated as bespoke WebGL widgets. See HTML-in-Canvas. Source: X/@tokufxug, 2026-04-20; Source: local contact sheet /tmp/xreview-frames/2046044649677316229.jpg, reviewed 2026-07-01

html-in-canvas in Shaders

html-in-canvas has been achieved internally - glass, ascii, dither, ripples... on any surface - @npm_i_shaders | 2026-04-10 | 1,133 likes, 982 bookmarks

Takeaway: Shaders MCP team applying html-in-canvas for shader composition on arbitrary HTML surfaces. The reviewed demo shows <DOMTexture> wrapping literal HTML text in the Shaders editor, then applying ripple/glass-like distortions. Chrome Canary flag only; see Shaders MCP and HTML-in-Canvas. Source: X/@npm_i_shaders and local contact sheet /tmp/xreview-next12-videos/domtexture-sheet.jpg, reviewed 2026-07-02

3D Frameworks

heerich.js - Voxel-to-SVG Engine

Just released heerich.js, a tiny voxel engine that renders 3D scenes to SVG - Boolean ops, oblique & perspective projections - @meodai | 2026-03-28 | 2,679 likes

Takeaway: Heerich.js is the durable route: voxel rendering to SVG - no WebGL needed, suitable for illustrations, print-quality 3D, and DOM-interactive vector faces. Current source snapshot is npm heerich@0.16.0 with no GitHub releases; use the interactive guide as the best artifact. Source: X/@meodai, 2026-03-28; Source: GitHub/npm, 2026-07-01

Three.js Experiments

Three.js experiments like this are always fun to see. - @AliGrids | 2026-03-15 | 655 likes

Takeaway: Community showcase - Three.js still the default for creative 3D on the web. See Frontend and Design Skills. Source: X/@AliGrids, 2026-03-15

• Also noted: Kevin's @evilrabbit_ shader discovery post (41 likes), Kevin's Princeton Tower Defense Day 1 - 3D isometric browser game with Next.js + React + Three.js (10 likes)

Batch 151–512 Absorption (7 entries)

html-in-canvas has been achieved internally

html-in-canvas has been achieved internally glass, ascii, dither, ripples... on any surface 🤯 https://t.co/RUqJ3LGcOj - @npm_i_shaders | Fri 10, Apr | 1,133 likes, 982 bookmarks

Takeaway: Promoted to Shaders MCP and HTML-in-Canvas. The durable primitive is <DOMTexture>: wrap HTML in a shader, expose it in the Shaders editor, and apply glass/ascii/dither/ripple effects to that DOM-derived surface. Chrome Canary flag only; do not route production UI through it yet. Source: X/@npm_i_shaders and local contact sheet /tmp/xreview-next12-videos/domtexture-sheet.jpg, reviewed 2026-07-02

Logo Shaders are coming to @framer

Logo Shaders are coming to @framer. They work with any PNG and SVG. Highly customizable. Live on your site in seconds. https://t.co/bMtojfmai5 - @benjaminnathan | Fri 10, Apr | 1,835 likes, 858 bookmarks

Takeaway: Framer/web-optimized logo shader pack by Benjamin Nathan, Jaenam, and Berci. The reviewed video is a visual-reference asset: multiple SVG/PNG logo marks receive glass, chrome, iridescent, gradient, and wireframe shader treatments on a black background. Keep as design inspiration unless a public Framer component/plugin source appears. Source: X/@benjaminnathan and local contact sheet /tmp/xreview-next12-videos/logo-shaders-sheet.jpg, reviewed 2026-07-02

Fable: "create a visually interesting shader that can run in twigl-dot-app ma...

Fable: "create a visually interesting shader that can run in twigl-dot-app make it like an infinite city of neo-gothic towers partially drowned in a stormy ocean with large waves." "Make it better" All of this is procedurally generated. https://t.co/ky0q5ho643 - @emollick | Tue 09, Jun | 1,092 likes, 436 bookmarks

Takeaway: Promoted to Claude Fable 5, Design Effects and Motion Sources, and Shader Effects Libraries as prompt-to-shader capability evidence. The reviewed artifact shows stormy neo-gothic towers, lit windows, large waves, and atmospheric depth generated from a short Fable prompt; use it as shader vocabulary and judge material, not a new library. Source: X/@emollick, Tue 09, Jun; Source: Claude artifact

Three

Three.js experiments like this are always fun to see. https://t.co/Ns1DgH7M4r - @AliGrids | Sun 15, Mar | 655 likes, 365 bookmarks

Takeaway: Liquid/refractive hover treatment for hero typography: the reviewed video bends the "Liquid Effect" text through pointer-driven ripples and glassy distortion over a saturated gradient/card composition. Treat it as a Frontend and Design Skills / Three.js motion-reference pattern for high-polish heroes, not a standalone library. Source: X/@AliGrids, Sun 15, Mar; Source: local contact sheet /tmp/xreview-frames/2033150280708333715.jpg, reviewed 2026-07-01

ALERT it's Paper Shader launch day

ALERT it's Paper Shader launch day and all free usage is 10x this week only 🌟 this is the week to try Paper 🌟 - @paper | Tue 14, Apr | 171 likes, 83 bookmarks

Takeaway: Promoted through Liquid Logo (Paper Shaders Liquid Metal) / Paper Design Tool as Paper Shaders launch evidence. The row is text-only promo, so no media review or new page was needed; the durable technical route remains the Paper Shaders package snapshot and LiquidMetal shader docs. Source: X/@paper, 2026-04-14

Announcing: Shaders × @boltdotnew

Announcing: Shaders × @boltdotnew The perfect shader is now just a prompt away. Ask Bolt to search from hundreds of presets, install, customize, and start shipping magic ✨ The official Bolt connector is available today for Shaders Pro users https://t.co/YJ40ri2y7L - @npm_i_shaders | Tue 21, Apr | 85 likes, 66 bookmarks

Takeaway: Promoted through Shaders MCP. Local video review confirms this is the official Shaders connector inside Bolt.new: users connect Shaders from Bolt's Connectors panel, log in with a Shaders Pro account, then prompt Bolt to search, install, and customize Shaders presets through the MCP backend. Official docs confirm no extra configuration is needed after connector login. Source: X/@npm_i_shaders, 2026-04-21; Source: Shaders MCP docs, 2026-07-02

found @evilrabbit_ presenting super cool, performant shaders, check them out

found @evilrabbit_ presenting super cool, performant shaders, check them out! ▲ https://t.co/pKZMkPvYwQ - @kevskgs | Thu 14, May | 41 likes, 3 bookmarks

Takeaway: Hub-only visual reference. Local review found three event photos: Kevin with EvilRabbit, a projected Geist Serif specimen/interface, and a white point-cloud/rabbit-like shader demo in a browser UI. The durable signal is "performance shader taste and live presentation reference"; there is no code/docs/release artifact to promote into a tool page. Source: X/@kevskgs and local image review, 2026-07-04

Batch 151–512 — Dedicated-Page Cross-Ref (1 entries)

Just released heerich

Just released heerich.js, a tiny voxel engine that renders 3D scenes to SVG 🎨 ╬ Boolean ops ◮ Oblique & perspective 𝑥 Zero dependencies ◌ Pure vector output, infinite scaling Named after Erwin Heerich's geometric cardboard sculptures. https://t.co/sXjcu3d59I - @meodai | Sat 28, Mar | 2,679 likes, 2,503 bookmarks

Takeaway: Promoted to Heerich.js. The durable signal is not only "tiny voxel engine": heerich.js renders voxel scenes to SVG, supports boolean operations and oblique/perspective projections, keeps output pure vector, and avoids WebGL. The reviewed video frames show the interactive docs/manual: camera controls, boxes, coordinate sections, code examples, and SVG voxel output. Current version check: npm heerich@0.16.0, GitHub HEAD ae80777, no release tags. Named after Erwin Heerich's geometric cardboard sculptures. Source: X/@meodai, 2026-03-28; Source: local contact sheet /tmp/xreview-frames/2038027659209224689.jpg, reviewed 2026-07-01

---

Timeline

• 2026-07-06 | Added Web3D Library Ranking routing plus ContentCore and LS Graphics as non-runtime 3D/content/mockup source additions. Source: User request, 2026-07-06
• 2026-06-17 | Added timeline for the compiled 3D/shader bookmark hub. Source: raw/x-bookmarks/bookmarks.jsonl
• 2026-06-30 | Deep-reviewed @emollick's Fable shader artifact and promoted it into the Fable/design/shader pages and agent packs. Source: X/@emollick, 2026-06-09
• 2026-07-01 | Deep-reviewed the heerich.js launch artifact and refreshed Heerich.js to npm 0.16.0, GitHub HEAD ae80777, and local video observation. Source: X/@meodai, 2026-03-28
• 2026-07-01 | Deep-reviewed the tokufxug HTML-in-canvas and AliGrids liquid-hover artifacts; upgraded both from "demo attached" rows into visual/source-reviewed 3D UI patterns. Source: X/@tokufxug and X/@AliGrids, reviewed 2026-07-01
• 2026-07-02 | Deep-reviewed the Shaders x Bolt connector artifact and refreshed Shaders MCP with the current Pro/Bolt connector source snapshot. Source: X/@npm_i_shaders, 2026-04-21
• 2026-05-17 | Created 3D/shader bookmark hub from X bookmark batches. Source: raw/x-bookmarks/bookmarks.jsonl