capsule-ai-cli
Version:
The AI Model Orchestrator - Intelligent multi-model workflows with device-locked licensing
96 lines • 5.15 kB
JavaScript
import React, { useState, useEffect } from 'react';
import { Box, Text, useStdout } from 'ink';
import chalk from 'chalk';
import gradient from 'gradient-string';
export const MatrixRainAnimation = ({ onComplete, duration = 3000 }) => {
const { stdout } = useStdout();
const [drops, setDrops] = useState([]);
const [frame, setFrame] = useState(0);
const [typewriterText, setTypewriterText] = useState('');
const [showCapsule, setShowCapsule] = useState(false);
const width = stdout.columns || 80;
const height = stdout.rows || 24;
const capsuleText = "CAPSULE";
const tagline = "Initializing Capsule...";
const matrixChars = "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789";
useEffect(() => {
const initialDrops = [];
const dropCount = Math.floor(width / 4);
for (let i = 0; i < dropCount; i++) {
initialDrops.push({
x: Math.floor(Math.random() * width),
y: Math.floor(Math.random() * height) - height,
speed: 0.5 + Math.random() * 1.5,
chars: Array.from({ length: 10 + Math.floor(Math.random() * 10) }, () => matrixChars[Math.floor(Math.random() * matrixChars.length)]),
trail: 8 + Math.floor(Math.random() * 8)
});
}
setDrops(initialDrops);
}, [width, height]);
useEffect(() => {
const interval = setInterval(() => {
setFrame(prev => {
const next = prev + 1;
setDrops(currentDrops => currentDrops.map(drop => ({
...drop,
y: drop.y + drop.speed,
...(drop.y > height + drop.trail ? {
y: -drop.trail,
x: Math.floor(Math.random() * width),
speed: 0.5 + Math.random() * 1.5,
chars: Array.from({ length: 10 + Math.floor(Math.random() * 10) }, () => matrixChars[Math.floor(Math.random() * matrixChars.length)])
} : {})
})));
if (next > 20 && next <= 20 + capsuleText.length * 3) {
const charIndex = Math.floor((next - 20) / 3);
setTypewriterText(capsuleText.slice(0, charIndex));
}
if (next === 20 + capsuleText.length * 3 + 5) {
setShowCapsule(true);
}
return next;
});
}, 50);
const completeTimer = setTimeout(() => {
clearInterval(interval);
onComplete();
}, duration);
return () => {
clearInterval(interval);
clearTimeout(completeTimer);
};
}, [onComplete, duration, capsuleText.length]);
const renderMatrix = () => {
const matrix = Array(height).fill(null).map(() => Array(width).fill(' '));
drops.forEach(drop => {
drop.chars.forEach((char, i) => {
const y = Math.floor(drop.y - i);
if (y >= 0 && y < height && drop.x >= 0 && drop.x < width) {
const intensity = 1 - (i / drop.trail);
matrix[y][drop.x] = intensity > 0.8 ? chalk.white(char) :
intensity > 0.5 ? chalk.green(char) :
intensity > 0.3 ? chalk.greenBright(char) :
chalk.gray(char);
}
});
});
return matrix.map(row => row.join('')).join('\n');
};
const centerText = (text) => {
const padding = Math.floor((width - text.length) / 2);
return ' '.repeat(Math.max(0, padding)) + text;
};
return (React.createElement(Box, { flexDirection: "column", width: width, height: height },
React.createElement(Box, { position: "absolute", width: width, height: height },
React.createElement(Text, null, renderMatrix())),
React.createElement(Box, { position: "absolute", width: width, height: height, flexDirection: "column", alignItems: "center", justifyContent: "center" },
typewriterText && !showCapsule && (React.createElement(Box, { marginBottom: 1 },
React.createElement(Text, { bold: true, color: "green" }, centerText(typewriterText)))),
showCapsule && (React.createElement(Box, { flexDirection: "column", alignItems: "center" },
React.createElement(Text, { bold: true }, gradient(['#39ff14', '#00ff41', '#0fa']).multiline(centerText("╔═══════════════════════════════╗\n") +
centerText("║ CAPSULE ║\n") +
centerText("╚═══════════════════════════════╝"))),
frame > 60 && (React.createElement(Box, { marginTop: 1 },
React.createElement(Text, { color: "cyan" }, centerText(tagline)))))))));
};
//# sourceMappingURL=MatrixRainAnimation.js.map