Stripe Flow

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/stripe-flow

Usage

import { StripeFlow } from "@reactbytes/stripe-flow";

export default function Example() {
  return (
    <StripeFlow />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | seed | number | 422 | Active seed for noise calculation. | | distortion | number | 45 | Multiplier controlling scalar field deformation. | | scale | number | 0.008 | Scale (density) of the Perlin noise texture grid. | | radius | number | 0.8 | Vignette circular boundary size multiplier. | | speed | number | 1 | Animation timeline speed multiplier. | | color1 | color | #1a2a6c | Base color. | | color2 | color | #b21f1f | Mid-wave color transition. | | color3 | color | #fdbb2d | Peak wave color. | | isPaused | boolean | false | Freeze the background wave flow animation. |

Presets

This component includes the following design presets:

• Neo-Mint Wave (Default) (default)
• Sunset Glow (sunset)
• Brutalist Monochrome (brutalist)
• Acid Flow (acid)
• Cyberpunk Neon (cyberpunk)
• Ocean Abyss (abyss)
• Northern Lights (aurora)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

Noise Physics Inspiration

• Gustavson 3D Noise - WebGL Classic Perlin Noise

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Stripe Flow.