mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

feat: distribute animated DrillBitSpinner across all major components as a background watermark

Browse Source 
Former-commit-id: ad28a5d93b773be795cd0d73fd6ed2accd257a10
This commit is contained in:
Marc Mintel
2026-05-11 11:00:07 +02:00
parent 8fc4cadd19
commit c97ee638d9
7 changed files with 180 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
components/providers/PageTransitionShutter.tsx
View File

@@ -4,6 +4,7 @@ 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();
@@ -144,35 +145,36 @@ export function PageTransitionShutter() {
)}
</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 }}
{/* ── DrillBit loading indicator (replaces three dots) ── */}
<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 }}
transition={{ duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1] }}
>
{[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
}}
/>
))}
{/* 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 }}
/>
<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>
{/* Abstract HDD bore arc — decorative element during page transitions */}
{/* Background bore arc (full width, bottom) */}
<svg
viewBox="0 0 700 220"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="absolute bottom-0 left-0 w-full h-32 sm:h-44 opacity-[0.07] pointer-events-none"
className="absolute bottom-0 left-0 w-full h-36 sm:h-52 opacity-[0.10] pointer-events-none"
>
<motion.path
d="M -50 60 C 120 60 180 180 350 180 C 520 180 580 60 750 60"
@@ -190,13 +192,6 @@ export function PageTransitionShutter() {
animate={{ pathLength: 1 }}
transition={{ duration: 1.2, ease: 'easeOut' }}
/>
<motion.circle
r={7}
fill="#0e7a5c"
style={{ offsetPath: "path('M -50 60 C 120 60 180 180 350 180 C 520 180 580 60 750 60')", offsetDistance: '0%' } as React.CSSProperties}
animate={{ offsetDistance: ['0%', '100%'] }}
transition={{ duration: 1.8, ease: 'easeInOut', delay: 0.4, repeat: Infinity, repeatDelay: 0.6 }}
/>
</svg>
</motion.div>
</motion.div>