[FEAT] : add MatrixCode background

src/constants/Categories.js

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Dither', 'Animated List', 'Gooey Nav', 'Threads', 'Lightning', 'Folder', 'Text Cursor'];
+export const NEW = ['Dither', 'Animated List', 'Gooey Nav', 'Threads', 'Lightning', 'Folder', 'Text Cursor', 'Matrix Code'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -97,7 +97,8 @@ export const CATEGORIES = [
       'Squares',
       'Letter Glitch',
       'Particles',
-      'Waves'
+      'Waves',
+      'Matrix Code'
     ],
   }
 ];

src/constants/Components.js

@@ -84,6 +84,7 @@ const backgrounds = {
   'threads': () => import("../demo/Backgrounds/ThreadsDemo"),
   'dither': () => import("../demo/Backgrounds/DitherDemo"),
   'lightning': () => import("../demo/Backgrounds/LightningDemo"),
+  'matrix-code':() => import("../demo/Backgrounds/MatrixCodeDemo")
 };
 
 export const componentMap = {

src/constants/code/Backgrounds/matrixCodeCode.js

@@ -0,0 +1,24 @@
+import { generateCliCommands } from '@/utils/utils';
+
+import code from '@content/Backgrounds/MatrixCode/MatrixCode.jsx?raw';
+import css from '@content/Backgrounds/MatrixCode/MatrixCode.css?raw';
+import tailwind from '@tailwind/Backgrounds/MatrixCode/MatrixCode.jsx?raw';
+import tsCode from '@ts-default/Backgrounds/MatrixCode/MatrixCode.tsx?raw';
+import tsTailwind from '@ts-tailwind/Backgrounds/MatrixCode/MatrixCode.tsx?raw';
+
+export const matrixCode = {
+  ...(generateCliCommands('Backgrounds/MatrixCode')),
+  usage: `import MatrixCode from './MatrixCode';
+<MatrixCode
+  fontSize={20}
+  color="#00ff00"
+  characters="01"
+  fadeOpacity={0.1}
+  speed={1}
+/>`,
+  code,
+  css,
+  tailwind,
+  tsCode,
+  tsTailwind
+}

src/content/Backgrounds/MatrixCode/MatrixCode.css

@@ -0,0 +1,8 @@
+.matrix-code-container {
+  position: "fixed";
+  top: 0;
+  left: 0;
+  width: "100%";
+  height: "100%";
+  z-index: 0;
+}

src/content/Backgrounds/MatrixCode/MatrixCode.jsx

@@ -0,0 +1,67 @@
+import { useEffect, useRef } from "react";
+
+import "./MatrixCode.css";
+
+const MatrixCode = ({
+  fontSize = 20,
+  color = "#00ff00",
+  characters = "01",
+  fadeOpacity = 0.1,
+  speed = 1,
+  className = ''
+}) => {
+  const canvasRef = useRef(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const resizeCanvas = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+
+    resizeCanvas();
+    window.addEventListener("resize", resizeCanvas);
+
+    const chars = characters.split("");
+    const drops = [];
+    const columnCount = Math.floor(canvas.width / fontSize);
+
+    for (let i = 0; i < columnCount; i++) {
+      drops[i] = Math.random() * -100;
+    }
+
+    const draw = () => {
+      ctx.fillStyle = `rgba(0, 0, 0, ${fadeOpacity})`;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      ctx.fillStyle = color;
+      ctx.font = `${fontSize}px monospace`;
+
+      for (let i = 0; i < drops.length; i++) {
+        const char = chars[Math.floor(Math.random() * chars.length)];
+        ctx.fillText(char, i * fontSize, drops[i] * fontSize);
+
+        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+          drops[i] = 0;
+        }
+        drops[i] += speed;
+      }
+    };
+
+    const interval = setInterval(draw, 33 / speed);
+
+    return () => {
+      clearInterval(interval);
+      window.removeEventListener("resize", resizeCanvas);
+    };
+  }, [fontSize, color, characters, fadeOpacity, speed]);
+
+  return <canvas ref={canvasRef} className={`matrix-code-container ${className}`} />;
+};
+
+export default MatrixCode;

src/demo/Backgrounds/MatrixCodeDemo.jsx

