matrix-design-system 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fabrizio Duroni
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,95 @@
+# matrix-design-system
+
+A Matrix-inspired React design system: green on near-black, Open Sans for prose, Courier Prime for
+anything terminal-flavoured. Every component here is a real component from
+[fabrizioduroni.it](https://www.fabrizioduroni.it).
+
+## Install
+
+```bash
+npm install matrix-design-system
+```
+
+`react`, `react-dom` and `framer-motion` are peer dependencies — `framer-motion` because its
+`AnimatePresence` context has to be shared with your own animated components, which a second copy
+would break.
+
+Everything in the root barrel works with just those installed. Three groups need heavier libraries,
+so they live behind their own entry points and you install a peer only if you import one:
+
+| Import from | Install | For |
+|---|---|---|
+| `matrix-design-system/chart` | `recharts` | `ChartPanel`, `ChartTooltip`, `DonutChart` |
+| `matrix-design-system/markdown` | `react-markdown`, `unified`, the remark/rehype plugins | `Markdown` |
+| `matrix-design-system/command-palette` | `cmdk` | `CommandPalette` and its items |
+
+Nothing else is optional: the rain effect is part of the design system's identity — `BrandHeader`
+and the matrix backgrounds all render it — so `matrix-rain-webgpu` is a plain dependency and comes
+along automatically.
+
+## Use
+
+```tsx
+import { Accordion, Chip, SectionHeading, StatCard } from "matrix-design-system";
+import { DonutChart } from "matrix-design-system/chart";
+import "matrix-design-system/styles.css";
+```
+
+The stylesheet must be imported after Tailwind:
+
+```css
+@import "tailwindcss";
+@import "matrix-design-system/styles.css";
+```
+
+**The page surface must be dark.** The stylesheet sets `html body` to `#001100` on `#E8FFE8`; most
+components are near-invisible on white.
+
+## Styling
+
+Style your own layout with Tailwind utilities — they resolve against this theme, so use its names
+rather than stock Tailwind colours:
+
+| Family | Names |
+|---|---|
+| Brand | `primary` (#00FF41), `primary-dark`, `secondary`, `accent` (#39FF14) |
+| Surfaces | `general-background` (#001100), `general-background-light`, `black`, `white` |
+| Text | `primary-text` (#E8FFE8), `secondary-text`, `text-above-primary` |
+| Fonts | `font-sans` → Open Sans · `font-mono` → Courier Prime |
+
+**The breakpoint scale is overridden**: `xs` 576 · `sm` 768 · `md` 992 · `lg` 1200 · `xl` 1600 ·
+`2xl` 2000 (px). So `md:` starts at 992px, not 768px — the most common way a layout built with this
+theme behaves differently from expected.
+
+Composed classes worth reaching for: `.glassmorphism` (and `-lite`, `-no-scale`), `.glow-border`,
+`.glow-container`, `.pill`, `.call-to-action`, `.container-fixed`.
+
+Fonts are not bundled: load Open Sans and Courier Prime yourself.
+
+## Framework-agnostic by design
+
+The package imports nothing from any framework. Where a component needs framework behaviour it takes
+it as a prop, with a working default:
+
+```tsx
+import NextLink from "next/link";
+import NextImage from "next/image";
+
+<InternalLink to="/blog" linkComponent={NextLink}>Blog</InternalLink>
+<ImageGlow src={photo} alt="" imageComponent={NextImage} />
+<Menu currentPath={usePathname()} navHrefs={...} linkComponent={NextLink} />
+```
+
+Without them you get a real `<a>` and a real `<img>` — `PlainImage` reproduces `next/image`'s
+`fill`, placeholder and lazy-loading behaviour — so the components work anywhere, just without
+client-side routing or image optimisation.
+
+## No provider required
+
+There is no theme or context provider to wrap anything in. Components read their styling from CSS
+custom properties, and the two global preferences (motion, glassmorphism variant) come from
+`localStorage` with sensible defaults.
+
+## License
+
+MIT © Fabrizio Duroni

package/dist/atoms/animation/motion-div/index.d.mts

@@ -0,0 +1,2 @@
+import { MotionDiv } from "./motion-div.mjs";
+export { MotionDiv };

package/dist/atoms/animation/motion-div/motion-div.d.mts

@@ -0,0 +1,7 @@
+import { HTMLMotionProps } from "framer-motion";
+import { FC } from "react";
+//#region src/atoms/animation/motion-div/motion-div.d.ts
+type MotionDivProps = HTMLMotionProps<"div">;
+declare const MotionDiv: FC<MotionDivProps>;
+//#endregion
+export { MotionDiv };

package/dist/atoms/animation/motion-div/motion-div.mjs

@@ -0,0 +1,37 @@
+"use client";
+import { useMotionDivStore } from "./use-motion-div-store.mjs";
+import { c } from "react/compiler-runtime";
+import { motion } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+//#region src/atoms/animation/motion-div/motion-div.tsx
+const MotionDiv = (props) => {
+	const $ = c(6);
+	const { state } = useMotionDivStore();
+	const { motionEnabled } = state;
+	if (!motionEnabled) {
+		let divProps;
+		if ($[0] !== props) {
+			const { animate, initial, transition, variants, whileHover, whileTap, whileFocus, whileInView, whileDrag, exit, layout, layoutId, drag, dragConstraints, dragElastic, dragMomentum, dragTransition, dragSnapToOrigin, dragControls, dragListener, dragPropagation, onDrag, onDragStart, onDragEnd, onDirectionLock, onAnimationStart, onAnimationComplete, onUpdate, onViewportEnter, onViewportLeave, ...t0 } = props;
+			divProps = t0;
+			$[0] = props;
+			$[1] = divProps;
+		} else divProps = $[1];
+		const t0 = divProps;
+		let t1;
+		if ($[2] !== t0) {
+			t1 = /* @__PURE__ */ jsx("div", { ...t0 });
+			$[2] = t0;
+			$[3] = t1;
+		} else t1 = $[3];
+		return t1;
+	}
+	let t0;
+	if ($[4] !== props) {
+		t0 = /* @__PURE__ */ jsx(motion.div, { ...props });
+		$[4] = props;
+		$[5] = t0;
+	} else t0 = $[5];
+	return t0;
+};
+//#endregion
+export { MotionDiv };

package/dist/atoms/animation/motion-div/use-motion-div-store.mjs

@@ -0,0 +1,17 @@
+"use client";
+import { useMotionStore } from "../../../hooks/use-motion-store.mjs";
+import { c } from "react/compiler-runtime";
+//#region src/atoms/animation/motion-div/use-motion-div-store.ts
+const useMotionDivStore = () => {
+	const $ = c(2);
+	const motionEnabled = useMotionStore();
+	let t0;
+	if ($[0] !== motionEnabled) {
+		t0 = { state: { motionEnabled } };
+		$[0] = motionEnabled;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+//#endregion
+export { useMotionDivStore };

package/dist/atoms/buttons/button/button.d.mts

@@ -0,0 +1,8 @@
+import React, { FC, PropsWithChildren } from "react";
+//#region src/atoms/buttons/button/button.d.ts
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & PropsWithChildren & {
+  className?: string;
+};
+declare const Button: FC<ButtonProps>;
+//#endregion
+export { Button };

package/dist/atoms/buttons/button/button.mjs

@@ -0,0 +1,12 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/atoms/buttons/button/button.tsx
+const Button = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsx("button", {
+		className: `glow-container bg-transparent p-3 text-primary-text cursor-pointer text-left flex items-center gap-3${className ? ` ${className}` : ""}`,
+		...props,
+		children
+	});
+};
+//#endregion
+export { Button };

package/dist/atoms/buttons/button/index.d.mts

@@ -0,0 +1,2 @@
+import { Button } from "./button.mjs";
+export { Button };

package/dist/atoms/buttons/switch/index.d.mts

@@ -0,0 +1,2 @@
+import { Switch } from "./switch.mjs";
+export { Switch };

package/dist/atoms/buttons/switch/switch.d.mts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+//#region src/atoms/buttons/switch/switch.d.ts
+interface SwitchProps {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  label?: string;
+}
+declare const Switch: FC<SwitchProps>;
+//#endregion
+export { Switch };

package/dist/atoms/buttons/switch/switch.mjs

@@ -0,0 +1,40 @@
+"use client";
+import { useSwitchStore } from "./use-switch-store.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/atoms/buttons/switch/switch.tsx
+const Switch = (t0) => {
+	const $ = c(8);
+	const { checked, onChange, label } = t0;
+	const { effects } = useSwitchStore(checked, onChange);
+	const { onToggle } = effects;
+	const t1 = `relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border transition-colors duration-150 cursor-pointer ${checked ? "border-accent bg-accent/20 shadow-[0_0_8px_var(--color-accent-alpha-50)]" : "border-accent/30 bg-transparent"}`;
+	const t2 = `pointer-events-none inline-block h-3.5 w-3.5 rounded-full transition-transform duration-150 ${checked ? "translate-x-[18px] bg-accent shadow-[0_0_6px_var(--color-accent)]" : "translate-x-[3px] bg-accent/40"}`;
+	let t3;
+	if ($[0] !== t2) {
+		t3 = /* @__PURE__ */ jsx("span", { className: t2 });
+		$[0] = t2;
+		$[1] = t3;
+	} else t3 = $[1];
+	let t4;
+	if ($[2] !== checked || $[3] !== label || $[4] !== onToggle || $[5] !== t1 || $[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			role: "switch",
+			"aria-checked": checked,
+			"aria-label": label,
+			onClick: onToggle,
+			className: t1,
+			children: t3
+		});
+		$[2] = checked;
+		$[3] = label;
+		$[4] = onToggle;
+		$[5] = t1;
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
+};
+//#endregion
+export { Switch };

package/dist/atoms/buttons/switch/use-switch-store.mjs

@@ -0,0 +1,7 @@
+"use client";
+//#region src/atoms/buttons/switch/use-switch-store.ts
+const useSwitchStore = (checked, onChange) => {
+	return { effects: { onToggle: () => onChange(!checked) } };
+};
+//#endregion
+export { useSwitchStore };

package/dist/atoms/call-to-actions/call-to-action-external-with-tracking/call-to-action-external-with-tracking.d.mts

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from "react";
+//#region src/atoms/call-to-actions/call-to-action-external-with-tracking/call-to-action-external-with-tracking.d.ts
+type CallToActionExternalWithTrackingProps = {
+  href: string;
+  className?: string;
+  target?: string;
+  rel?: string;
+  children?: ReactNode;
+  onClick?: () => void;
+};
+declare const CallToActionExternalWithTracking: FC<CallToActionExternalWithTrackingProps>;
+//#endregion
+export { CallToActionExternalWithTracking };

package/dist/atoms/call-to-actions/call-to-action-external-with-tracking/call-to-action-external-with-tracking.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/atoms/call-to-actions/call-to-action-external-with-tracking/call-to-action-external-with-tracking.tsx
+const CallToActionExternalWithTracking = (t0) => {
+	const $ = c(7);
+	const { children, className, href, onClick, target, rel } = t0;
+	const t1 = `call-to-action${className ? ` ${className}` : ""}`;
+	let t2;
+	if ($[0] !== children || $[1] !== href || $[2] !== onClick || $[3] !== rel || $[4] !== t1 || $[5] !== target) {
+		t2 = /* @__PURE__ */ jsx("a", {
+			className: t1,
+			href,
+			onClick,
+			target,
+			rel,
+			children
+		});
+		$[0] = children;
+		$[1] = href;
+		$[2] = onClick;
+		$[3] = rel;
+		$[4] = t1;
+		$[5] = target;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+};
+//#endregion
+export { CallToActionExternalWithTracking };

package/dist/atoms/call-to-actions/call-to-action-external-with-tracking/index.d.mts

@@ -0,0 +1,2 @@
+import { CallToActionExternalWithTracking } from "./call-to-action-external-with-tracking.mjs";
+export { CallToActionExternalWithTracking };

package/dist/atoms/call-to-actions/call-to-action-internal-with-tracking/call-to-action-internal-with-tracking.d.mts

@@ -0,0 +1,14 @@
+import { LinkComponent } from "../../links/anchor-link/anchor-link.mjs";
+import "../../links/anchor-link/index.mjs";
+import { FC, ReactNode } from "react";
+//#region src/atoms/call-to-actions/call-to-action-internal-with-tracking/call-to-action-internal-with-tracking.d.ts
+type CallToActionInternalWithTrackingProps = {
+  to: string;
+  linkComponent?: LinkComponent;
+  className?: string;
+  children?: ReactNode;
+  onClick?: () => void;
+};
+declare const CallToActionInternalWithTracking: FC<CallToActionInternalWithTrackingProps>;
+//#endregion
+export { CallToActionInternalWithTracking, CallToActionInternalWithTrackingProps };

package/dist/atoms/call-to-actions/call-to-action-internal-with-tracking/call-to-action-internal-with-tracking.mjs

@@ -0,0 +1,29 @@
+"use client";
+import { AnchorLink } from "../../links/anchor-link/anchor-link.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/atoms/call-to-actions/call-to-action-internal-with-tracking/call-to-action-internal-with-tracking.tsx
+const CallToActionInternalWithTracking = (t0) => {
+	const $ = c(6);
+	const { children, className, to, onClick, linkComponent: t1 } = t0;
+	const Link = t1 === void 0 ? AnchorLink : t1;
+	const t2 = `call-to-action${className ? ` ${className}` : ""}`;
+	let t3;
+	if ($[0] !== Link || $[1] !== children || $[2] !== onClick || $[3] !== t2 || $[4] !== to) {
+		t3 = /* @__PURE__ */ jsx(Link, {
+			className: t2,
+			href: to,
+			onClick,
+			children
+		});
+		$[0] = Link;
+		$[1] = children;
+		$[2] = onClick;
+		$[3] = t2;
+		$[4] = to;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+};
+//#endregion
+export { CallToActionInternalWithTracking };

package/dist/atoms/call-to-actions/call-to-action-internal-with-tracking/index.d.mts

@@ -0,0 +1,2 @@
+import { CallToActionInternalWithTracking, CallToActionInternalWithTrackingProps } from "./call-to-action-internal-with-tracking.mjs";
+export { CallToActionInternalWithTracking, type CallToActionInternalWithTrackingProps };

package/dist/atoms/chip/chip.d.mts

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from "react";
+//#region src/atoms/chip/chip.d.ts
+interface ChipProps {
+  children: ReactNode;
+  big?: boolean;
+  className?: string;
+}
+declare const Chip: FC<ChipProps>;
+//#endregion
+export { Chip, ChipProps };

package/dist/atoms/chip/chip.mjs

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/atoms/chip/chip.tsx
+const Chip = ({ children, big = false, className }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: `glow-container text-shadow-sm p-2 block text-primary-text ${big ? "text-2xl" : "text-sm"} leading-none${className ? ` ${className}` : ""}`,
+		children
+	});
+};
+//#endregion
+export { Chip };

package/dist/atoms/chip/index.d.mts

@@ -0,0 +1,2 @@
+import { Chip, ChipProps } from "./chip.mjs";
+export { Chip, type ChipProps };

package/dist/atoms/effects/glassmorphism-background/glassmorphism-background.d.mts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from "react";
+//#region src/atoms/effects/glassmorphism-background/glassmorphism-background.d.ts
+interface GlassmorphismBackgroundProps {
+  className?: string;
+}
+declare const GlassmorphismBackground: FC<PropsWithChildren<GlassmorphismBackgroundProps>>;
+//#endregion
+export { GlassmorphismBackground };

package/dist/atoms/effects/glassmorphism-background/glassmorphism-background.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { MotionDiv } from "../../animation/motion-div/motion-div.mjs";
+import { useGlassmorphismBackgroundStore } from "./use-glassmorphism-background-store.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/atoms/effects/glassmorphism-background/glassmorphism-background.tsx
+const containerVariants = {
+	hidden: { opacity: 0 },
+	visible: { opacity: 1 }
+};
+const GlassmorphismBackground = (t0) => {
+	const $ = c(3);
+	const { className, children } = t0;
+	const { state } = useGlassmorphismBackgroundStore();
+	const { glassmorphismClass } = state;
+	const t1 = `${glassmorphismClass} relative p-5 md:p-9 ${className}`;
+	let t2;
+	if ($[0] !== children || $[1] !== t1) {
+		t2 = /* @__PURE__ */ jsx(MotionDiv, {
+			className: t1,
+			variants: containerVariants,
+			initial: "hidden",
+			animate: "visible",
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+};
+//#endregion
+export { GlassmorphismBackground };

package/dist/atoms/effects/glassmorphism-background/index.d.mts

@@ -0,0 +1,2 @@
+import { GlassmorphismBackground } from "./glassmorphism-background.mjs";
+export { GlassmorphismBackground };

package/dist/atoms/effects/glassmorphism-background/use-glassmorphism-background-store.mjs

@@ -0,0 +1,17 @@
+"use client";
+import { useGlassmorphism } from "../../../hooks/use-glassmorphism.mjs";
+import { c } from "react/compiler-runtime";
+//#region src/atoms/effects/glassmorphism-background/use-glassmorphism-background-store.ts
+const useGlassmorphismBackgroundStore = () => {
+	const $ = c(2);
+	const { glassmorphismClass } = useGlassmorphism();
+	let t0;
+	if ($[0] !== glassmorphismClass) {
+		t0 = { state: { glassmorphismClass } };
+		$[0] = glassmorphismClass;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+//#endregion
+export { useGlassmorphismBackgroundStore };

package/dist/atoms/effects/image-glow/image-glow.d.mts

@@ -0,0 +1,12 @@
+import { ImageComponent, ImageComponentProps } from "../plain-image/plain-image.mjs";
+import "../plain-image/index.mjs";
+import { FC } from "react";
+//#region src/atoms/effects/image-glow/image-glow.d.ts
+interface ImageGlowProps extends ImageComponentProps {
+  className?: string;
+  noPlaceholder?: boolean;
+  imageComponent?: ImageComponent;
+}
+declare const ImageGlow: FC<ImageGlowProps>;
+//#endregion
+export { ImageGlow, ImageGlowProps };

package/dist/atoms/effects/image-glow/image-glow.mjs

@@ -0,0 +1,20 @@
+import { imageShimmerPlaceholder } from "../image-shimmer-placeholder/image-shimmer-placeholder.mjs";
+import { PlainImage } from "../plain-image/plain-image.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/atoms/effects/image-glow/image-glow.tsx
+const ImageGlow = (props) => {
+	const { src, alt, fill, width, height, placeholder, className, blurDataURL, noPlaceholder, imageComponent: Image = PlainImage, ...restProps } = props;
+	return /* @__PURE__ */ jsx(Image, {
+		src,
+		alt,
+		fill,
+		width,
+		height,
+		...!noPlaceholder ? { placeholder: placeholder ? placeholder : imageShimmerPlaceholder } : {},
+		blurDataURL,
+		className: className ? `glow-container ${className}` : "",
+		...restProps
+	});
+};
+//#endregion
+export { ImageGlow };

package/dist/atoms/effects/image-glow/index.d.mts

@@ -0,0 +1,2 @@
+import { ImageGlow, ImageGlowProps } from "./image-glow.mjs";
+export { ImageGlow, type ImageGlowProps };

package/dist/atoms/effects/image-shimmer-placeholder/image-shimmer-placeholder.d.mts

@@ -0,0 +1,6 @@
+import { ImagePlaceholder } from "../plain-image/plain-image.mjs";
+import "../plain-image/index.mjs";
+//#region src/atoms/effects/image-shimmer-placeholder/image-shimmer-placeholder.d.ts
+declare const imageShimmerPlaceholder: ImagePlaceholder;
+//#endregion
+export { imageShimmerPlaceholder };

package/dist/atoms/effects/image-shimmer-placeholder/image-shimmer-placeholder.mjs

@@ -0,0 +1,22 @@
+//#region src/atoms/effects/image-shimmer-placeholder/image-shimmer-placeholder.tsx
+const shimmer = (w, h) => `
+<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="g">
+      <stop stop-color="#001100" offset="20%" />
+      <stop stop-color="#002200" offset="50%" />
+      <stop stop-color="#001100" offset="70%" />
+    </linearGradient>
+  </defs>
+  <rect width="${w}" height="${h}" fill="#001100" />
+  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+</svg>`;
+/**
+* `btoa` is a global in browsers and in Node since v16, so the design system needs no Node types
+* and no environment branch. The shimmer SVG is ASCII, which is all latin1-only `btoa` accepts.
+*/
+const toBase64 = (str) => btoa(str);
+const imageShimmerPlaceholder = `data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`;
+//#endregion
+export { imageShimmerPlaceholder };

package/dist/atoms/effects/image-shimmer-placeholder/index.d.mts

@@ -0,0 +1,2 @@
+import { imageShimmerPlaceholder } from "./image-shimmer-placeholder.mjs";
+export { imageShimmerPlaceholder };

package/dist/atoms/effects/matrix-rain/matrix-rain/index.d.mts

@@ -0,0 +1,2 @@
+import { MatrixRain } from "./matrix-rain.mjs";
+export { MatrixRain };

package/dist/atoms/effects/matrix-rain/matrix-rain/matrix-2d-canvas/debounce.mjs

@@ -0,0 +1,12 @@
+//#region src/atoms/effects/matrix-rain/matrix-rain/matrix-2d-canvas/debounce.ts
+const debounce = (func, wait) => {
+	let timeout;
+	return (...args) => {
+		if (timeout) clearTimeout(timeout);
+		timeout = setTimeout(() => {
+			func(...args);
+		}, wait);
+	};
+};
+//#endregion
+export { debounce };

package/dist/atoms/effects/matrix-rain/matrix-rain/matrix-2d-canvas/matrix-2d-canvas.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { useMatrix2dCanvasStore } from "./use-matrix-2d-canvas-store.mjs";
+import { c } from "react/compiler-runtime";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/atoms/effects/matrix-rain/matrix-rain/matrix-2d-canvas/matrix-2d-canvas.tsx
+const Matrix2DCanvasRenderer = (t0) => {
+	const $ = c(2);
+	const { fontSize, density, paused } = t0;
+	const { effects } = useMatrix2dCanvasStore(fontSize, density, paused);
+	const { setCanvasEl } = effects;
+	let t1;
+	if ($[0] !== setCanvasEl) {
+		t1 = /* @__PURE__ */ jsx("canvas", {
+			className: "pointer-events-none absolute top-0 left-0 block h-full w-full",
+			ref: setCanvasEl
+		});
+		$[0] = setCanvasEl;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+};
+const Matrix2DCanvas = memo(Matrix2DCanvasRenderer);
+//#endregion
+export { Matrix2DCanvas };