/* Sensara page sections */ /* ————————————————— NAV ————————————————— */ function Nav() { const y = useScrollY(); const scrolled = y > 60; const [open, setOpen] = useState(false); const items = [ ['Technology', '#technology'], ['Product', '#product'], ['Global', '#global'], ['Sustainability', '#sustainability'], ['Contact', '#contact'], ]; return ( ); } /* ————————————————— HERO ————————————————— */ function Hero() { const ref = useRef(null); const y = useScrollY(); const [vh, setVh] = useState(typeof window !== 'undefined' ? window.innerHeight : 800); useEffect(() => { const f = () => setVh(window.innerHeight); window.addEventListener('resize', f); return () => window.removeEventListener('resize', f); }, []); // Make the hero sticky over a 2x viewport scroll track so the shrink-window effect has room. // Progress 0..1 over the full track. const prog = Math.max(0, Math.min(1, y / (vh * 1.1))); const ease = prog * prog * (3 - 2 * prog); // smoothstep // Window shrink params const scale = 1 - ease * 0.22; // 100% → 78% const radius = ease * 28; // 0 → 28px const insetX = ease * 60; // horizontal inset const insetY = ease * 40; // vertical inset const translateY = -ease * 40; return (
{/* Sticky viewport */}
{/* Suede texture revealed behind hero as window shrinks */}
{/* Video stage */}
{/* Actual video */} {/* Darken overlay for text readability */}
{/* Vignette */}
{/* Grain */}
{/* Hero text */}

ENGINEERED FOR THE SENSES.

{/* Scroll indicator */}
Scroll to Explore
); } /* ————————————————— SECTION 2: TECH STATEMENT ————————————————— */ function TechStatement() { const [hover, setHover] = useState(null); const specs = [ ['Gramature', '260 – 320 gsm'], ['Composition', 'PES, PU, Spandex blends'], ['Process', '100% Solvent Free'], ['Recyclability', 'Mono-component options'], ]; return (
{/* Header */}

Made to belong

Made to
belong

Calibrated to each performance profile, the Sensara portfolio carries four distinct technologies: Air, Core, Plus, Skin. Each tuned to its application. The first microfiber-suede portfolio tailored to each surface. Considered to spec, never beyond it.

Approved against the standards an automotive interior is expected to meet.

{/* Spec strip */}
{specs.map(([k,v],i)=>(
{k}
{v}
))}
{/* Interior application map with real images */}
{/* Zone list below image */}
{HOTSPOT_DATA.map(spot => ( ))}
); } /* ————————————————— SECTION: THE TOUCH — sensory reveal ————————————————— */ function TheTouch() { const sectionRef = useRef(null); const [mouse, setMouse] = useState({ x: -200, y: -200 }); const [isInside, setIsInside] = useState(false); const [isMobile, setIsMobile] = useState(false); const [mobileReveal, setMobileReveal] = useState(0); useEffect(() => { const check = () => setIsMobile(window.innerWidth < 768 || 'ontouchstart' in window); check(); window.addEventListener('resize', check); return () => window.removeEventListener('resize', check); }, []); // Mobile: scroll-driven reveal instead of cursor const sectionProgress = useSectionProgress(sectionRef); useEffect(() => { if (isMobile) { setMobileReveal(Math.min(1, Math.max(0, (sectionProgress - 0.2) * 2.5))); } }, [sectionProgress, isMobile]); const handleMouseMove = useCallback((e) => { if (isMobile) return; const rect = sectionRef.current?.getBoundingClientRect(); if (!rect) return; setMouse({ x: e.clientX - rect.left, y: e.clientY - rect.top }); }, [isMobile]); // Mobile: touch follow const handleTouchMove = useCallback((e) => { const rect = sectionRef.current?.getBoundingClientRect(); if (!rect) return; const touch = e.touches[0]; setMouse({ x: touch.clientX - rect.left, y: touch.clientY - rect.top }); setIsInside(true); }, []); return (
!isMobile && setIsInside(true)} onMouseLeave={() => { if (!isMobile) { setIsInside(false); setMouse({ x: -200, y: -200 }); }}} onTouchMove={handleTouchMove} onTouchEnd={() => { setIsInside(false); setMouse({ x: -200, y: -200 }); }} > {/* Base layer — dimmed suede texture */}
{/* Revealed layer — cursor circle (desktop) or touch follow (mobile) */} {(!isMobile || isInside) && (
)} {/* Custom cursor ring — desktop only */} {isInside && !isMobile && (
)} {/* Center content — parallax for depth */}
Masterclass
in detail

Real craft reveals itself slowly. With each movement, it tells you a little more. About its depth, about the way light shifts and highlights the hand behind it.

