āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/adityakishore0/scrollx-ui/components/whitestripes ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<ComponentPreview name="whitestripes-demo" className="p-0" description="" />
<Step>Install the following dependencies:</Step> <DepsOptions name="framer-motion" />
<Step>Copy and paste the following code into your project.</Step>
<p> <code>whitestripes.tsx</code> </p> <ComponentSource name="whitestripes" /> </Steps> </TabsContent> </Tabs>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>
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.
<PropsTable rows={[ { prop: "className", type: "string", default: "ā", description: "Optional class for custom styling." }, { prop: "children", type: "React.ReactNode", default: "optional", description: "Content displayed over the animated background." } ]} />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā