Marc Mintel
9cfe7ee9e5
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Failing after 1m24s
Build & Deploy / 🏗️ Build (push) Failing after 4m3s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 5s
- Refined hero sections for About, Blog, Websites, and Case Studies for a bespoke industrial entry point. - Redesigned Marker component using layered SVG paths for an organic, hand-drawn highlighter effect. - Restored technical precision in ArchitectureVisualizer with refined line thickness. - Streamlined contact page by removing generic headers and prioritizing the configurator/gateway. - Updated technical references to reflect self-hosted Gitea infrastructure. - Cleaned up unused imports and addressed linting warnings across modified pages.
75 lines
1.6 KiB
TypeScript
75 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useRef } from "react";
|
|
import { motion, useInView, useAnimation, Variants } from "framer-motion";
|
|
|
|
interface RevealProps {
|
|
children: React.ReactNode;
|
|
width?: "fit-content" | "100%";
|
|
delay?: number;
|
|
className?: string;
|
|
direction?: "up" | "down" | "left" | "right" | "none";
|
|
scale?: number;
|
|
blur?: boolean;
|
|
}
|
|
|
|
export const Reveal: React.FC<RevealProps> = ({
|
|
children,
|
|
width = "100%",
|
|
delay = 0.25,
|
|
className = "",
|
|
direction = "up",
|
|
scale = 0.98,
|
|
blur = true,
|
|
}) => {
|
|
const variants: Variants = {
|
|
hidden: {
|
|
opacity: 0,
|
|
y: direction === "up" ? 20 : direction === "down" ? -20 : 0,
|
|
x: direction === "left" ? 20 : direction === "right" ? -20 : 0,
|
|
scale: scale !== 1 ? scale : 1,
|
|
filter: blur ? "blur(8px)" : "none",
|
|
},
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
x: 0,
|
|
scale: 1,
|
|
filter: "blur(0px)",
|
|
},
|
|
};
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "relative",
|
|
width,
|
|
}}
|
|
className={className}
|
|
>
|
|
<motion.div
|
|
variants={variants}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true, margin: "-10%" }}
|
|
style={{
|
|
width: width === "100%" ? "100%" : "inherit",
|
|
backfaceVisibility: "hidden",
|
|
}}
|
|
transition={{
|
|
duration: 0.5,
|
|
delay: delay,
|
|
type: "spring",
|
|
stiffness: 100,
|
|
damping: 20,
|
|
mass: 1,
|
|
opacity: { duration: 0.4, ease: [0.16, 1, 0.3, 1] },
|
|
filter: { duration: 0.4 },
|
|
}}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|