54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
/**
|
|
* TransitionBlackOverlay Component
|
|
*
|
|
* Overlay for fade-through-color page transitions.
|
|
* Must be rendered at a z-index ABOVE the elements layer to properly cover them.
|
|
*
|
|
* The fade-from-color effect:
|
|
* 1. Page switches instantly (hidden by opaque overlay)
|
|
* 2. Overlay fades out (1 → 0) revealing new page
|
|
*
|
|
* Used by both constructor.tsx and RuntimePresentation.tsx.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import type { TransitionType } from '../types/transition';
|
|
|
|
interface TransitionBlackOverlayProps {
|
|
/** Whether fade animation is in progress */
|
|
isFadingIn: boolean;
|
|
/** Transition type - only renders overlay for 'fade' type */
|
|
transitionType?: TransitionType;
|
|
/** Inline styles for transition duration/easing (from usePageNavigationState) */
|
|
transitionStyle?: React.CSSProperties;
|
|
/** Overlay color (default: #000000) */
|
|
overlayColor?: string;
|
|
/** Additional CSS classes */
|
|
className?: string;
|
|
}
|
|
|
|
const TransitionBlackOverlay: React.FC<TransitionBlackOverlayProps> = ({
|
|
isFadingIn,
|
|
transitionType = 'fade',
|
|
transitionStyle,
|
|
overlayColor = '#000000',
|
|
className = '',
|
|
}) => {
|
|
// Only render overlay for fade transitions
|
|
// 'none' means instant switch (no animation)
|
|
// 'video' is handled by TransitionPreviewOverlay
|
|
if (!isFadingIn || transitionType !== 'fade') return null;
|
|
|
|
return (
|
|
<div
|
|
className={`pointer-events-none absolute inset-0 z-[100] animate-fade-from-black ${className}`}
|
|
style={{
|
|
...transitionStyle,
|
|
backgroundColor: overlayColor,
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default TransitionBlackOverlay;
|