@@ -0,0 +1,169 @@
+import { useState } from "react";
+import { CodeTab, PreviewTab, CliTab, TabbedLayout } from "../../components/common/TabbedLayout";
+import { Box, Flex, Input, Slider, SliderFilledTrack, SliderThumb, SliderTrack, Text } from "@chakra-ui/react";
+
+import CodeExample from "../../components/code/CodeExample";
+import CliInstallation from "../../components/code/CliInstallation";
+import PropTable from "../../components/common/PropTable";
+
+import MatrixCode from "../../content/Backgrounds/MatrixCode/MatrixCode";
+import { matrixCode } from "../../constants/code/Backgrounds/matrixCodeCode";
+
+const MatrixCodeDemo = () => {
+  const [fontSize, setFontSize] = useState(20);
+  const [color, setColor] = useState("#00ff00");
+  const [characters, setCharacters] = useState("01");
+  const [fadeOpacity, setFadeOpacity] = useState(0.1);
+  const [speed, setSpeed] = useState(1);
+
+  const propData = [
+    {
+      name: "fontSize",
+      type: "number",
+      default: "20",
+      description: "The font size of the matrix code characters."
+    },
+    {
+      name: "color",
+      type: "string",
+      default: "#00ff00",
+      description: "The color of the matrix code characters."
+    },
+    {
+      name: "characters",
+      type: "string",
+      default: "01",
+      description: "The characters used in the matrix code effect."
+    },
+    {
+      name: "fadeOpacity",
+      type: "number",
+      default: "0.1",
+      description: "The opacity of the fade effect for the matrix code."
+    },
+    {
+      name: "speed",
+      type: "number",
+      default: "1",
+      description: "The speed of the matrix code animation."
+    }
+  ];
+
+  return (
+    <TabbedLayout>
+      <PreviewTab>
+        <Box position="relative" className="demo-container" h={500} p={0} overflow="hidden">
+          <MatrixCode
+            fontSize={fontSize}
+            color={color}
+            characters={characters}
+            fadeOpacity={fadeOpacity}
+            speed={speed}
+          />
+        </Box>
+
+        <div className="preview-options">
+          <h2 className="demo-title-extra">Customize</h2>
+
+          <Flex gap={4} align="center" mt={4}>
+            <Text fontSize="sm">Font Size</Text>
+            <Slider
+              min={10}
+              max={50}
+              step={5}
+              value={fontSize}
+              onChange={(val) => {
+                setFontSize(val);
+              }}
+              width="200px"
+            >
+              <SliderTrack>
+                <SliderFilledTrack />
+              </SliderTrack>
+              <SliderThumb />
+            </Slider>
+            <Text fontSize="sm">{fontSize}</Text>
+          </Flex>
+
+          <Flex gap={4} align="center" mt={4}>
+            <Text fontSize="sm">Color</Text>
+            <Input
+              type="color"
+              value={color}
+              onChange={(e) => { setColor(e.target.value); }}
+              width="50px"
+            />
+            <Text fontSize="sm">{color}</Text>
+          </Flex>
+
+          <Flex gap={4} align="center" mt={4}>
+            <Text fontSize="sm">Characters</Text>
+            <Input
+              type="text"
+              value={characters}
+              onChange={(e) => { setCharacters(e.target.value); }}
+              width="200px"
+            />
+          </Flex>
+
+          <Flex gap={4} align="center" mt={4}>
+            <Text fontSize="sm">Fade Opacity</Text>
+            <Slider
+              min={0}
+              max={1}
+              step={0.1}
+              value={fadeOpacity}
+              onChange={(val) => {
+                setFadeOpacity(val);
+              }}
+              width="200px"
+            >
+              <SliderTrack>
+                <SliderFilledTrack />
+              </SliderTrack>
+              <SliderThumb />
+            </Slider>
+            <Text fontSize="sm">{fadeOpacity}</Text>
+          </Flex>
+
+          <Flex gap={4} align="center" mt={4}>
+            <Text fontSize="sm">Speed</Text>
+            <Slider
+              min={0.5}
+              max={5}
+              step={0.5}
+              value={speed}
+              onChange={(val) => {
+                setSpeed(val);
+              }}
+              width="200px"
+            >
+              <SliderTrack>
+                <SliderFilledTrack />
+              </SliderTrack>
+              <SliderThumb />
+            </Slider>
+            <Text fontSize="sm">{speed}</Text>
+          </Flex>
+        </div>
+
+        <PropTable data={propData} />
+      </PreviewTab>
+
+      <CodeTab>
+        <CodeExample codeObject={matrixCode} />
+      </CodeTab>
+
+      <CliTab>
+        <CliInstallation {...matrixCode} />
+      </CliTab>
+    </TabbedLayout>
+  );
+};
+
+export default MatrixCodeDemo;
+
+
+
+
+

src/tailwind/Backgrounds/MatrixCode/MatrixCode.jsx

@@ -0,0 +1,67 @@
+import { useEffect, useRef } from "react";
+
+import "./MatrixCode.css";
+
+const MatrixCode = ({
+  fontSize = 20,
+  color = "#00ff00",
+  characters = "01",
+  fadeOpacity = 0.1,
+  speed = 1,
+  className = ''
+}) => {
+  const canvasRef = useRef(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const resizeCanvas = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+
+    resizeCanvas();
+    window.addEventListener("resize", resizeCanvas);
+
+    const chars = characters.split("");
+    const drops = [];
+    const columnCount = Math.floor(canvas.width / fontSize);
+
+    for (let i = 0; i < columnCount; i++) {
+      drops[i] = Math.random() * -100;
+    }
+
+    const draw = () => {
+      ctx.fillStyle = `rgba(0, 0, 0, ${fadeOpacity})`;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      ctx.fillStyle = color;
+      ctx.font = `${fontSize}px monospace`;
+
+      for (let i = 0; i < drops.length; i++) {
+        const char = chars[Math.floor(Math.random() * chars.length)];
+        ctx.fillText(char, i * fontSize, drops[i] * fontSize);
+
+        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+          drops[i] = 0;
+        }
+        drops[i] += speed;
+      }
+    };
+
+    const interval = setInterval(draw, 33 / speed);
+
+    return () => {
+      clearInterval(interval);
+      window.removeEventListener("resize", resizeCanvas);
+    };
+  }, [fontSize, color, characters, fadeOpacity, speed]);
+
+  return <canvas ref={canvasRef} className={`fixed top-0 left-0 w-full h-full z-0 ${className}`} />;
+};
+
+export default MatrixCode;

src/ts-default/Backgrounds/MatrixCode/MatrixCode.css

@@ -0,0 +1,9 @@
+.matrix-code-container {
+    position: "fixed";
+    top: 0;
+    left: 0;
+    width: "100%";
+    height: "100%";
+    z-index: 0;
+  }
+