Feature Grid #13
@@ -23,9 +23,9 @@ const HeroDecor = ({ className = "" }) => {
|
||||
{/* 1) make noise */}
|
||||
<feTurbulence
|
||||
type="fractalNoise"
|
||||
baseFrequency="0.8"
|
||||
numOctaves="2"
|
||||
seed="3"
|
||||
baseFrequency="0.4"
|
||||
numOctaves="3"
|
||||
seed="7"
|
||||
stitchTiles="stitch"
|
||||
result="noise"
|
||||
/>
|
||||
@@ -35,10 +35,10 @@ const HeroDecor = ({ className = "" }) => {
|
||||
result="softNoise"
|
||||
type="matrix"
|
||||
values="
|
||||
0 0 0 0 0
|
||||
0 0 0 0 0
|
||||
0 0 0 0 0
|
||||
0 0 0 0.15 0"
|
||||
0.1 0 0 0 0.05
|
||||
0 0.1 0 0 0.05
|
||||
0 0 0.1 0 0.05
|
||||
0 0 0 0.25 0"
|
||||
/>
|
||||
{/* 3) MASK noise to the element's alpha only */}
|
||||
<feComposite
|
||||
|
||||
@@ -126,6 +126,15 @@ const QuoteBlock = ({
|
||||
<div
|
||||
className={`${config.card} bg-[var(--color-surface-default-brand-darker-accent)] relative overflow-hidden`}
|
||||
>
|
||||
{/* Background with noise texture */}
|
||||
<div
|
||||
className="absolute inset-0 bg-[var(--color-surface-default-brand-darker-accent)]"
|
||||
style={{
|
||||
filter:
|
||||
'url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="grain" filterUnits="objectBoundingBox" x="0" y="0" width="1" height="1" colorInterpolationFilters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="3" seed="7" stitchTiles="stitch" result="noise"/><feColorMatrix in="noise" result="softNoise" type="matrix" values="0.1 0 0 0 0.05 0 0.1 0 0 0.05 0 0 0.1 0 0.05 0 0 0 0.25 0"/><feComposite in="softNoise" in2="SourceAlpha" operator="in" result="maskedNoise"/><feBlend in="SourceGraphic" in2="maskedNoise" mode="multiply"/></filter></defs></svg>#grain\')',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* DECORATIONS (behind content) */}
|
||||
{config.showDecor && (
|
||||
<QuoteDecor
|
||||
|
||||
Reference in New Issue
Block a user