Sync Community package from ThreeUI

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcodeio/threeui",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Open-source React components and interactive templates from ThreeUI Community.",
   "license": "MIT",
   "type": "module",

public/community-sync-report.json

@@ -1,11 +1,11 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-08-31T16:05:46.996Z",
-  "sourceCommit": "6b65f2dbec22ac58c56474f028aec5590e62d3c9",
-  "communityParents": 43,
-  "communityRoutes": 104,
-  "communityVariants": 163,
-  "excludedProParents": 108,
+  "generatedAt": "2026-09-03T05:35:30.118Z",
+  "sourceCommit": "65f7995b00f0f64323b217b353a529de99ec7fac",
+  "communityParents": 46,
+  "communityRoutes": 107,
+  "communityVariants": 166,
+  "excludedProParents": 109,
   "excludedBetaParents": 23,
   "layoutStylesSha256": "cee8ebe47ad857149f52f12bb12324a83856fc403ea1431f238aec4ecc385760",
   "rendererStylesSha256": "dc36aeb914df4c554164304292d75738a770e454b1e2710bac1ce4169d5fee2a",
@@ -395,7 +395,8 @@
         "induction-button",
         "plasma-button",
         "tactile-button",
-        "thinking-button"
+        "thinking-button",
+        "raking-light-pill"
       ],
       "controlKeys": [
         "mode",
@@ -409,7 +410,8 @@
         "induction-button": [],
         "plasma-button": [],
         "tactile-button": [],
-        "thinking-button": []
+        "thinking-button": [],
+        "raking-light-pill": []
       }
     },
     {
@@ -436,7 +438,9 @@
         "meridian-keycap-secondary",
         "halvorsen-arrow-pill",
         "aster-glass-access",
-        "aster-glass-arrow"
+        "aster-glass-arrow",
+        "ember-keycap",
+        "bloom-outline-button"
       ],
       "controlKeys": [
         "mode",
@@ -521,6 +525,18 @@
           "hue",
           "saturation",
           "brightness"
+        ],
+        "ember-keycap": [
+          "mode",
+          "hue",
+          "saturation",
+          "brightness"
+        ],
+        "bloom-outline-button": [
+          "mode",
+          "hue",
+          "saturation",
+          "brightness"
         ]
       }
     },
@@ -594,6 +610,24 @@
       ],
       "variantControlKeys": {}
     },
