StripeFlow

Diagonal stripes gliding along, softened at the edges.

Under construction

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/stripe-flow.json

React
import StripeFlow from "@/components/fx/stripe-flow"

<StripeFlow className="px-8 py-24">
    <h2>Your content</h2>
</StripeFlow>

The effect layer is aria-hidden and ignores pointer events; only children are exposed.
Pauses offscreen; `paused` stops it on demand (wire it to a visible control if it runs behind reading content).
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) holds the stripes still.

Prop	Type	Default	Description
colors	[string, string]	violet, transparent	Stripe and gap colours.
width	number	22	Stripe width in px.
speed	number	1.6	Seconds per stripe step.
paused	boolean	false	Stop the animation. It also pauses offscreen.
...props	ComponentProps<'div'>	—	Passed to the root div; children render above.