{/* Bottom hint */}
[ explore the texture ]
); } /* ————————————————— SECTION 3: PRODUCT TYPES ————————————————— */ const PRODUCTS = [ { code: '01', name: 'Sensara Air', tag: 'Lightweight. Elegant. Fully Recyclable.', specs: ['280 gsm', 'Mono-component · 100% PES', 'Solvent free', 'High elongation'], apps: ['Headliner & Pillars', 'Overhead Systems'], selling: 'Exceptional quality-to-price ratio. Precision perforation. Lighting effects integration.', swatch: 'dark', }, { code: '02', name: 'Sensara Core', tag: 'Design. Durability. Circularity.', specs: ['320 gsm', 'Mono-component · 100% PES', 'Solvent free', 'High abrasion resistance'], apps: ['Door Panels', 'Seat Systems'], selling: 'Low elongation for high-stress areas. Full recyclability at vehicle EOL.', swatch: 'dark', }, { code: '03', name: 'Sensara Plus', tag: 'Luxury Performance for Demanding Interiors.', specs: ['300 gsm', '70% PES / 30% PU', 'Solvent free · Water based', 'High abrasion resistance'], apps: ['Seats', 'Door Panels', 'Instrument Panels', 'Headliner & Pillars'], selling: 'Available in Plus Light version for headliner applications. Up to 70% recycled content.', swatch: 'azure', }, { code: '04', name: 'Sensara Skin', tag: 'Ultimate Softness for Direct Contact.', specs: ['260 gsm', '90% PES / 10% Spandex', 'Solvent free', 'Ultra-soft touch'], apps: ['Head Pillow Cushions'], selling: 'Engineered for comfort zones in direct contact with the human head. Up to 65% recycled content.', swatch: 'dark', }, ]; /* Accordion panel for each product */ function AccordionPanel({ p, idx, hovered, anyHovered, setHovered }) { const isActive = hovered === idx; const isCompressed = anyHovered && !isActive; const flex = isActive ? 60 : isCompressed ? 13 : 25; const panelRef = useRef(null); const [mousePos, setMousePos] = useState({ x: 50, y: 50 }); // Per-panel color overlay for the texture — strong differentiation const tints = { '01': 'rgba(40,38,35,0.72)', // warm sand '02': 'rgba(15,20,40,0.70)', // deep navy '03': 'rgba(10,25,60,0.60)', // azure blue '04': 'rgba(50,18,22,0.68)', // burgundy wine }; const handleMouseMove = useCallback((e) => { const rect = panelRef.current?.getBoundingClientRect(); if (!rect) return; const x = ((e.clientX - rect.left) / rect.width) * 100; const y = ((e.clientY - rect.top) / rect.height) * 100; setMousePos({ x, y }); }, []); return (
setHovered(idx)} onMouseLeave={()=>setHovered(null)} onMouseMove={handleMouseMove} className="relative h-full cursor-pointer overflow-hidden border-r border-black/40 last:border-r-0" style={{ flex: `${flex} 1 0`, transition: 'flex 0.55s cubic-bezier(0.4, 0, 0.2, 1)', }} > {/* Real suede texture photo */}
{/* Color tint overlay */}
{/* Mouse-follow spotlight — simulates suede nap changing with touch */}
{/* Dim when compressed */}
{/* Azure edge when active */}
{/* Compressed state — rotated short name */}
{p.code}
{p.name.replace('Sensara ', '')}
+
{/* Expanded state */}
{p.code} / 04 ● Active

{p.name}

{p.tag}

{p.specs.map((s,i)=>(
{s}
))}
Applications
{p.apps.map(a=>( {a} ))}

{p.selling}