+    {
+      "id": "orb-gallery",
+      "variantIds": [],
+      "controlKeys": [],
+      "variantControlKeys": {}
+    },
+    {
+      "id": "3d-paper",
+      "variantIds": [],
+      "controlKeys": [],
+      "variantControlKeys": {}
+    },
+    {
+      "id": "ashen-press",
+      "variantIds": [],
+      "controlKeys": [],
+      "variantControlKeys": {}
+    },
     {
       "id": "sylva-living-world",
       "variantIds": [

src/data/communityOrder.ts

@@ -1,5 +1,8 @@
 // Updated by scripts/sync-community-from-main.mjs.
 export const COMMUNITY_NEWEST_SHADER_IDS = [
+  "orb-gallery",
+  "3d-paper",
+  "ashen-press",
   "meng-to-sketchbook-landing-page",
   "koi-studies",
   "sylva-hero",

src/data/mainCatalogSummary.ts

@@ -1,2 +1,2 @@
 // Updated by scripts/sync-community-from-main.mjs.
-export const FULL_THREEUI_COLLECTION_COUNT = 378;
+export const FULL_THREEUI_COLLECTION_COUNT = 385;

src/index.ts

@@ -3,6 +3,7 @@ import "./shaders/community.css";
 
 export { AmberHalftone } from "./package-components/AmberHalftone";
 export { AnimatedTopDock } from "./package-components/AnimatedTopDock";
+export { AshenPress } from "./package-components/AshenPress";
 export { AudioWordmark } from "./package-components/AudioWordmark";
 export { BallStudy } from "./package-components/BallStudy";
 export { BellFieldBackground } from "./package-components/BellFieldBackground";
@@ -66,6 +67,7 @@ export { MorphingGlyphCloud } from "./package-components/MorphingGlyphCloud";
 export { NebulaBackground } from "./package-components/NebulaBackground";
 export { NeonTypography } from "./package-components/NeonTypography";
 export { NewsletterFooterSection } from "./package-components/NewsletterFooterSection";
+export { OrbGallery } from "./package-components/OrbGallery";
 export { OrbitalSphereBackground } from "./package-components/OrbitalSphereBackground";
 export { OutlineTypeflow } from "./package-components/OutlineTypeflow";
 export { ParticleDrift } from "./package-components/ParticleDrift";
@@ -95,6 +97,7 @@ export { TempleNightScene } from "./package-components/TempleNightScene";
 export { TextAnimationCollection } from "./package-components/TextAnimationCollection";
 export { TextPathStudies } from "./package-components/TextPathStudies";
 export { ThinkingButton } from "./package-components/ThinkingButton";
+export { ThreeDPaper } from "./package-components/ThreeDPaper";
 export { ThreeUIIntro } from "./package-components/ThreeUIIntro";
 export { TopoField } from "./package-components/TopoField";
 export { TopologyField } from "./package-components/TopologyField";

src/package-components/AshenPress.ts

@@ -0,0 +1,2 @@
+// Generated by scripts/generate-library-entry.mjs. Do not edit by hand.
+export { AshenPress } from "../shaders/ashen-press/AshenPress";

src/package-components/OrbGallery.ts

@@ -0,0 +1,2 @@
+// Generated by scripts/generate-library-entry.mjs. Do not edit by hand.
+export { OrbGallery } from "../shaders/orb-gallery/OrbGallery";

src/package-components/ThreeDPaper.ts

@@ -0,0 +1,2 @@
+// Generated by scripts/generate-library-entry.mjs. Do not edit by hand.
+export { ThreeDPaper } from "../shaders/3d-paper/ThreeDPaper";

src/shaders/3d-paper/ThreeDPaper.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useRef, useState, type CSSProperties } from "react";
+
+import threeDPaperSource from "./sources/3d-paper.html?raw";
+
+export type ThreeDPaperProps = {
+  className?: string;
+  style?: CSSProperties;
+};
+
+export function ThreeDPaper({ className = "", style }: ThreeDPaperProps) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const [documentVisible, setDocumentVisible] = useState(() => (
+    typeof document === "undefined" || !document.hidden
+  ));
+  const [hostVisible, setHostVisible] = useState(true);
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host || typeof IntersectionObserver === "undefined") return undefined;
+    const observer = new IntersectionObserver(([entry]) => {
+      setHostVisible(entry?.isIntersecting ?? true);
+    }, { rootMargin: "80px" });
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (typeof document === "undefined") return undefined;
+    const update = () => setDocumentVisible(!document.hidden);
+    document.addEventListener("visibilitychange", update);
+    return () => document.removeEventListener("visibilitychange", update);
+  }, []);
+
+  const mounted = hostVisible && documentVisible;
+
+  useEffect(() => {
+    setReady(false);
+  }, [mounted]);
+
+  return (
+    <div
+      ref={hostRef}
+      className={`threeui-background three-d-paper${className ? ` ${className}` : ""}`}
+      role="group"
+      aria-label="Interactive translucent 3D paper certificate"
+      data-state={!mounted ? "paused" : ready ? "ready" : "loading"}
+      style={{
+        position: "relative",
+        overflow: "hidden",
+        background: "#08080a",
+        pointerEvents: "auto",
+        ...style,
+      }}
+    >
+      {mounted ? (
+        <iframe
+          title="3D Paper"
+          srcDoc={threeDPaperSource}
+          sandbox="allow-scripts"
+          loading="eager"
+          onLoad={() => setReady(true)}
+          style={{
+            position: "absolute",
+            inset: 0,
+            display: "block",
+            width: "100%",
+            height: "100%",
+            border: 0,
+            background: "#08080a",
+            opacity: ready ? 1 : 0,
+            pointerEvents: ready ? "auto" : "none",
+            transition: "opacity 240ms ease-out",
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}

src/shaders/ashen-press/AshenPress.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useRef, useState, type CSSProperties } from "react";
+
+import ashenPressSource from "./sources/ashen-press.html?raw";
+
+export type AshenPressProps = {
+  className?: string;
+  style?: CSSProperties;
+};
+
+export function AshenPress({ className = "", style }: AshenPressProps) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const [documentVisible, setDocumentVisible] = useState(() => (
+    typeof document === "undefined" || !document.hidden
+  ));
+  const [hostVisible, setHostVisible] = useState(true);
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host || typeof IntersectionObserver === "undefined") return undefined;
+    const observer = new IntersectionObserver(([entry]) => {
+      setHostVisible(entry?.isIntersecting ?? true);
+    }, { rootMargin: "80px" });
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (typeof document === "undefined") return undefined;
+    const update = () => setDocumentVisible(!document.hidden);
+    document.addEventListener("visibilitychange", update);
+    return () => document.removeEventListener("visibilitychange", update);
+  }, []);
+
+  const mounted = hostVisible && documentVisible;
+
+  useEffect(() => {
+    setReady(false);
+  }, [mounted]);
+
+  return (
+    <div
+      ref={hostRef}
+      className={`threeui-background ashen-press${className ? ` ${className}` : ""}`}
+      role="group"
+      aria-label="Interactive Ashen Press art book shelf"
+      data-state={!mounted ? "paused" : ready ? "ready" : "loading"}
+      style={{
+        position: "relative",
+        overflow: "hidden",
+        background: "#c6ae8e",
+        pointerEvents: "auto",
+        ...style,
+      }}
+    >
+      {mounted ? (
+        <iframe
+          title="Ashen Press — The Art Book Shelf"
+          srcDoc={ashenPressSource}
+          sandbox="allow-scripts"
+          loading="eager"
+          onLoad={() => setReady(true)}
+          style={{
+            position: "absolute",
+            inset: 0,
+            display: "block",
+            width: "100%",
+            height: "100%",
+            border: 0,
+            background: "#c6ae8e",
+            opacity: ready ? 1 : 0,
+            pointerEvents: ready ? "auto" : "none",
+            transition: "opacity 240ms ease-out",
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}