Striped Pattern

Diagonal stripes that fill their parent, with an optional edge fade and a slow drift along the stripes.

Motionv0.1.0experimentalWCAG 2.2 AAView spec

Optional, and kept apart.

Nothing here is included in a project unless you add it, and the plain component it builds on is unchanged. This effect is decoration: it is hidden from screen readers, stands still for visitors who prefer reduced motion, and can be paused. Use Still on a preview to see that version.

Diagonal stripes

A calm texture behind content

import { StripedPattern } from "@rdloom/react";

export default function StripedPatternExample() {
  return (
    <div className="flex w-full justify-center">
      <div className="relative flex h-96 w-full items-center justify-center overflow-hidden rounded-xl border border-[var(--rd-color-border-default)] bg-[var(--rd-color-surface-default)]">
        <StripedPattern fade={false} />
        <div className="relative text-center">
          <p className="text-4xl font-semibold tracking-tight text-[var(--rd-color-text-default)]">Diagonal stripes</p>
          <p className="text-base text-[var(--rd-color-text-muted)]">A calm texture behind content</p>
        </div>
      </div>
    </div>
  );
}

Installation

CLI

Manual

npm

pnpm

yarn

bun

npx rdloom add striped-pattern

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.

Use another registry client

npx shadcn@latest add https://rdloom.vimalbhatt.com/r/striped-pattern.json

Works, but without upgrade tracking.

Usage

import { StripedPattern } from "@rdloom/react";

<div className="flex w-full justify-center">
  <div className="relative flex h-96 w-full items-center justify-center overflow-hidden rounded-xl border border-[var(--rd-color-border-default)] bg-[var(--rd-color-surface-default)]">
    <StripedPattern fade={false} />
    <div className="relative text-center">
      <p className="text-4xl font-semibold tracking-tight text-[var(--rd-color-text-default)]">Diagonal stripes</p>
      <p className="text-base text-[var(--rd-color-text-muted)]">A calm texture behind content</p>
    </div>
  </div>
</div>

Faded

Opposite angle

Fading toward the edges

import { StripedPattern } from "@rdloom/react";

export default function StripedPatternExample() {
  return (
    <div className="flex w-full justify-center">
      <div className="relative flex h-96 w-full items-center justify-center overflow-hidden rounded-xl border border-[var(--rd-color-border-default)] bg-[var(--rd-color-surface-default)]">
        <StripedPattern size={3} gap={14} angle={-45} fade />
        <div className="relative text-center">
          <p className="text-4xl font-semibold tracking-tight text-[var(--rd-color-text-default)]">Opposite angle</p>
          <p className="text-base text-[var(--rd-color-text-muted)]">Fading toward the edges</p>
        </div>
      </div>
    </div>
  );
}

Animated

Slow drift

Moves along the stripes

import { StripedPattern } from "@rdloom/react";

export default function StripedPatternExample() {
  return (
    <div className="flex w-full justify-center">
      <div className="relative flex h-96 w-full items-center justify-center overflow-hidden rounded-xl border border-[var(--rd-color-border-default)] bg-[var(--rd-color-surface-default)]">
        <StripedPattern animated fade />
        <div className="relative text-center">
          <p className="text-4xl font-semibold tracking-tight text-[var(--rd-color-text-default)]">Slow drift</p>
          <p className="text-base text-[var(--rd-color-text-muted)]">Moves along the stripes</p>
        </div>
      </div>
    </div>
  );
}

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

Prop	Type	Default
`size` Stripe width in pixels.	`number`	`2`
`gap` Space between stripes in pixels.	`number`	`10`
`angle` Stripe direction in degrees.	`number`	`45`
`color` Colour of the pattern: any CSS colour or a token such as var(--rd-color-border-default).	`string`	`"color-mix(in srgb, var(--rd-color-text-default) 16%, transparent)"`
`fade` Fades the pattern out toward its edges.	`boolean`	`true`
`animated` Drifts the pattern slowly, one tile per cycle. Off by default.	`boolean`	`false`
`isStill` Stops the drift. Moving content should be stoppable.	`boolean`	`false`
`duration` Seconds one drift cycle takes.	`number`	`6`

Accessibility

Role presentation, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

Not interactive.

Screen readers announce

Ignored: it is not announced

What your code must do

Pure decoration: aria-hidden, never focusable, and pointer-events none so content on top stays usable
It is drawn with CSS only, so it needs no JavaScript and is safe in server HTML
Stands still for visitors who ask for less motion (prefers-reduced-motion), with isStill, and inside an rdm-still container
Drift is slow and never flashes (WCAG 2.2.2, 2.3.1)
Hidden in forced-colors (high contrast) mode so it never fights system colours
Keep text on top at 4.5:1 against the lines: use a low-contrast token for the pattern

Guidelines

Use it when

A quiet striped behind a hero, card or empty state
Giving a flat surface a little texture

Avoid it when

Behind long text where the lines reduce legibility
As the only way to show a boundary or meaning

Don't

A high-contrast colour that competes with the content
Animating several patterns on one screen

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

--rd-color-border-default