diff --git a/app/components/sections/HeroBanner/HeroDecor.tsx b/app/components/sections/HeroBanner/HeroDecor.tsx index 075ff4a..407376b 100644 --- a/app/components/sections/HeroBanner/HeroDecor.tsx +++ b/app/components/sections/HeroBanner/HeroDecor.tsx @@ -1,84 +1,23 @@ -"use client"; - -import { memo, useEffect, useState } from "react"; +import { memo } from "react"; interface HeroDecorProps { className?: string; } const HeroDecor = memo(({ className = "" }) => { - const [grainEnabled, setGrainEnabled] = useState(false); - - useEffect(() => { - // feTurbulence forces tiled rasterization that reads as top-down segments on - // first paint. Flat shapes render immediately; grain applies after paint. - const frame = requestAnimationFrame(() => { - setGrainEnabled(true); - }); - return () => cancelAnimationFrame(frame); - }, []); - return ( ); diff --git a/lib/svgGrainFilter.ts b/lib/svgGrainFilter.ts index 1b7924d..63bbe2e 100644 --- a/lib/svgGrainFilter.ts +++ b/lib/svgGrainFilter.ts @@ -1,3 +1,3 @@ -/** feTurbulence grain masked to alpha and multiply-blended — matches HeroDecor. */ +/** feTurbulence grain masked to alpha and multiply-blended. */ export const SVG_GRAIN_MULTIPLY_FILTER = 'url(\'data:image/svg+xml;charset=utf-8,#grain\')'; diff --git a/stories/sections/HeroDecor.stories.js b/stories/sections/HeroDecor.stories.js index c76baf8..5e2d4e8 100644 --- a/stories/sections/HeroDecor.stories.js +++ b/stories/sections/HeroDecor.stories.js @@ -8,7 +8,7 @@ export default { docs: { description: { component: - "A decorative SVG component that provides background visual elements for the HeroBanner. Features grain effects and organic shapes that enhance the visual appeal without interfering with content readability.", + "A decorative SVG component that provides background visual elements for the HeroBanner. Organic shapes sit behind content using the brand darker-accent fill.", }, }, },