feat: replace literal decorations with AbstractBore and AbstractTrench

Former-commit-id: 4f7c5fcc7203aa4a36aabd8ffc13cf9f28a0f77a
This commit is contained in:
2026-05-11 21:44:31 +02:00
parent 74caea6854
commit e33dcdddac
13 changed files with 186 additions and 411 deletions

View File

@@ -4,7 +4,6 @@ import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useTransition } from './TransitionProvider';
import Image from 'next/image';
import { DrillBitSpinner } from '@/components/ui/decorations/DrillBitSpinner';
export function PageTransitionShutter() {
const { isTransitioning, transitionMessage } = useTransition();
@@ -159,28 +158,19 @@ export function PageTransitionShutter() {
)}
</AnimatePresence>
{/* ── DrillBit loading indicator (replaces three dots) ── */}
{/* ── Abstract horizontal energy pulse (Loader) ── */}
<motion.div
className="mt-8 relative flex items-center justify-center"
initial={{ opacity: 0, scale: 0.5 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.5 }}
className="mt-12 relative flex items-center justify-center w-48 h-[2px] bg-white/10 overflow-hidden rounded-full"
initial={{ opacity: 0, scaleX: 0 }}
animate={{ opacity: 1, scaleX: 1 }}
exit={{ opacity: 0, scaleX: 0 }}
transition={{ duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1] }}
>
{/* Outer pulsing ring */}
<motion.div
className="absolute rounded-full border border-primary/30"
animate={{ scale: [1, 1.8, 1], opacity: [0.5, 0, 0.5] }}
transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }}
style={{ width: 120, height: 120 }}
className="absolute left-0 top-0 bottom-0 bg-primary w-1/3 rounded-full blur-[1px]"
animate={{ x: ['-100%', '300%'] }}
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
/>
<motion.div
className="absolute rounded-full border border-primary/15"
animate={{ scale: [1, 2.4, 1], opacity: [0.3, 0, 0.3] }}
transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut', delay: 0.4 }}
style={{ width: 120, height: 120 }}
/>
<DrillBitSpinner size={80} duration={3} glow />
</motion.div>
{/* Background bore arc (full width, bottom) */}