ScrollRevealSection

scrollrevealsection-1779388705610.tsx

'use client';
import { useEffect, useRef, useState } from 'react';

export default function ScrollRevealSection() {
  const items = [
    { icon: '⚡', title: 'Lightning Fast', desc: 'Sub-100ms response times across all operations' },
    { icon: '🔒', title: 'Secure by Default', desc: 'End-to-end encryption with zero-knowledge architecture' },
    { icon: '🌐', title: 'Global Scale', desc: 'Deploy to 200+ edge locations worldwide instantly' },
    { icon: '🤖', title: 'AI-Powered', desc: 'Intelligent automation that learns from your workflows' },
  ];

  return (
    <div style={{ padding: '60px 32px', fontFamily: 'system-ui, sans-serif', maxWidth: '800px' }}>
      <h2 style={{ textAlign: 'center', color: '#F5F5F0', fontSize: '32px', fontWeight: 800, marginBottom: '48px' }}>
        Why choose us
      </h2>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
        {items.map((item, i) => (
          <RevealItem key={i} item={item} delay={i * 100} />
        ))}
      </div>
    </div>
  );
}

function RevealItem({ item, delay }) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setTimeout(() => setVisible(true), delay); obs.disconnect(); }
    }, { threshold: 0.1 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [delay]);

  return (
    <div ref={ref} style={{
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(24px)',
      transition: 'all 0.6s cubic-bezier(0.4,0,0.2,1)',
      background: 'rgba(255,255,255,0.03)',
      border: '1px solid rgba(255,255,255,0.07)',
      borderRadius: '16px',
      padding: '24px',
    }}>
      <div style={{ fontSize: '28px', marginBottom: '12px' }}>{item.icon}</div>
      <h3 style={{ color: '#F5F5F0', margin: '0 0 8px 0', fontSize: '16px', fontWeight: 700 }}>{item.title}</h3>
      <p style={{ color: 'rgba(245,245,240,0.55)', margin: 0, fontSize: '14px', lineHeight: 1.6 }}>{item.desc}</p>
    </div>
  );
}

Component info

CategoryPage Sections

Frameworkreact

TierFREE

Copies0

About

Section with intersection observer scroll reveal animation

More from Page Sections

'use client'
import { useState } from 'react'

export default function CTASection() {
  const [email, setEmail] = useState('')
  const [submitted, setSubmitted] = useState(false)

  return (
    <div style={{ background: 'linear-gradient(135deg, #080

CTASection

Page Sections

'use client'
import { useState } from 'react'

const features = [
  { title: 'AI-Generated', desc: '17,500+ components generated by state-of-the-art language models', icon: '🤖', size: 'large', accent: '#C9A84C' },
  { title: 'MCP Native', desc: 'Wor

FeatureBento

Page Sections