forked from emre/www_projectmycelium_com
feat: update cube component color scheme from cyan to blue
- Changed cube gradient colors from cyan to blue for better visual consistency - Updated glow effects and shadows to use blue (rgba(59, 130, 246)) instead of cyan - Modified background aura gradients in StackSection for enhanced depth perception - Replaced HomeFeaturesDark component with new HomeSlider in HomePage layout - Added isolate property to StackSection to prevent gradient bleeding - Enhanced background layer in StackSection with additional
This commit is contained in:
42
src/components/ui/son-of-a-glitch-text.tsx
Normal file
42
src/components/ui/son-of-a-glitch-text.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { type HTMLAttributes, useEffect, useState } from "react";
|
||||
|
||||
interface SonOfAGlitchProps extends HTMLAttributes<HTMLHeadingElement> {
|
||||
text: string;
|
||||
textClassName?: string;
|
||||
glitchClassName?: string;
|
||||
showGlitch?: boolean;
|
||||
}
|
||||
|
||||
export const SonOfAGlitch = ({
|
||||
text,
|
||||
className,
|
||||
textClassName,
|
||||
glitchClassName,
|
||||
showGlitch = true,
|
||||
}: SonOfAGlitchProps) => {
|
||||
const [isGlitching, setIsGlitching] = useState(showGlitch);
|
||||
|
||||
useEffect(() => {
|
||||
setIsGlitching(showGlitch);
|
||||
}, [showGlitch]);
|
||||
|
||||
return (
|
||||
<h1 className={cn("relative font-mono", className)}>
|
||||
<span
|
||||
className={cn(
|
||||
"absolute top-0 left-0 w-full h-full bg-transparent",
|
||||
isGlitching &&
|
||||
"before:content-[attr(data-text)] before:absolute before:top-0 before:w-full before:h-full before:bg-transparent before:left-[-2px] before:text-red-500 before:overflow-hidden before:animate-glitch-1",
|
||||
isGlitching &&
|
||||
"after:content-[attr(data-text)] after:absolute after:top-0 after:w-full after:h-full after:bg-transparent after:left-[2px] after:text-blue-500 after:overflow-hidden after:animate-glitch-2",
|
||||
glitchClassName,
|
||||
)}
|
||||
data-text={text}
|
||||
></span>
|
||||
<span className={cn(textClassName)}>{text}</span>
|
||||
</h1>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user