mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance animation transitions and Reveal component effects, and refine iframe loader overlay positioning and BrowserChrome styles.
Some checks failed
Build & Deploy Mintel Blog / build-and-deploy (push) Failing after 3m21s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-02 13:17:33 +01:00
parent 1fadba6297
commit 821a35f0fc
3 changed files with 43 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/IframeSection.tsx
View File

@@ -31,7 +31,7 @@ interface IframeSectionProps {
const BrowserChrome: React.FC<{ url: string; minimal?: boolean }> = ({ url, minimal }) => {
if (minimal) return null;
return (
<div className="h-14 bg-white/70 backdrop-blur-2xl border-b border-slate-200/40 flex items-center px-6 gap-8 z-30 flex-shrink-0 relative">
<div className="h-14 bg-white/90 backdrop-blur-2xl border-b border-slate-200/40 flex items-center px-6 gap-8 z-[100] flex-shrink-0 relative">
{/* Status Indicators (Traffic Lights) */}
<div className="flex gap-1.5 opacity-40">
<div className="w-1.5 h-1.5 rounded-full bg-slate-900" />
@@ -190,11 +190,7 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
return (
<div
className={cn("w-full group relative", !minimal && "space-y-6", className)}
style={{
opacity: 0,
animation: `fadeIn 0.8s ease-out ${delay}s forwards`,
...className?.includes('h-full') ? { height: '100%' } : {}
}}
style={className?.includes('h-full') ? { height: '100%' } : {}}
>
<canvas ref={canvasRef} className="hidden" aria-hidden="true" />
@@ -209,7 +205,7 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
<div
ref={containerRef}
className={cn(
"w-full relative transition-all duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)] flex flex-col",
"w-full relative transition-[transform,shadow,scale] duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)] flex flex-col z-10",
minimal ? "bg-transparent" : "bg-slate-50",
!minimal && "rounded-[2.5rem] border border-slate-200/50 shadow-[0_80px_160px_-40px_rgba(0,0,0,0.18),0_0_1px_rgba(0,0,0,0.1)]",
perspective && "hover:scale-[1.03] hover:-translate-y-3",
@@ -235,21 +231,20 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
</div>
)}
{/* Loader Overlay */}
{isLoading && (
<div className="absolute inset-0 flex items-center justify-center bg-white/60 backdrop-blur-xl z-50 transition-opacity duration-700">
<div className="flex flex-col items-center gap-4">
<div className="w-12 h-12 border-[3px] border-slate-100 border-t-slate-900 rounded-full animate-spin" />
<MonoLabel className="text-[10px] text-slate-400 animate-pulse uppercase tracking-[0.2em]">Establishing Connection</MonoLabel>
</div>
</div>
)}
{/* Browser Frame */}
{browserFrame && <BrowserChrome url="varnish-cache://secure.klz-cables.com" minimal={minimal} />}
{/* Scaled Viewport Container */}
<div className="flex-1 relative overflow-hidden bg-slate-50/50">
{/* Loader Overlay - Now scoped to viewport */}
{isLoading && (
<div className="absolute inset-0 flex items-center justify-center bg-white/60 backdrop-blur-xl z-50 transition-opacity duration-700">
<div className="flex flex-col items-center gap-4">
<div className="w-12 h-12 border-[3px] border-slate-100 border-t-slate-900 rounded-full animate-spin" />
<MonoLabel className="text-[10px] text-slate-400 animate-pulse uppercase tracking-[0.2em]">Establishing Connection</MonoLabel>
</div>
</div>
)}
<div
className={cn(
"transition-all duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)] origin-top-left absolute left-0 right-0",
@@ -339,12 +334,6 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
{!allowScroll && <div className="absolute inset-x-0 bottom-0 top-14 pointer-events-auto cursor-default z-20" />}
</div>
<style jsx global>{`
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
`}</style>
</div>
);
};

35
src/components/Reveal.tsx
View File

@@ -34,10 +34,10 @@ export const Reveal: React.FC<RevealProps> = ({
const getDirectionOffset = () => {
switch (direction) {
case 'up': return { y: 15 };
case 'down': return { y: -15 };
case 'left': return { x: 15 };
case 'right': return { x: -15 };
case 'up': return { y: 20 };
case 'down': return { y: -20 };
case 'left': return { x: 20 };
case 'right': return { x: -20 };
default: return {};
}
};
@@ -46,32 +46,43 @@ export const Reveal: React.FC<RevealProps> = ({
hidden: {
opacity: 0,
...getDirectionOffset(),
scale: scale !== 1 ? scale : 1,
filter: blur ? "blur(8px)" : "blur(0px)"
scale: scale !== 1 ? scale : 0.99,
rotateX: direction === 'up' ? 2 : direction === 'down' ? -2 : 0,
rotateY: direction === 'left' ? -2 : direction === 'right' ? 2 : 0,
},
visible: {
opacity: 1,
y: 0,
x: 0,
scale: 1,
filter: "blur(0px)"
rotateX: 0,
rotateY: 0,
},
};
return (
<div ref={ref} style={{ position: "relative", width }} className={className}>
<div
ref={ref}
style={{
position: "relative",
width,
perspective: "1000px"
}}
className={className}
>
<motion.div
variants={variants}
initial="hidden"
animate={mainControls}
style={{ transformStyle: "preserve-3d" }}
transition={{
duration: 1.2,
duration: 0.8,
delay: delay,
type: "spring",
stiffness: 40,
damping: 20,
stiffness: 70,
damping: 24,
mass: 1,
opacity: { duration: 1, ease: [0.22, 1, 0.36, 1] }
opacity: { duration: 0.5, ease: [0.16, 1, 0.3, 1] }
}}
>
{children}