Package Exports

gradient-swoop
gradient-swoop/dist/index.js
gradient-swoop/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gradient-swoop) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

gradient-swoop

Animated bezier gradient swoop component for React.

Install

npm install gradient-swoop

Minimal usage

import { GradientSwoop } from 'gradient-swoop'

export default function Example() {
  return (
    <GradientSwoop
      style={{ height: 320 }}
      className="w-full rounded-2xl"
      colors={['#f97316', '#7c3aed', '#ec4899']}
    />
  )
}

Props

Name	Type	Default	Description
`colors`	`string[]`	`['#f97316', '#7c3aed', '#ec4899']`	Blob colors. Number of colors = number of blobs.
`background`	`string`	`'#0f0f1a'`	Base background shown where blobs don’t reach.
`blobSize`	`number`	`65`	Blob diameter as % of container size (20–100).
`speed`	`number`	`0.25`	Ambient drift speed (0–1).
`grain`	`boolean`	`true`	Enables film grain overlay.
`grainOpacity`	`number`	`0.18`	Grain strength (0–1).
`interactive`	`boolean`	`true`	Enables cursor interaction.
`repelRadius`	`number`	`0.3`	Cursor repel radius (0–1, relative to container).
`repelStrength`	`number`	`0.012`	Cursor repel strength (0–1).
`springStrength`	`number`	`0.04`	Spring pullback strength (0.01–0.2).
`damping`	`number`	`0.92`	Velocity damping (0.8–0.99).
`blur`	`number`	`0`	CSS blur applied to the gradient layer (px).
`className`	`string`	`''`	Classes applied to the outer container.
`style`	`React.CSSProperties`	`undefined`	Inline styles applied to the outer container (use for fixed height).
`children`	`React.ReactNode`	`undefined`	Content rendered above the gradient.
(passthrough)	`React.ComponentPropsWithoutRef<'div'>`	—	All other `<div>` props are forwarded (e.g. `id`, `onClick`, `aria-*`).

Customization

1) Hero banner with content overlay

import { GradientSwoop } from 'gradient-swoop'

export function Hero() {
  return (
    <GradientSwoop
      className="w-full rounded-3xl"
      style={{ height: 360 }}
      colors={['#f97316', '#7c3aed', '#ec4899']}
      blobSize={75}
      speed={0.2}
      grainOpacity={0.2}
    >
      <div className="h-full w-full flex items-center justify-center">
        <h1 className="text-white text-5xl font-bold tracking-tight">gradient-swoop</h1>
      </div>
    </GradientSwoop>
  )
}

2) Subtle background (less motion, less grain)

import { GradientSwoop } from 'gradient-swoop'

export function SubtleBackground() {
  return (
    <GradientSwoop
      className="w-full rounded-2xl"
      style={{ height: 240 }}
      speed={0.06}
      grainOpacity={0.08}
      interactive={false}
    />
  )
}

3) Highly interactive “pushy” blobs

import { GradientSwoop } from 'gradient-swoop'

export function InteractiveCard() {
  return (
    <GradientSwoop
      className="w-full rounded-2xl"
      style={{ height: 220 }}
      repelRadius={0.4}
      repelStrength={0.04}
      springStrength={0.12}
      damping={0.9}
    />
  )
}