Request {p.name} → {/* Mini hotspot diagram */}
Application zone {/* Hotspot for this product */} {p.code === '01' && <>HEADLINER} {p.code === '02' && <>SEATS} {p.code === '03' && <>MULTI} {p.code === '04' && <>PILLOW}
); } function ProductTypes() { const [hovered, setHovered] = useState(0); const [mobileActive, setMobileActive] = useState(0); const [isMobile, setIsMobile] = useState(typeof window !== 'undefined' && window.innerWidth < 768); useEffect(() => { const check = () => setIsMobile(window.innerWidth < 768); window.addEventListener('resize', check); return () => window.removeEventListener('resize', check); }, []); return (
{/* Full-bleed accordion — desktop */}
{PRODUCTS.map((p, i) => ( ))}
{/* Mobile stack — tap to expand */}
{PRODUCTS.map((p, i) => (
setMobileActive(mobileActive === i ? null : i)} className="relative overflow-hidden border-b border-white/10 cursor-pointer" style={{height: mobileActive === i ? '420px' : '80px', transition:'height 0.5s cubic-bezier(0.4,0,0.2,1)'}} > {/* Suede texture */}
{/* Header row */}
{p.code} {p.name.replace('Sensara ', '')}
+
{/* Expanded content */}

{p.tag}

{p.specs.map((s,si)=>(
{s}
))}
Applications
{p.apps.map(a=>( {a} ))}
Request {p.name}→
))}
{/* Brand marquee — integrated at bottom */}

The new standard, already in production.
Global OEM partners · 2020-present
{['BYD','NIO','ZEEKR','GEELY','VOLKSWAGEN','XPENG','CHERY','DONGFENG','GAC','SAIC','BYD','NIO','ZEEKR','GEELY','VOLKSWAGEN','XPENG','CHERY','DONGFENG','GAC','SAIC','BYD','NIO','ZEEKR','GEELY','VOLKSWAGEN','XPENG','CHERY','DONGFENG','GAC','SAIC'].map((b,i)=>(
{b}
))}
{/* Fade edges — dark */}
); } /* Dead code removed: APPLICATIONS, ApplicationTile, BrandStrip */ /* ————————————————— CARBON RECEIPT (V1 - BARS) ————————————————— */ function CarbonReceipt({ cert, delay = 0 }) { const numRef = useRef(null); const barRef = useRef(null); useEffect(() => { if (!window.gsap) return; const gsap = window.gsap; const numEl = numRef.current; const barEl = barRef.current; if (!numEl || !barEl) return; const counter = { v: 0 }; gsap.set(numEl, { textContent: '0.00' }); const numTl = gsap.to(counter, { v: cert.value, duration: 1.2, ease: 'power2.out', onUpdate: () => { numEl.textContent = counter.v.toFixed(2); }, scrollTrigger: { trigger: numEl, start: 'top 90%', end: 'top 50%', scrub: 0.8 }, }); gsap.set(barEl, { width: '0%' }); const barTl = gsap.to(barEl, { width: cert.value + '%', duration: 1.2, ease: 'power2.out', scrollTrigger: { trigger: barEl, start: 'top 90%', end: 'top 50%', scrub: 0.8 }, }); return () => { [numTl, barTl].forEach((tl) => { if (tl.scrollTrigger) tl.scrollTrigger.kill(); tl.kill(); }); }; }, [cert.value]); return (
{/* Product + spec */}
{cert.product}
{cert.spec}
{/* Carbon figure */}
{cert.value.toFixed(2)} kgCO₂e / kg
{/* Magnitude bar */}
0 Per 1 kg of fabric, cradle to gate 100
{/* Footer: registrar + stamp */}
Audited · Bureau Veritas · 2024 Certified
); } /* ————————————————— SECTION 6: SUSTAINABILITY ————————————————— */ function Sustainability() { const certs = [ { id:'STRZ-BV2024008', product:'Sensara Skin', spec:'220 gsm, weft-knitted', value:18.44 }, { id:'STRZ-BV2024007', product:'Sensara Plus', spec:'350 gsm, non-woven microfiber', value:93.42 }, ]; const pillars = [ { n:'01', title:'Recycled Fibers', desc:'Up to 70% recycled content across the Sensara portfolio. Turning waste into premium material.', icon: }, { n:'02', title:'Solvent Free', desc:'100% solvent-free production. Water-based processes where applicable. Zero harmful emissions.', icon: }, { n:'03', title:'Mono-component Recyclability', desc:'Sensara Air and Core are 100% mono-component (PES), ensuring full recyclability at vehicle end-of-life. Circular by design.', icon: }, { n:'04', title:'Low Carbon Footprint', desc:'Sustainable manufacturing practices that minimize environmental impact throughout the entire production cycle.', icon: }, ]; return (
{/* Transition gradient from Globe above */}
{/* Left column: Carbon Receipts */}
Carbon footprints, audited
{certs.map((cert, i) => ( ))}

Per kilogram of finished fabric, cradle to gate. Audited and certified by Bureau Veritas under ZGCA-JSGF. Carbon footprints for Sensara Air and Sensara Core are in qualification.

{/* Right column: headline + pillars + quote */}
Sustainability
Sustained with
Purpose.
{pillars.map((p, i) => (
{p.n}
{p.icon}

{p.title}

{p.desc}

 ))}

"Sensara empowers designers and OEMs to create distinctive, high-value interiors without compromising sustainability or performance."

); } /* ————————————————— FOOTER ————————————————— */ function Footer() { return ( ); } Object.assign(window, { Nav, Hero, TechStatement, TheTouch, ProductTypes, Sustainability, Footer });