-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathMistVeil.jsx
More file actions
51 lines (48 loc) · 2.09 KB
/
Copy pathMistVeil.jsx
File metadata and controls
51 lines (48 loc) · 2.09 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import React from 'react';
/**
* Fixed fog overlay — two huge blurred veils drifting on very slow cycles,
* plus a faint grain so the fog has tooth. Mount once per page, right after
* the Seo tag. Pointer-events none; sits above content washes (z-40) the
* same way Terracotta's paper grain does.
*/
const GRAIN = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.28 0 0 0 0 0.27 0 0 0 0.16 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")`;
const MistVeil = () => (
<div aria-hidden="true" className="pointer-events-none fixed inset-0 z-40">
<style>{`
@keyframes mist-veil-drift-a {
0%, 100% { transform: translate3d(-4%, -2%, 0); opacity: 0.5; }
50% { transform: translate3d(4%, 2%, 0); opacity: 0.75; }
}
@keyframes mist-veil-drift-b {
0%, 100% { transform: translate3d(3%, 2%, 0); opacity: 0.4; }
50% { transform: translate3d(-3%, -3%, 0); opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
.mist-veil-a, .mist-veil-b { animation: none !important; }
}
`}</style>
<div
className="mist-veil-a absolute -top-[20%] -left-[15%] w-[80%] h-[60%] rounded-full"
style={{
background:
'radial-gradient(ellipse, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 65%)',
filter: 'blur(40px)',
animation: 'mist-veil-drift-a 26s ease-in-out infinite',
}}
/>
<div
className="mist-veil-b absolute -bottom-[25%] -right-[10%] w-[75%] h-[65%] rounded-full"
style={{
background:
'radial-gradient(ellipse, rgba(223,229,227,0.9) 0%, rgba(223,229,227,0) 65%)',
filter: 'blur(50px)',
animation: 'mist-veil-drift-b 34s ease-in-out infinite',
}}
/>
<div
className="absolute inset-0 opacity-[0.5] mix-blend-multiply"
style={{ backgroundImage: GRAIN }}
/>
</div>
);
export default MistVeil;