revert: remove failed corporate design elements, back to clean state
Former-commit-id: a00aa85ab7b4b8f5707329fd5ea21fe322c744d9
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
import React from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useTransition } from './TransitionProvider';
|
||||
import Image from 'next/image';
|
||||
|
||||
export function PageTransitionShutter() {
|
||||
const { isTransitioning, transitionMessage } = useTransition();
|
||||
@@ -12,34 +13,16 @@ export function PageTransitionShutter() {
|
||||
{isTransitioning && (
|
||||
<motion.div
|
||||
key="shutter"
|
||||
initial={{ x: '-100%' }}
|
||||
animate={{ x: '0%' }}
|
||||
exit={{ x: '100%' }}
|
||||
transition={{ duration: 0.7, ease: [0.76, 0, 0.24, 1] }}
|
||||
className="fixed inset-0 z-[9998] bg-[#050B14] pointer-events-none flex items-center justify-center overflow-hidden"
|
||||
initial={{ y: '100%' }}
|
||||
animate={{ y: '0%' }}
|
||||
exit={{ y: '-100%' }}
|
||||
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="fixed inset-0 z-[9998] bg-[#050B14] pointer-events-none flex flex-col items-center justify-center overflow-hidden"
|
||||
>
|
||||
{/* HDD Drill Head (Leading Edge during entrance) */}
|
||||
<motion.div
|
||||
className="absolute top-0 right-0 bottom-0 w-[4px] bg-primary z-50 shadow-[0_0_40px_rgba(var(--color-primary),1)]"
|
||||
initial={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }} // Fade out drill head when exiting
|
||||
>
|
||||
{/* The glowing drill bit at the center */}
|
||||
<div className="absolute top-1/2 -translate-y-1/2 right-[-2px] w-[10px] h-[60px] bg-white rounded-full shadow-[0_0_30px_rgba(255,255,255,1)]" />
|
||||
<div className="absolute top-1/2 -translate-y-1/2 right-[-4px] w-[14px] h-[20px] bg-primary-light rounded-full" />
|
||||
</motion.div>
|
||||
{/* Subtle grid background */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
|
||||
|
||||
{/* HDD Exit Trail (Trailing Edge during exit) */}
|
||||
<motion.div
|
||||
className="absolute top-0 left-0 bottom-0 w-[2px] bg-primary/50 z-50 shadow-[0_0_20px_rgba(var(--color-primary),0.5)]"
|
||||
initial={{ opacity: 0 }}
|
||||
exit={{ opacity: 1 }} // Fade in trail when exiting
|
||||
/>
|
||||
|
||||
{/* Subtle underground grid background */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:64px_64px] opacity-30" />
|
||||
|
||||
{/* Deep Glow simulating underground tunnel */}
|
||||
{/* Deep Glow inside the Shutter */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent opacity-80 mix-blend-screen" />
|
||||
|
||||
<motion.div
|
||||
@@ -49,9 +32,9 @@ export function PageTransitionShutter() {
|
||||
transition={{ duration: 0.4, delay: 0.2 }}
|
||||
className="relative z-10 flex flex-col items-center w-full px-4"
|
||||
>
|
||||
{/* Masked Logo */}
|
||||
{/* Single Masked Logo Container to prevent double-logo offset */}
|
||||
<div
|
||||
className="relative w-48 h-16 sm:w-64 sm:h-20 filter drop-shadow-[0_0_15px_rgba(255,255,255,0.15)] mb-8"
|
||||
className="relative w-48 h-16 sm:w-64 sm:h-20 filter drop-shadow-[0_0_15px_rgba(255,255,255,0.15)]"
|
||||
style={{
|
||||
WebkitMaskImage: 'url(/assets/logo-white.png)',
|
||||
WebkitMaskSize: 'contain',
|
||||
@@ -63,7 +46,10 @@ export function PageTransitionShutter() {
|
||||
maskPosition: 'center'
|
||||
}}
|
||||
>
|
||||
{/* Base logo color (slightly dimmed to make the sweep visible) */}
|
||||
<div className="absolute inset-0 bg-white/70" />
|
||||
|
||||
{/* Sweeping intense white light */}
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-25deg]"
|
||||
initial={{ left: '-150%' }}
|
||||
@@ -72,7 +58,7 @@ export function PageTransitionShutter() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Status Visualizer */}
|
||||
{/* Transition Message or Graphical Visualizer */}
|
||||
<AnimatePresence>
|
||||
{transitionMessage && (
|
||||
transitionMessage.startsWith('LANG_SWITCH:') ? (
|
||||
@@ -81,24 +67,48 @@ export function PageTransitionShutter() {
|
||||
return (
|
||||
<motion.div
|
||||
key="lang-switch-graphic"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 20 }}
|
||||
className="flex items-center gap-6 drop-shadow-[0_0_30px_rgba(255,255,255,0.1)]"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 1.2 }}
|
||||
className="mt-12 mb-4 flex items-center gap-6 sm:gap-10 drop-shadow-[0_0_30px_rgba(255,255,255,0.1)]"
|
||||
>
|
||||
<div className="text-4xl opacity-50 grayscale">{fromLang}</div>
|
||||
{/* Old Language Flag - Fading out */}
|
||||
<div className="w-20 h-20 sm:w-28 sm:h-28 rounded-[2rem] bg-white/5 border border-white/10 backdrop-blur-md flex items-center justify-center text-5xl sm:text-7xl relative overflow-hidden group grayscale opacity-50">
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white/10"
|
||||
animate={{ scale: [1, 2], opacity: [0.5, 0] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity }}
|
||||
/>
|
||||
<span className="relative z-10 leading-none">{fromLang}</span>
|
||||
</div>
|
||||
|
||||
{/* Connecting Trasse */}
|
||||
<div className="w-16 h-[2px] bg-white/20 relative overflow-hidden">
|
||||
<motion.div
|
||||
className="absolute top-0 bottom-0 w-8 bg-primary shadow-[0_0_10px_rgba(var(--color-primary),1)]"
|
||||
animate={{ left: ['-100%', '200%'] }}
|
||||
transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
|
||||
/>
|
||||
{/* Animated Arrow connecting them */}
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<motion.div
|
||||
animate={{ x: [0, 20, 0] }}
|
||||
transition={{ duration: 1.2, repeat: Infinity, ease: "easeInOut" }}
|
||||
className="text-primary drop-shadow-[0_0_15px_rgba(var(--color-primary),0.8)]"
|
||||
>
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
<polyline points="12 5 19 12 12 19"></polyline>
|
||||
</svg>
|
||||
</motion.div>
|
||||
<div className="flex gap-2 opacity-50">
|
||||
<span className="w-2 h-2 rounded-full bg-primary animate-pulse shadow-[0_0_8px_rgba(var(--color-primary),1)]" />
|
||||
<span className="w-2 h-2 rounded-full bg-primary animate-pulse shadow-[0_0_8px_rgba(var(--color-primary),1)]" style={{ animationDelay: '150ms' }} />
|
||||
<span className="w-2 h-2 rounded-full bg-primary animate-pulse shadow-[0_0_8px_rgba(var(--color-primary),1)]" style={{ animationDelay: '300ms' }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-5xl relative drop-shadow-[0_0_15px_rgba(255,255,255,0.5)]">
|
||||
{toLang}
|
||||
{/* New Language Flag - Intense Glow */}
|
||||
<div className="w-24 h-24 sm:w-32 sm:h-32 rounded-[2.5rem] bg-primary/10 border border-primary/50 shadow-[0_0_80px_rgba(var(--color-primary),0.5)] backdrop-blur-xl flex items-center justify-center text-6xl sm:text-8xl relative overflow-hidden ring-4 ring-primary/30">
|
||||
<span className="relative z-10 drop-shadow-[0_0_15px_rgba(255,255,255,0.6)] leading-none">{toLang}</span>
|
||||
<motion.div
|
||||
className="absolute inset-0 w-[200%] h-full bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-[-20deg]"
|
||||
animate={{ x: ['-100%', '100%'] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
@@ -106,17 +116,56 @@ export function PageTransitionShutter() {
|
||||
) : (
|
||||
<motion.div
|
||||
key="text-message"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="px-6 py-2 rounded-full border border-primary/30 bg-primary/10 text-primary-light font-heading tracking-widest uppercase text-xs font-bold shadow-[0_0_20px_rgba(var(--color-primary),0.2)]"
|
||||
initial={{ opacity: 0, y: 15, scale: 0.9 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: -15, scale: 0.9 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 25 }}
|
||||
className="mt-10 mb-2 px-6 py-2.5 rounded-full border border-primary/40 bg-primary/10 shadow-[0_0_40px_rgba(var(--color-primary),0.3)] backdrop-blur-xl relative overflow-hidden flex items-center justify-center"
|
||||
>
|
||||
{transitionMessage}
|
||||
<motion.div
|
||||
className="absolute inset-0 w-[200%] h-full bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-[-20deg]"
|
||||
animate={{ x: ['-100%', '100%'] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
|
||||
/>
|
||||
<span className="text-white font-heading tracking-[0.2em] uppercase text-xs sm:text-sm font-extrabold flex items-center gap-3 relative z-10 drop-shadow-[0_0_8px_rgba(255,255,255,0.5)]">
|
||||
<motion.svg
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
|
||||
xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-primary-light" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="2" y1="12" x2="22" y2="12"></line>
|
||||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
|
||||
</motion.svg>
|
||||
{transitionMessage}
|
||||
</span>
|
||||
</motion.div>
|
||||
)
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Extremely minimalist transition indicator */}
|
||||
<motion.div
|
||||
className={`${transitionMessage ? 'mt-4' : 'mt-6'} flex gap-1`}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
{[0, 1, 2].map((i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="w-1.5 h-1.5 rounded-full bg-primary"
|
||||
initial={{ opacity: 0.3, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{
|
||||
duration: 0.4,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
delay: i * 0.15
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user