diff --git a/src/constants/Categories.js b/src/constants/Categories.js index 021ce414..1da8bdd0 100644 --- a/src/constants/Categories.js +++ b/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' ], } ]; \ No newline at end of file diff --git a/src/constants/Components.js b/src/constants/Components.js index 20d9c6f7..fdd5f80f 100644 --- a/src/constants/Components.js +++ b/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 = { diff --git a/src/constants/code/Backgrounds/matrixCodeCode.js b/src/constants/code/Backgrounds/matrixCodeCode.js new file mode 100644 index 00000000..301992df --- /dev/null +++ b/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'; +`, + code, + css, + tailwind, + tsCode, + tsTailwind +} \ No newline at end of file diff --git a/src/content/Backgrounds/MatrixCode/MatrixCode.css b/src/content/Backgrounds/MatrixCode/MatrixCode.css new file mode 100644 index 00000000..40ea2648 --- /dev/null +++ b/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; +} diff --git a/src/content/Backgrounds/MatrixCode/MatrixCode.jsx b/src/content/Backgrounds/MatrixCode/MatrixCode.jsx new file mode 100644 index 00000000..6c120f81 --- /dev/null +++ b/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 ; +}; + +export default MatrixCode; diff --git a/src/demo/Backgrounds/MatrixCodeDemo.jsx b/src/demo/Backgrounds/MatrixCodeDemo.jsx new file mode 100644 index 00000000..f97cb149 --- /dev/null +++ b/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 ( + + + + + + +
+

Customize

+ + + Font Size + { + setFontSize(val); + }} + width="200px" + > + + + + + + {fontSize} + + + + Color + { setColor(e.target.value); }} + width="50px" + /> + {color} + + + + Characters + { setCharacters(e.target.value); }} + width="200px" + /> + + + + Fade Opacity + { + setFadeOpacity(val); + }} + width="200px" + > + + + + + + {fadeOpacity} + + + + Speed + { + setSpeed(val); + }} + width="200px" + > + + + + + + {speed} + +
+ + + + + + + + + + + + + ); +}; + +export default MatrixCodeDemo; + + + + + diff --git a/src/tailwind/Backgrounds/MatrixCode/MatrixCode.jsx b/src/tailwind/Backgrounds/MatrixCode/MatrixCode.jsx new file mode 100644 index 00000000..a167010d --- /dev/null +++ b/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 ; +}; + +export default MatrixCode; diff --git a/src/ts-default/Backgrounds/MatrixCode/MatrixCode.css b/src/ts-default/Backgrounds/MatrixCode/MatrixCode.css new file mode 100644 index 00000000..7939a7f1 --- /dev/null +++ b/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; + } + \ No newline at end of file diff --git a/src/ts-default/Backgrounds/MatrixCode/MatrixCode.tsx b/src/ts-default/Backgrounds/MatrixCode/MatrixCode.tsx new file mode 100644 index 00000000..7a256522 --- /dev/null +++ b/src/ts-default/Backgrounds/MatrixCode/MatrixCode.tsx @@ -0,0 +1,80 @@ +import React, { useEffect, useRef } from 'react'; + +interface MatrixCodeProps { + fontSize?: number; + color?: string; + characters?: string; + fadeOpacity?: number; + speed?: number; + className?: string; +} + +const MatrixCode: React.FC = ({ + 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: number[] = []; + 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; // Apply speed multiplier + } + }; + + // Adjust interval based on speed (faster speed = lower interval) + const interval = setInterval(draw, 33 / speed); + + return () => { + clearInterval(interval); + window.removeEventListener('resize', resizeCanvas); + }; + }, [fontSize, color, characters, fadeOpacity, speed]); + + return ( + + ); +}; + +export default MatrixCode; \ No newline at end of file diff --git a/src/ts-tailwind/Backgrounds/MatrixCode/MatrixCode.tsx b/src/ts-tailwind/Backgrounds/MatrixCode/MatrixCode.tsx new file mode 100644 index 00000000..25449fae --- /dev/null +++ b/src/ts-tailwind/Backgrounds/MatrixCode/MatrixCode.tsx @@ -0,0 +1,81 @@ +import React, { useEffect, useRef } from 'react'; + +interface MatrixCodeProps { + fontSize?: number; + color?: string; + characters?: string; + fadeOpacity?: number; + speed?: number; + className?: string; +} + +const MatrixCode: React.FC = ({ + 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: number[] = []; + 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; // Apply speed multiplier + } + }; + + // Adjust interval based on speed (faster speed = lower interval) + const interval = setInterval(draw, 33 / speed); + + return () => { + clearInterval(interval); + window.removeEventListener('resize', resizeCanvas); + }; + }, [fontSize, color, characters, fadeOpacity, speed]); + + return ( + + ); +}; + +export default MatrixCode; +