/* global React */ const { useState, useEffect, useRef } = React; // ============ NAV ============ function Nav() { return ( ); } // ============ HERO with sound visualizer ============ function Hero() { const [time, setTime] = useState(0); useEffect(() => { let raf; let t0 = performance.now(); const tick = (now) => { setTime((now - t0) / 1000); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); return (

LOOK SHARP. SOUND PURE.

LOOK SHARP.
SOUND PURE.

פאנלים אקוסטיים בגובה 2.80 מ׳ — בלי חיבורים נראים, בלי פשרות. סופגים את הרעש, מחזירים את הסאונד, והופכים את הקיר שלך לאובייקט עיצוב.

קבל ייעוץ חינם ← חשב לחדר שלך

0.80NRC

ספיגת רעש

GRSV4.0

תקן ממוחזר

7days

ייצור והתקנה

); } // Sophisticated multi-layer acoustic visualization function SoundWaveViz({ t }) { const W = 600, H = 600; const panelX = 60, panelY = 60, panelW = 180, panelH = 480; const panelRight = panelX + panelW; const cy = H/2; const sourceX = W - 70; // ====== Multi-frequency continuous wavefronts ====== // Three frequency bands traveling right→left, attenuating near panel. const FREQS = [ { freq: 0.6, amp: 28, color: 'var(--copper)', speed: 1.0, weight: 1.4 }, // low { freq: 1.2, amp: 18, color: '#ff9d6e', speed: 1.3, weight: 1.0 }, // mid { freq: 2.4, amp: 10, color: 'var(--volt)', speed: 1.6, weight: 0.8 }, // high ]; // Build continuous waveform paths for each frequency (sine traveling) const wavePaths = FREQS.map((F, fi) => { const pts = []; for (let x = sourceX; x >= panelRight - 10; x -= 4) { const distFromSource = sourceX - x; // attenuation envelope: stays full to ~50px before panel, then collapses INTO panel const distToPanel = x - panelRight; const env = distToPanel > 60 ? 1 : Math.max(0, distToPanel / 60); const phase = distFromSource * 0.04 * F.freq - t * 2.4 * F.speed; const y = cy + Math.sin(phase) * F.amp * env; pts.push([x, y]); } return { ...F, pts, fi }; }); // ====== Particle stream — energy flowing into the panel ====== // Each particle has a stable phase offset so motion is continuous. const PARTICLE_COUNT = 22; const particles = []; for (let i = 0; i < PARTICLE_COUNT; i++) { const seed = i * 7919; // deterministic const phase = ((t * 0.18 + i / PARTICLE_COUNT) % 1); const startX = sourceX; const endX = panelRight + 4; const x = startX - phase * (startX - endX); // sinusoidal vertical drift along the path, narrowing toward panel const yOffset = Math.sin(phase * Math.PI * 3 + i * 0.7) * (1 - phase) * 80; const y = cy + yOffset + ((seed % 100) - 50) * (1 - phase) * 0.3; const size = 0.8 + (1 - phase) * 1.4; const opacity = phase < 0.05 ? phase / 0.05 : phase > 0.92 ? (1 - phase) / 0.08 : 1; particles.push({ x, y, size, opacity, key: i }); } // ====== Spectrum analyzer inside panel (responds to wave activity) ====== const SPECTRUM_BINS = 18; const spectrum = []; for (let i = 0; i < SPECTRUM_BINS; i++) { // each bin oscillates with a unique frequency to mimic absorbed energy const f1 = Math.sin(t * 4 + i * 0.45); const f2 = Math.sin(t * 2.3 + i * 0.7 + 1.1); const f3 = Math.sin(t * 7 + i * 0.2); const v = (f1 * 0.6 + f2 * 0.3 + f3 * 0.1) * 0.5 + 0.5; // 0..1 // taper: low bins stronger than high const taper = 1 - (i / SPECTRUM_BINS) * 0.5; spectrum.push(v * taper); } // ====== Live dB readouts ====== // before-panel level: high (drives the source pulse) const sourcePulse = 0.7 + 0.3 * Math.sin(t * 6) * Math.sin(t * 2.7); const dbIn = 78 + Math.round(sourcePulse * 7); const dbOut = 32 + Math.round(Math.sin(t * 1.5) * 4); const reduction = dbIn - dbOut; // ====== Frequency response curve (plotted along bottom) ====== const responsePts = []; for (let i = 0; i < 60; i++) { const x = panelRight + 30 + i * 5; const freqProgress = i / 60; // simulated NRC curve — peak absorption mid-band const absorption = 0.3 + Math.sin(freqProgress * Math.PI) * 0.55 + Math.sin(t * 1.2 + freqProgress * 6) * 0.04; const y = H - 60 - absorption * 50; responsePts.push([x, y]); } const responsePath = `M ${responsePts.map(p => p.join(',')).join(' L ')}`; // panel perforations const dots = []; for (let r = 0; r < 19; r++) { for (let c = 0; c < 9; c++) { // pulse opacity based on local spectrum const binIdx = Math.floor((r / 19) * SPECTRUM_BINS); const pulse = spectrum[binIdx] || 0; dots.push({ x: panelX + 16 + c*16, y: panelY + 18 + r*24, r: 1.4, opacity: 0.3 + pulse * 0.5 }); } } return ( ); } window.Nav = Nav; window.Hero = Hero;