88 lines
5.3 KiB
TypeScript
88 lines
5.3 KiB
TypeScript
import React from 'react';
|
|
import { useOceanDepthEffect } from '@/lib/hooks/useOceanDepthEffect';
|
|
|
|
export const OceanBackground: React.FC = () => {
|
|
const scrollDepth = useOceanDepthEffect();
|
|
|
|
return (
|
|
<div className="fixed inset-0 pointer-events-none">
|
|
{/* Couche de base : dégradé océanique naturel de surface vers profondeur */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-banquise-blue-lightest via-banquise-blue-light via-banquise-blue to-banquise-blue-dark"></div>
|
|
|
|
{/* Couche d'assombrissement progressif basé sur le scroll */}
|
|
<div
|
|
className="absolute inset-0 bg-gradient-to-b from-transparent via-banquise-blue-dark/40 to-slate-900/80 transition-opacity duration-700 ease-out"
|
|
style={{
|
|
opacity: scrollDepth * 0.8,
|
|
transform: `translateY(${scrollDepth * 20}%)`
|
|
}}
|
|
/>
|
|
|
|
{/* Couche de profondeur extrême pour les abysses */}
|
|
<div
|
|
className="absolute inset-0 bg-gradient-to-b from-transparent via-slate-800/60 to-slate-950 transition-opacity duration-1000 ease-out"
|
|
style={{
|
|
opacity: Math.max(0, (scrollDepth - 0.4) * 1.5),
|
|
transform: `translateY(${scrollDepth * 30}%)`
|
|
}}
|
|
/>
|
|
|
|
{/* Rayons de lumière naturels qui s'estompent avec la profondeur */}
|
|
<div
|
|
className="absolute inset-0 transition-opacity duration-1000"
|
|
style={{ opacity: Math.max(0.2, 1 - scrollDepth * 1.2) }}
|
|
>
|
|
<div className="absolute top-0 left-0 w-full h-1/3 bg-gradient-to-br from-banquise-blue-lightest/15 via-transparent to-transparent" />
|
|
<div className="absolute top-0 right-0 w-full h-1/4 bg-gradient-to-bl from-banquise-blue-lightest/10 via-transparent to-transparent" />
|
|
<div className="absolute top-0 left-1/3 w-1 h-full bg-gradient-to-b from-banquise-blue-lightest/25 via-banquise-blue-lightest/5 to-transparent animate-ocean-shimmer" />
|
|
<div className="absolute top-0 left-2/3 w-1 h-full bg-gradient-to-b from-banquise-blue-lightest/20 via-banquise-blue-lightest/3 to-transparent animate-ocean-shimmer delay-1000" />
|
|
</div>
|
|
|
|
{/* Bulles marines qui deviennent plus rares en profondeur */}
|
|
<div className="absolute inset-0">
|
|
{/* Bulles de surface - nombreuses et actives */}
|
|
<div
|
|
className="absolute transition-opacity duration-700"
|
|
style={{ opacity: Math.max(0.3, 1 - scrollDepth * 0.8) }}
|
|
>
|
|
<div className="absolute top-[10%] left-[15%] w-3 h-3 bg-banquise-blue-lightest/30 rounded-full animate-bubble-float" />
|
|
<div className="absolute top-[20%] left-[75%] w-2 h-2 bg-banquise-blue-lightest/25 rounded-full animate-bubble-float-fast delay-300" />
|
|
<div className="absolute top-[25%] left-[40%] w-4 h-4 bg-banquise-blue-lightest/20 rounded-full animate-bubble-float-slow delay-600" />
|
|
<div className="absolute top-[35%] left-[80%] w-2 h-2 bg-banquise-blue-lightest/35 rounded-full animate-bubble-float delay-900" />
|
|
</div>
|
|
|
|
{/* Bulles de moyenne profondeur - moins nombreuses */}
|
|
<div
|
|
className="absolute transition-opacity duration-700"
|
|
style={{ opacity: Math.max(0.1, 0.6 - scrollDepth * 0.8) }}
|
|
>
|
|
<div className="absolute top-[50%] left-[25%] w-2 h-2 bg-banquise-blue-light/20 rounded-full animate-bubble-float-slow delay-1200" />
|
|
<div className="absolute top-[60%] left-[70%] w-1.5 h-1.5 bg-banquise-blue-light/15 rounded-full animate-bubble-float delay-1500" />
|
|
<div className="absolute top-[65%] left-[45%] w-3 h-3 bg-banquise-blue-light/10 rounded-full animate-bubble-float-fast delay-1800" />
|
|
</div>
|
|
|
|
{/* Bulles des profondeurs - très rares et subtiles */}
|
|
<div
|
|
className="absolute transition-opacity duration-1000"
|
|
style={{ opacity: Math.max(0, 0.3 - scrollDepth * 0.6) }}
|
|
>
|
|
<div className="absolute top-[80%] left-[20%] w-1 h-1 bg-banquise-blue/10 rounded-full animate-bubble-float-slow delay-2100" />
|
|
<div className="absolute top-[85%] left-[60%] w-1.5 h-1.5 bg-banquise-blue/8 rounded-full animate-bubble-float delay-2400" />
|
|
<div className="absolute top-[90%] left-[35%] w-1 h-1 bg-banquise-blue/5 rounded-full animate-bubble-float-fast delay-2700" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Effet de caustics (reflets de lumière sous l'eau) qui disparaît en profondeur */}
|
|
<div
|
|
className="absolute inset-0 transition-opacity duration-1000"
|
|
style={{ opacity: Math.max(0, 0.4 - scrollDepth * 0.7) }}
|
|
>
|
|
<div className="absolute top-0 left-0 w-full h-full opacity-20">
|
|
<div className="absolute top-[10%] left-[20%] w-32 h-1 bg-gradient-to-r from-transparent via-banquise-blue-lightest/40 to-transparent transform rotate-12 animate-ocean-shimmer" />
|
|
<div className="absolute top-[30%] left-[60%] w-24 h-1 bg-gradient-to-r from-transparent via-banquise-blue-lightest/30 to-transparent transform -rotate-6 animate-ocean-shimmer delay-2000" />
|
|
<div className="absolute top-[50%] left-[10%] w-40 h-1 bg-gradient-to-r from-transparent via-banquise-blue-lightest/20 to-transparent transform rotate-3 animate-ocean-shimmer delay-4000" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |