import { useScrollVelocity } from 'react-scroll-velocity';

function ScrollDebug() {
  const { velocity, direction, isScrolling } = useScrollVelocity();

  return (
    <div>
      <p>Velocity: {velocity.toFixed(2)}</p>
      <p>Direction: {direction}</p>
      <p>{isScrolling ? 'Scrolling...' : 'Idle'}</p>
    </div>
  );
}

import { VelocityText, VelocityMarquee, VelocityOpacity } from 'react-scroll-velocity';

function App() {
  return (
    <>
      {/* Text skews when scrolling */}
      <VelocityText maxSkew={15}>
        <h1>Scroll to see me skew</h1>
      </VelocityText>

      {/* Marquee speeds up when scrolling */}
      <VelocityMarquee baseSpeed={50}>
        <span style={{ padding: '0 2rem' }}>Breaking News — </span>
      </VelocityMarquee>

      {/* Content fades when scrolling fast */}
      <VelocityOpacity>
        <p>I fade when you scroll fast</p>
      </VelocityOpacity>
    </>
  );
}