haitham/open-lovable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

continue re-design

Browse Source
This commit is contained in:
Developers Digest
2025-09-05 13:06:17 -04:00
parent b96d048dbd
commit 836b085f75
270 changed files with 32269 additions and 5182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/shared/effects/flame/slate-grid/grid-data.json
+17
View File
@@ -0,0 +1,17 @@
[
"┌─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐\n│ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ │\n└─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘",
"┌─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐\n│ ░ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ │\n└─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘",
"┌─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐\n│ ▒ │ ░ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ ░ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ │\n└─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘",
"┌─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐\n│ ▓ │ ▒ │ ░ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ ▒ │ ░ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ ░ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ │\n└─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘",
"┌─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐\n│ ▒ │ ▓ │ ▒ │ ░ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ ▓ │ ▒ │ ░ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ ▒ │ ░ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ ░ │ │ │ │ │ │\n└─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘",
"┌─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐\n│ ░ │ ▒ │ ▓ │ ▒ │ ░ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ ▒ │ ▓ │ ▒ │ ░ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ ▓ │ ▒ │ ░ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ ▒ │ ░ │ │ │ │ │\n└─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘",
"┌─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐\n│ │ ░ │ ▒ │ ▓ │ ▒ │ ░ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ ░ │ ▒ │ ▓ │ ▒ │ ░ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ ▒ │ ▓ │ ▒ │ ░ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ ▓ │ ▒ │ ░ │ │ │ │\n└─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘",
"┌─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐\n│ │ │ ░ │ ▒ │ ▓ │ ▒ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ ░ │ ▒ │ ▓ │ ▒ │ ░ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ ░ │ ▒ │ ▓ │ ▒ │ ░ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ ▒ │ ▓ │ ▒ │ ░ │ │ │\n└─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘",
"┌─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐\n│ │ │ │ ░ │ ▒ │ ▓ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ ░ │ ▒ │ ▓ │ ▒ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ ░ │ ▒ │ ▓ │ ▒ │ ░ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ ░ │ ▒ │ ▓ │ ▒ │ ░ │ │\n└─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘",
"┌─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐\n│ │ │ │ │ ░ │ ▒ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ ░ │ ▒ │ ▓ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ ░ │ ▒ │ ▓ │ ▒ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ ░ │ ▒ │ ▓ │ ▒ │ ░ │\n└─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘",
"┌─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐\n│ │ │ │ │ │ ░ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ ░ │ ▒ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ ░ │ ▒ │ ▓ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ ░ │ ▒ │ ▓ │ ▒ │\n└─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘",
"┌─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐\n│ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ ░ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ ░ │ ▒ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ ░ │ ▒ │ ▓ │\n└─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘",
"┌─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐\n│ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ ░ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ ░ │ ▒ │\n└─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘",
"┌─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐\n│ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ ░ │\n└─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘",
"┌─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐\n│ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ │\n├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤\n│ │ │ │ │ │ │\n└─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘"
]
components/shared/effects/flame/slate-grid/slate-grid.tsx
+65
View File
@@ -0,0 +1,65 @@
"use client";
import { HTMLAttributes, useEffect, useRef } from "react";
import { cn } from "@/utils/cn";
import { setIntervalOnVisible } from "@/utils/set-timeout-on-visible";
import data from "./grid-data.json";
interface SlateGridProps extends HTMLAttributes<HTMLDivElement> {
interval?: number;
color?: string;
}
export function SlateGrid({
interval = 200,
color = "text-black-alpha-12",
className,
...attrs
}: SlateGridProps) {
const ref = useRef<HTMLDivElement>(null);
const wrapperRef = useRef<HTMLDivElement>(null);
const frameIndex = useRef(0);
useEffect(() => {
const animate = () => {
if (ref.current) {
ref.current.innerHTML = data[frameIndex.current];
frameIndex.current = (frameIndex.current + 1) % data.length;
}
};
// Initialize first frame
animate();
const cleanup = setIntervalOnVisible({
element: wrapperRef.current,
callback: animate,
interval,
});
return () => cleanup?.();
}, [interval]);
return (
<div
ref={wrapperRef}
{...attrs}
className={cn(
"absolute inset-0 pointer-events-none select-none overflow-hidden",
className,
)}
>
<div className="absolute inset-0 flex items-center justify-center">
<div
ref={ref}
className={cn("font-mono fc-decoration", color)}
style={{
whiteSpace: "pre",
fontSize: "10px",
lineHeight: "12px",
}}
/>
</div>
</div>
);
}