-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathSnfFxLayer.jsx
More file actions
26 lines (24 loc) · 869 Bytes
/
Copy pathSnfFxLayer.jsx
File metadata and controls
26 lines (24 loc) · 869 Bytes
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
import React from 'react';
import { useSnf } from '../../context/SnfContext';
/**
* Renders the enabled CRT/used-future overlays inside the screen.
* Each effect is an independent, pointer-events-none layer gated by settings.
* (Reduced motion is handled in CSS via the root data-attribute.)
*/
const SnfFxLayer = () => {
const { settings, prefersReducedMotion } = useSnf();
return (
<>
{settings.scanlines && <div className="snf-fx snf-scanlines" />}
{settings.scanlines && !prefersReducedMotion && (
<div className="snf-fx">
<div className="snf-rollbar" />
</div>
)}
{settings.grain && <div className="snf-fx snf-grain" />}
{settings.flicker && <div className="snf-fx snf-flicker" />}
{settings.vignette && <div className="snf-fx snf-vignette" />}
</>
);
};
export default SnfFxLayer;