d3163a5bff
- pgSchema "mesh" with 4 tables isolating the peer mesh domain - Enums: visibility, transport, tier, role - audit_log is metadata-only (E2E encryption enforced at broker/client) - Cascade on mesh delete, soft-delete via archivedAt/revokedAt Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import * as React from "react";
|
|
|
|
import { cn } from "@turbostarter/ui";
|
|
|
|
import type {Variants} from "framer-motion";
|
|
|
|
interface TextShimmerProps {
|
|
children: string;
|
|
className?: string;
|
|
duration?: number;
|
|
spread?: number;
|
|
}
|
|
|
|
function TextShimmer({
|
|
children,
|
|
className,
|
|
duration = 2,
|
|
spread = 2,
|
|
}: TextShimmerProps) {
|
|
const dynamicSpread = React.useMemo(() => spread, [spread]);
|
|
|
|
const variants: Variants = React.useMemo(() => {
|
|
return {
|
|
initial: {
|
|
backgroundPosition: "100% center",
|
|
},
|
|
animate: {
|
|
backgroundPosition: "0% center",
|
|
},
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<motion.span
|
|
className={cn(
|
|
"relative inline-block bg-clip-text text-transparent",
|
|
"bg-[length:250%_100%,100%_100%]",
|
|
"bg-[linear-gradient(90deg,transparent,var(--tw-gradient-from)_calc(50%-var(--shimmer-spread)),var(--tw-gradient-to)_50%,var(--tw-gradient-from)_calc(50%+var(--shimmer-spread)),transparent),linear-gradient(var(--base-gradient-color),var(--base-gradient-color))]",
|
|
"from-foreground via-foreground/90 to-foreground",
|
|
"[--base-gradient-color:hsl(var(--muted-foreground)/0.5)]",
|
|
"[--shimmer-spread:--spacing(8)]",
|
|
className,
|
|
)}
|
|
style={
|
|
{
|
|
"--shimmer-spread": `${dynamicSpread}rem`,
|
|
} as React.CSSProperties
|
|
}
|
|
initial="initial"
|
|
animate="animate"
|
|
variants={variants}
|
|
transition={{
|
|
duration,
|
|
ease: "linear",
|
|
repeat: Infinity,
|
|
}}
|
|
>
|
|
{children}
|
|
</motion.span>
|
|
);
|
|
}
|
|
|
|
export { TextShimmer };
|