Striped Grid
Animated diagonal stripes with optional base grid, creating a dynamic textured background.
Loading...
Installation
npx shadcn@latest add @scrollxui/striped-grid Usage
import { StripedGrid } from '@/components/ui/striped-grid';<StripedGrid
speed='3s'
className='relative h-100 w-full flex flex-col items-center justify-center'
>
<h2 className='bg-clip-text text-transparent text-center bg-linear-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight'>
StripedGrid, <br /> Background.
</h2>
<p className='max-w-xl mx-auto text-sm md:text-lg text-neutral-700 dark:text-neutral-400 text-center'>
gliding right, setting the path.
</p>
</StripedGrid>Examples
Direction
Loading...
API Reference
Striped Grid
Animated diagonal stripes with optional base grid, creating a dynamic textured background.