All components

Reveal On Scroll

Reveal On Scroll is a React and Tailwind CSS component from Motion Primitives, licensed MIT. Copy it and paste it into your project.

Motion Primitives MIT other

What it is

Reveal On Scroll is a React and Tailwind CSS component from Motion Primitives, licensed MIT. Copy it and paste it into your project.

How to use it

Open it in the catalogue, press copy, and paste it into your project. The prompt you copy carries the code and the rules that tell your agent to reproduce it without changing anything.

Open in the catalogue

Four free copies a week. No card.

No packages beyond the project baseline

Licence

This component comes from Motion Primitives and is redistributed under the MIT licence, which permits commercial use. The copyright notice travels with the code.

Reveal On Scroll

app/docs/in-view/in-view-basic.tsx
import { InView } from '@/components/core/in-view';

export function InViewBasic() {
  return (
    <div className='h-[350px] w-full overflow-auto'>
      <div className='py-12 text-center text-sm'>Scroll down</div>
      <div className='flex h-[500px] items-end justify-center px-4 pb-24'>
        <InView
          variants={{
            hidden: { opacity: 0, y: 100, filter: 'blur(4px)' },
            visible: { opacity: 1, y: 0, filter: 'blur(0px)' },
          }}
          viewOptions={{ margin: '0px 0px -200px 0px' }}
          transition={{ duration: 0.3, ease: 'easeInOut' }}
        >
          <div className='max-w-96'>
            <p className=''>
              <strong className='font-medium'>
                Craft beautiful animated components with Motion-Primitives.
              </strong>{' '}
              Designed for developers and designers. The library leverages the
              power of Motion, with intuitive APIs that simplifies creating
              complex animations for any project. Start building more dynamic
              interfaces today.
            </p>
          </div>
        </InView>
      </div>
    </div>
  );
}

Similar components