Whitestripes

Dynamic motion background for hero sections and modern layouts.

Installation

npx shadcn@latest add @scrollxui/whitestripes

Usage

import WhiteStripes from '@/components/ui/whitestripes';

<WhiteStripes>
  <div className='text-center space-y-6'>
    <h1 className='text-5xl md:text-6xl font-extrabold leading-tight text-stroke-light'>
      Interface Is the Product.
    </h1>
  </div>
</WhiteStripes>

API Reference

WhiteStripes

The WhiteStripes component provides a smooth, animated striped background ideal for use in modern hero sections, landing pages, or immersive UI experiences. It loops continuously and adapts to light and dark themes.

Props

Property	Type	Default	Description
`className`	string	`—`	Optional class for custom styling.
`children`	React.ReactNode	`optional`	Content displayed over the animated background.